富文本编辑器的技术演进 罗龙浩
2020-03-01 478浏览
- 1.富⽂文本编辑器器的技术演进 罗龙浩 蚂蚁金服高级前端技术专家，语雀文档编辑器负责人
- 2.在此键入姓名 在此键入tittle
- 3.⾃自我介绍 2008～2014：业余时间研发 KindEditor，经历 3 个版本的重写 2012～2014：土豆网前端架构师、前端负责人 2014～2018：支付宝行业前端负责人、口碑前端负责人 2018～至今：语雀文档编辑器负责人
- 4.⽬目录 一、富文本编辑器介绍 二、语雀文档编辑器面临的问题与解决思路 三、多人实时协同的解决思路
- 5.富⽂文本编辑器器 - 常⻅见交互 富文本输入框 - 输入内容 - 选中 & 操作 操作栏 - 顶部工具栏 - 侧边栏 - 内嵌工具栏
- 6.富⽂文本编辑器器 - 浏览器器特性 富文本输入框这里可以编辑对内容进行操作 document.execCommand(‘bold’);
- 7.富⽂文本编辑器器 - 技术类型 类型 描述 典型产品 L0 1、基于 contenteditable 2、使⽤用 document.execCommand 3、⼏几千～⼏几万⾏行行代码 早期的轻量量级编辑器器 L1 1、基于 contenteditable 2、不不⽤用 document.execCommand，⾃自主实现 3、⼏几万⾏行行～⼏几⼗十万⾏行行代码 CKEditor、TinyMCE Draft.js、Slate ⽯石墨墨⽂文档、腾讯⽂文档 1、不不⽤用 contenteditable，⾃自主实现 2、不不⽤用 document.execCommand，⾃自主实现 3、⼏几⼗十万⾏行行～⼏几百万⾏行行代码 Google Docs Office Word Online iCloud Pages WPS ⽂文字在线版 L2
- 8.富⽂文本编辑器器 - 不不同类型的优劣 类型 优势 劣势 L0 技术⻔门槛低，短时间内快速研发 可定制的空间⾮非常有限 L1 站在浏览器器肩膀上，能够满⾜足 99% 业务场景 ⽆无法突破浏览器器本身的排版效果 L2 技术都掌控在⾃自⼰己⼿手中，⽀支持个性化排版 技术难度相当于⾃自研浏览器器、数据库
- 9.富⽂文本编辑器器 - L1 编辑器器 传统模式 DOM 树等于数据，调用各种 DOM API 进行操作 典型产品：CKEditor 4、TinyMCE、UEditor MVC 模式 数据和渲染分离，实现一套操作数据模型的方法，数据变更带动渲染 典型产品：CKEditor 5、Draft.js、Slate
- 10.富⽂文本编辑器器 - L1 编辑器器两种模式优劣 传统模式 优势：20 年的历史，代码简单直接，可维护性好，充分利用 contenteditable 特性 劣势：代码写法不符合潮流，都是 10 几年前的技术 MVC 模式 优势：代码写法符合潮流 劣势：引起数据和渲染不同步的问题，因为这个机制需要有完全控制用户输入的前提， 实际上基于 contenteditable 没办法控制用户的所有输入，第三方输入法、壳浏览器 会让用户输入不可控
- 11.富⽂文本编辑器器 - L2 编辑器器 自主实现富文本输入框，包含用户输入和排版引擎，可用 DOM、SVG 技术 用户输入： 光标、选区自主实现，光标位置放隐藏 textarea 接受键盘输入，输入完成之后变更数 据、渲染视图 排版引擎： 实现各种个性化的文字排版、图文布局，突破浏览器排版限制
- 12.富⽂文本编辑器器 - 总结 L0 L1 L2 技术类型 传统模式 MVC 模式 如何技术选型？ 没有编辑器研发团队：推荐基于 CKEditor 4、TinyMCE 二次开发 有几人编辑器研发团队：推荐自研 L1 传统模式编辑器 有几十人编辑器研发团队 & 需要个性化排版：推荐自研 L2 编辑器
- 13.⽬目录 一、富文本编辑器介绍 二、语雀文档编辑器面临的问题与解决思路 三、多人实时协同的解决思路
- 14.语雀编辑器器 - ⾯面临的问题 疑难杂症多 问题难以修复，页面崩溃、光标错乱、粘贴卡死等 排查链路长 语雀编辑器、Slate、React 一层层往下查 新增功能难 很多个性化需求，在 Slate 架构上实现成本较高
- 15.语雀编辑器器 - 根本问题 技术选型问题 1）基于 Slate，是 L1 MVC 模式 2）基于 React 渲染，但 React 是 UI 构建库
- 16.语雀编辑器器 - 技术选型 L0 L1 传统模式 L2 MVC 模式 更换技术选型，用 L1 传统模式重写编辑器 为什么没有基于开源编辑器？ 第一是 license 问题，第二是我正好具备多年 L1 编辑器研发经验 ：）
- 17.语雀编辑器器 - 技术⽬目标 高健壮性 采用一切手段保证功能的稳定，努力做到业内问题最少的编辑器 可维护性 编辑器本身代码量很大，后期可维护性是关键，能用简单方式解决问题，尽量简化 可扩展性 具备良好的扩展性，不能因为架构问题，满足不了业务需求
- 18.语雀编辑器器 - 开发思路路 数据格式：在 HTML 基础上扩展 卡片机制：承接组件的扩展，在编辑器里独立的一块区域 开发模式：Hybrid 混合开发，编辑区域用原生 JS，UI 层用 React 技术原理：基于 contenteditable，通过 Range API 对选中的内容进行操作
- 19.语雀编辑器器 - 数据格式headingbolditalicunderlinefontcolorbackcoloralignmentorderedlist光标选区HTML卡片组件
- 20.语雀编辑器器 - 卡⽚片机制 卡⽚片⼯工具栏 卡⽚片内容区域（contenteditable = false） Left Cursor Right Cursor
- 21.语雀编辑器器 - 卡⽚片类型 Inline Card Block Card
- 22.语雀编辑器器 - 混合开发模式 红色区域：原生 JS 蓝色区域：React
- 23.语雀编辑器器 - 为什什么⽤用混合开发模式？ 统一不一定是最佳选择，还是要看带来的业务价值 有两个成功案例： 1）移动端 Hybrid 开发（Native + H5） 2）丰田、本田的 Hybrid 汽车（电机 + 内燃机）
- 24.语雀编辑器器 - 丰⽥田混动系统 起步 正常⾏行行驶，有剩余能量量 低速⾏行行驶 急加速 正常⾏行行驶，⽆无剩余能量量 减速，充电
- 25.语雀编辑器器 - 键盘输⼊入定制
- 26.语雀编辑器器 - contenteditable 问题 光标无法移动到空标签里：、光标漂移到 inline-block 右侧：display:inline-block
