前端文档 ​

以下图片失效，有兴趣打开原文阅读

原文阅读

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

前端文档浅思考 ​

如果你去开发你会怎么做

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

富文本编辑 ​

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

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

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

操作富文本 ​

document.execCommand()

• 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 范围。实际上，这样会移除选区，因为选区中 至少要有一个范围
• reomveRange(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);

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

操作范围 DOM2 ​

document.createRange()

1. 简单选择 DOM 范围
2. 复杂选择 DOM 范围
3. 操作 DOM 范围中的内容
4. 插入 DOM 范围中的内容
5. 折叠 DOM 范围
6. 比较 DOM 范围

复合事件 ​

• compositionstart：在 IME 的文本复合系统打开时触发，表示要开始输入了
• compositionupdate：在向输入字段中插入新字符时触发
• compositionend：在 IME 的文本复合系统关闭时触发，表示返回正常键盘输入状态

前端文档深思考 ​

前端文档的技术该如何选择以及采坑？

同构表VS异构表 ​

文档技术 ​

在线协同 ​

前端文档应用 ​

来看看一些用过的在线文档编辑设计思路以及架构模式

钉钉 ​

菜鸟业务WebExcel

语雀 ​

语雀自研之路

前端文档性能 ​

大数据 ​

成千上百万的节点不可能一次性渲染出来，对于浏览器来说是一笔巨大的开销

最大单元格数 ​

在线文档如何缓存数据，这也是必须值得思考的地方

前端文档展望 ​

复杂度 ​

前端文档的复杂度很高，它的细腻程度非常之细，像语雀这种在线表格自研之路，考虑的问题很多；我作为一个普通开发者来说，开发的成本很大，但是前端文档非常值得思考，包括技术储备（数据结构性能优化）以及冷门的API学习都要串联起来

未来 ​

前端文档是一个深耕并且值得投入的领域，用户的体验累积，会打造出越来越完美的前端文档

END