contenteditable 属性
假如我们给一个标签加上 contenteditable="true" 的属性，就像这样：
<div contenteditable="true"></div>
document.execCommand 方法
// document.execCommand(命令名称，是否展示用户界面，命令需要的额外参数)
document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
Selection 和 Range 对象
我们在执行 document.execCommand 这个命令之前首先要知道对谁执行，所以这里会有一个选区的概念，也就是 Selection 对象，它用来表示用户选择的范围或光标位置（光标可以看做是范围重合的特殊状态），一个页面用户可能选择多个范围（比如 Firefox）。也就是说 Selection 包含一个或多个 Range 对象（ Selection 可以说是 Range 的集合），当然对于富文本编辑器来说，一般情况下，我们只会有一个选择区域，也就是一个 Range 对象，事实上大部分情况也是如此。 所以通常我们可以用 letrange=window.getSelection().getRangeAt(0) 来获取选中的内容信息（ getRangeAt 接受一个索引值，因为会有多个 Range，而现在只有一个，所以写0）。
基本操作
加错
document.execCommand('bold', false, null);
图片
document.execCommand('insertImage', false, url||base64));
p
document.execCommand('formatblock', false, ‘<p>’);
h1
document.execCommand('formatblock', false, ‘<h1>’);
有序列表
document.execCommand('insertUnorderedList', false, null);
水平线
document.execCommand('insertHorizontalRule', false, null);
参数
document.execCommand('createLink', false, url);
插入图片
document.execCommand('insertImage', false, null);
document.execCommand('insertHorizontalRule', false, null);
参考网站
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand
