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

如果无法正常显示,请先停止浏览器的去广告插件。
分享至:
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. 欢迎加入钉钉 我就在这,你在哪呢?

首页 - Wiki
Copyright © 2011-2024 iteam. Current version is 2.123.1. UTC+08:00, 2024-03-28 16:52
浙ICP备14020137号-1 $访客地图$