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