前端文档前端自研文档、编辑器，完整的前端开发API链路以及开发调研并实现过程中的思考、痛点，打造出一个完善的前端文档。

文档桌面应用客户端 => word excel ppt wps ···
在线文档(类似) => google 文档

前端文档浅思考

「如果你去开发你会怎么做」

input?
textarea?
div?contenteditable?(富文本可编辑属性)

富文本编辑

以下 API 来自[JavaScript 高级程序设计第三版]

// 文档执行预定义命令，接收三个参数
// 1. 要执行的命令名称
// 2. 浏览器是否应该为当前的命令用户界面提供一个布尔值（兼容性，始终为false)
// 3. 执行命令必须的一个值(无 => null)
document.execCommand(name, false, null);

操作富文本

❝
document.execCommand()
❞

命令	值(第三个字符串)	解释
backColor	颜色字符串	设置文档的背景颜色
bold	null	加粗文字
copy	null	复制到剪贴板
createLinkt	url 字符串	转换成一个链接
cut	null	剪切
delete	null	删除选择的文本
fontname	字体名称	修改字体
fontsize	数字	字体大小
forecolor	颜色字符串	字体颜色
formatblock	要包围当前文本块的 html 标签	h1 h2 ~
indent	null	缩进文本
inserthorizontalrule	null	插入一个<hr>标签
insertimage	url 字符串	插入一张图片
insertorderedlist	null	<ol>
insertunorderedlist	null	<ul>
insertparagraph	null	<p>
italic	null	斜体
justifycenter	null	居中
justifyleft	null	左对齐
outdent	null	减少缩进
paste	null	粘贴
removeformat	null	撤销 formatblock 操作
selectall	null	选中所有文本
underline	null	下划线
unlink	null	移除文本的链接

document.queryCommandEnabled() 方法可以检测当前位置是否可以执行某个命令
document.queryCommandState() 方法可以检测当前文本是否执行过某个命令

富文本选区

获取选择文本

❝
(window || document).getSelection()
❞

「1. Selection 对象属性」

anchorNode：选区起点所在的节点
anchorOffset：在到达选区起点位置之前跳过的 anchorNode 中的字符数量
focusNode：选区终点所在的节点
focusOffset：focusNode 中包含在选区之内的字符数量
isCollapsed：布尔值，表示选区的起点和终点是否重合
rangeCount：选区中包含的 DOM 范围的数量

「2. Selection 对象方法」

addRange(range)：将指定的 DOM 范围添加到选区中
collapse(node, offset)：将选区折叠到指定节点中的相应的文本偏移位置
collapseToEnd()：将选区折叠到终点位置
collapseToStart()：将选区折叠到起点位置
containsNode(node)：确定指定的节点是否包含在选区中
deleteFromDocument()：从文档中删除选区中的文本，与 document.execCommand("delete", false, null)命令的结果相同
extend(node, offset)：通过将 focusNode 和 focusOffset 移动到指定的值来扩展选区
getRangeAt(index)：返回索引对应的选区中的 DOM 范围
removeAllRanges()：从选区中移除所有 DOM 范围。实际上，这样会移除选区，因为选区中至少要有一个范围
removeRange(range)：从选区中移除指定的 DOM 范围
selectAllChildren(node)：清除选区并选择指定节点的所有子节点
toString()：返回选区所包含的文本内容

「3. 示例：给选中的文本加上背景颜色」

// 获取选区文本
var selection = document.getSelection();
// 获取选区范围
var range = selection.getRangeAt(0);
// 创建包围元素
var span = document.createElement('div');
span.style.backgroundColor = 'orange';
range.surroundContents(span);