[点晴永久免费OA]利用contenteditable属性与execCommand()步骤制作简易富文本编辑器

当前位置：点晴教程→点晴OA办公管理信息系统 →『经验分享&问题答疑』

admin

2017年8月18日 12:41 本文热度 6055

前面的话

　 HTML5新增contenteditable全局属性，通过此属性与document.execCommand()方法来制作富文本编辑器　

contenteditable属性

　　作用：指定是否可以在浏览器里编辑内容

　　值：true/false

　　注意：设置document.designMode =''on''时，页面的任意位置都可以编辑；使用contenteditable =''true''则只对具体元素和其包含的元素起作用

　　移动端：移动端ios5以及android3之后才支持该属性

<div contenteditable>我是测试文字</div>

document.execCommand()方法

document.execCommand(String aCommandName, Boolean aShowDefaultUI, String aValueArgument)
//aCommandName为命令名称，不可省略
//aShowDefaultUI为是否展示用户界面，默认为false，可省略
//aValueArgument为额外参数值，默认为null,可省略

　　 [注意]firefox浏览器在第二个参数为true时，会抛出错误，所以为了确保兼容性，第二个参数应该始终为false。

【1】段落格式

　　[1.1]居中

document.execCommand(''justifyCenter'');

　　[1.2]左对齐

document.execCommand(''justifyLeft'');

　　[1.3]右对齐

document.execCommand(''justifyRight'');

　　[1.4]添加缩进

document.execCommand(''indent'');

　　[1.5]去掉缩进

document.execCommand(''outdent'');

【2】文本格式

　　[2.1]字体类型

document.execCommand(''fontname'',false,sFontName)

　　[2.2]字体大小

document.execCommand(''fontsize'',false,sFontSize)

　　[2.3]字体颜色

document.execCommand(''forecolor'',false,sFontColor)

　　[2.4]背景色

document.execCommand(''backColor'',false,sBackColor)

　　[2.5]加粗

document.execCommand(''bold'');

　　[2.6]斜体

document.execCommand(''italic'');

　　[2.7]下划线

document.execCommand(''underline'');

【3】编辑

　　[3.1]复制

document.execCommand(''copy'');

　　[3.2]剪切

document.execCommand(''cut'');

　　[3.3]粘贴(经测试无效)

document.execCommand(''paste'');

　　[3.4]全选

document.execCommand(''selectAll'');

　　[3.5]删除

document.execCommand(''delete'');

　　[3.6]删除光标后字符

document.execCommand(''forwarddelete'');

　　[3.7]清空格式

document.execCommand(''removeFormat'');

　　[3.8]前进一步

document.execCommand(''redo'');

　　[3.9]后退一步

document.execCommand(''undo'');

　　[3.10]打印(对firefox无效)

document.execCommand(''print'');

　　[注意]与剪切板有关的命令在不同浏览器中差异很大。opera不支持，firefox默认禁用，而safari和chrome未实现paste。

【4】图片

document.execCommand(''insertImage'',false,''image.png'');

简易富文本编辑器

<div class="box">
    <div class="con" id="con">
        <button data-name="selectAll">全选</button>
        <button data-name="delete">删除</button>
        <button data-name="undo">撤销</button>
        <button data-name="print">打印</button>
        <button data-name="bold">加粗</button>
        <button data-name="italic">斜线</button>
        <button data-name="underline">下划线</button>        
        <button data-name="fontsize" data-value="16px">大号字体</button>
        <button data-name="forecolor" data-value="red">红色文本</button>
        <button data-name="backcolor" data-value="gray">灰色背景</button>        
        <button data-name="removeFormat">清空格式</button>
    </div>
    <div class="show" id="show" contenteditable>我是测试文字</div>
</div>

.box{
    width: 500px;
}
.con{
    overflow:hidden;
    margin-bottom: 6px;
}
.con button{
    float: left;
    padding: 2px;
    border: 1px solid gray;
    margin-right: 2px;
    cursor: pointer;
}
.show{
    height: 200px;
    border: 2px solid rgba(0,0,0,0.3);
}

<script>
var aCon = document.getElementById(''con'').getElementsByTagName(''button'');
for(var i = 0; i < aCon.length; i++){
    aCon[i].onclick = function(){
        document.execCommand(this.dataset.name,false,this.dataset.value);
    }    
}
</script>

　<演示框>选中文字后，点击下列相应属性值可进行演示

该文章在 2017/8/18 12:41:08 编辑过

关键字查询

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。