富文本编辑器

一、contenteditable 属性

给一个标签加上 contenteditable="true" 的属性，就可以让标签可直接编辑
<div contenteditable="true"></div>

二、document.execCommand 方法

当使用contentEditable时，调用 execCommand() 将影响当前活动的可编辑元素。

语法： document.execCommand(固定命令名称，是否展示用户界面（一般为false），命令需要的额外参数（默认null）)
document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
例子： document.execCommand('bold',false,null)

三、Selection 和 Range 对象

我们在执行 document.execCommand 这个命令之前首先要知道对谁执行，所以这里会有一个选区的概念，也就是 Selection 对象，它用来表示用户选择的范围或光标位置（光标可以看做是范围重合的特殊状态），一个页面用户可能选择多个范围（比如 Firefox）。也就是说 Selection 包含一个或多个 Range 对象（ Selection 可以说是 Range 的集合），当然对于富文本编辑器来说，一般情况下，我们只会有一个选择区域，也就是一个 Range 对象，事实上大部分情况也是如此。
所以通常我们可以用 letrange=window.getSelection().getRangeAt(0) 来获取选中的内容信息（ getRangeAt 接受一个索引值，因为会有多个 Range，而现在只有一个，所以写0）。

四、基本操作

1、加粗
document.execCommand('bold', false, null);

2、图片
document.execCommand('insertImage', false, url||base64));

3、p标签（接收标签名做参数）
document.execCommand('formatblock', false, ‘p’);

4、h1标签
document.execCommand('formatblock', false, ‘h1’);

5、有序列表
document.execCommand('insertUnorderedList', false, null);

6、水平线
document.execCommand('insertHorizontalRule', false, null);

7、锚链接
document.execCommand('createLink', false, url);

参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand