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>
<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">插入divbutton>
<button name="button-edit" data-name="inserthorizontalrule">插入hrbutton>
<button name="button-edit" data-name="insertorderedlist">插入olbutton>
<button name="button-edit" data-name="insertunorderedlist">插入ulbutton>
<button name="button-edit" data-name="formatblock" data-value="p">插入pbutton>
<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标签，
* 也可以自动插入其它标签，
* 当编辑框内检测到标签时禁止插入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粘贴命令，\n或未在user.js配置文件中开启！");
}
}
script>
body>
html>
注意事项：
用a或span元素添加onclick事件来执行document.execCommand()函数命令会失效，要用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()函数执行的命令不成功。