钉钉文字编辑器的前世今生

1. 钉钉文字编辑器的前世今生展新

2. 1. Web 编辑器简史目录 Contents 2. 编辑器时代之难 3. 钉钉文字的前世今生 4. 一些有趣的技术点

3. 1 Web 编辑器简史

4. 打字机时代 • Keyboard • Cursor • WYSIWYG

5. 文本编辑器时代 • Find & Replace • Cut, Copy & Paste • Undo & Redo • Syntax highlighting

6. 富文本编辑器时代 • 文本格式 • 段落格式 • 表格 • 多媒体

7. Web 编辑器时代 • Within web browsers • WYSIWYG • HTML markup

8. Web 编辑器时代 · 第一阶段 2003.05 FCKEditor & CKEditor 3 2008.11 KindEditor 3 2010.05 EtherPad 1.0 2010.08 KissyEditor 2011.01 ACE 0.1.0 2011.02 CodeMirror Beta1 2012.11 CKEditor 4 2013.01 UEditor

9. 第一阶段特征 Ø designMode、contentEditable、webkit-user-modify Ø 解决浏览器兼容问题 Ø 规避浏览器的 Bug，以及扩充 API，工具栏的体现

10. Web 编辑器时代 · 第二阶段 2016.02 Draftjs 2016.07 Slatejs 2016.09 Quill 1.0 2017.10 ProseMirror 2018.04 CKEditor 5 2019.10 CodeMirror 6

11. 第二阶段特征 p 抛弃 execCommand API p 基于 DOM API 实现 selection、range p 自建内存数据模型，通过事件驱动 view 的更新

12. 2 编辑器时代之难

13.

14. WYSIWYG A WYSIWYG editor is a system in which content (text and graphics) can be edited in a form closely resembling its appearance when printed or displayed as a finished product, such as a printed document, web page, or slide presentation. From Wikipedia

15. 所见即所得的三个定理 p DOM 内容 <->可视化（Visible）内容 p DOM 选区 <->可视化（Visible）选区 p 所有的可视化编辑都能映射到一个代数上来说封闭和完整的可视化内容集合上

16. 映射的表现渲染的定义是明确的 Render(x) = Render(y) Render(E(x)) = Render(E(y)) E 表示编辑器的操作动作

17. Contenteditable is terrible

18. 斜体 + 粗体混合时候的 DOM

19. 选区光标的尴尬位置

20. 4 个关键点 p 一个文档模型，并且能够确保 2 个模型在视觉上相等 p 一种映射关系，DOM 和文档模型之间的映射 p 基于文档模型的良好编辑操作指令 p 能将 DOM 的事件转化成编辑操作

21. Web 编辑器时代 · 三个层级 L0 依赖浏览器特性，主要是使用到了 designMode、ContentEditable、webkit-user- modify、execCommand 等特性。早期的编辑器都采用这种方案，但可定制的空间有限。 L1 部分使用浏览器的特性、DOM 的 API 来自主实现 Selection、Range、Element、 TextNode 等，具备一定的可扩展性，但也会有很多难以解决的问题。 L2 终极方案，自定义输入框，包括光标、输入法、删除等基础动作，具备绘图布局等能力。

22. 文本处理器时代 · Google Docs

23. 3 回归钉钉文档

24. 文本处理器时代 · 不止一个编辑器轻格式：加粗 / 斜体 / 字体 / 字号明交互：附件 / 图片 / 提及 / 链接重组件：列表 / 代码块 / 表格暗意图：拷贝 / 剪切 / 粘贴 / 拖拽泛业务：文件传输 / 实时保存 / 数据格式大内功：内存模型 / 指令分发 / 多人实时我们能看到的只是表面很少的一部分——行为，而更大一部分的内在世界却藏在更深层次，不为人所见，恰如冰山。

25. 文本处理器时代 · 编辑器技术之路复杂度标尺系统内容排版网格系统多人实时编辑分页划词评论历史回滚纯文本富文本格式功能协同编辑引擎排版计算引擎

26.

27.

28.

29. 钉钉文档编辑器的 bi/mo/zhi/yan

30. 运行时编辑器与多人实时编辑

31. 编辑器与外存数据模型

32. 4 一些有趣的技术点

33.

34.

35.

36.

37. 欢迎加入钉钉我就在这，你在哪呢？