<!-- -- 富文本编辑器的简单实现原理 -- 参考文档： -- 1. w3cshool：https://www.w3cschool.cn/javascript/javascript-execcommand.html -- 2. 火狐开发者中心：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand -- -- 要点：1. 添加div标签的一个属性contenteditable设置为true，使该div元素可编辑； -- 2. js调用document.execCommand(指令参数[命令], false, 动态参数[值])函数， -- 3. 函数中第二个参数应始终为false，因为参数为true会显示对话框，而火狐并不支持。 -- 4. document.execCommand("paste"); 为粘贴命令，浏览器默认未开启，需要在user.js配置文件中开启。 --> <!DOCTYPE html> <html> <head> <title>富文本编辑器实现原理</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> <style> #edit{ height:260px; width:100%; overflow: scroll; border:solid 1px black } </style> </head> <body> <div id="edit" name="edit" contenteditable="true"></div> <br> <button name="button-edit" data-name="justifyCenter">居中</button> <button name="button-edit" data-name="justifyLeft">左对齐</button> <button name="button-edit" data-name="justifyRight">右对齐</button> <button name="button-edit" data-name="indent">添加缩进</button> <button name="button-edit" data-name="outdent">去掉缩进</button> <button name="button-edit" data-name="fontname" data-value="宋体">宋体</button> <button name="button-edit" data-name="fontsize" data-value="5">大字体</button> <button name="button-edit" data-name="forecolor" data-value="red">红色字体</button> <button name="button-edit" data-name="backColor" data-value="lightgreen">浅绿背景</button> <button name="button-edit" data-name="bold">加粗</button> <button name="button-edit" data-name="italic">斜体</button> <button name="button-edit" data-name="underline">下划线</button> <button name="button-edit" data-name="copy">复制</button> <button name="button-edit" data-name="cut">剪切</button> <!--paste命令浏览器默认未开启，需要在user.js配置文件中开启，详见火狐开发者中心文档--> <!--链接：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand--> <button name="button-edit" data-name="paste">粘贴</button> <button name="button-edit" data-name="selectAll">全选</button> <button name="button-edit" data-name="delete">删除</button> <button name="button-edit" data-name="forwarddelete">后删除</button> <button name="button-edit" data-name="removeFormat">清空格式</button> <button name="button-edit" data-name="redo">前进一步</button> <button name="button-edit" data-name="undo">后退一步</button> <button name="button-edit" data-name="print">打印</button> <button name="button-edit" data-name="formatblock" data-value="div">插入div</button> <button name="button-edit" data-name="inserthorizontalrule">插入hr</button> <button name="button-edit" data-name="insertorderedlist">插入ol</button> <button name="button-edit" data-name="insertunorderedlist">插入ul</button> <button name="button-edit" data-name="formatblock" data-value="p">插入p</button> <button name="button-edit" data-name="inserttext" data-value="这是我插入的内容！">插入文本</button> <button name="button-edit" data-name="insertimage" data-value="http://images.cnblogs.com/cnblogs_com/qingsong/545927/o_39.gif">插入图像</button> <button name="button-edit" data-name="createlink" data-value="https://www.w3cschool.cn/javascript/javascript-execcommand.html">增加链接</button> <button name="button-edit" data-name="unlink">删除链接</button> <input type="button" onclick="isPaste()" value="检测paste粘贴命令是否支持"> <input type="button" value="代码获取" onclick="showContent()"> <script>
/** 当文档载入完毕后，在富文本框内设置焦点， * 并且在第一行插入p标签。 **/ window.onload = function(){ edit.focus(); document.execCommand("formatblock", false, "p"); } /** 在编辑框内，当键盘输入时自动在当前行插入p标签， * 也可以自动插入其它标签， * 当编辑框内检测到</li>标签时禁止插入p标签。 */ edit.onkeydown = function(){ var str = edit.innerHTML; var val = str.search(/</li>/i); if(val < 0){ document.execCommand("formatblock", false, "p"); } } var btns = document.getElementsByName('button-edit'); /** 编辑按钮的js操作命令接口。 * 按钮的data-name属性存放命令，data-value属性存放值。 * 也可用其它标签代替。 **/ for(var i = 0; i < btns.length; i++){ btns[i].onclick = function(){ if(this.getAttribute('data-value') == ""){ document.execCommand(this.getAttribute('data-name')); }else{ document.execCommand(this.getAttribute('data-name'),false,this.getAttribute('data-value')); } } } /** 富文本内的值是通过div的innerHTML获取的， * 表单提交时需提前用js转移到隐藏域里，然后提交， * 为了便于理解富文本的结构，这里省略这一步了。 **/ function showContent() { alert(edit.innerHTML); } /** 检测浏览器是否开启或支持paste命令， * 函数反回值为Boolean， * true为支持，false为未开启或不支持paste粘贴命令 * paste粘贴命令需要在user.js配置文件中开启。 * 详见火狐开发者中心相关文档： * https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand **/ function isPaste(){ if(document.execCommand("paste")) { alert("浏览器支持或开启了paste粘贴命令！"); }else{ alert("浏览器不支持paste粘贴命令， 或未在user.js配置文件中开启！"); } } </script> </body> </html>
注意事项：
用a或span元素添加onclick事件来执行document.execCommand()函数命令会失效，要用button或<input type="button">添加onclick事件来执行才会成功。尤其添加font awesome字体图标时，button能够添加字体图标，但input不能添加字体图标。如：
引入图标字体：
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
添加链接按钮图标：
<button class="fa fa-link" onclick="addLink()"></button>
js函数执行：
function addLink(){ var lineVal=prompt("请输入链接地址：",""); if(lineVal != null && lineVal != ''){ var patt=/[http|https]+://[^s]*/i; if(patt.test(lineVal)){ document.execCommand("createlink", false, lineVal); }else{ alert("链接地址输入格式错误，请重新输入！"); } } }
但不能用
<span class="fa fa-link" onclick="addLink()"></span>
来执行，否则document.execCommand()函数执行的命令不成功。