Web编辑器的技术实现方案

1、Web编辑器的技术实现方案从简单的编辑到专业排版目录123典型的编辑器-Word菜单栏工具栏状态栏右键菜单内容编辑区实现一个最简单的编辑器示例完整的编辑流程解析数据生成html打开文档dom树的渲染接受输入并渲染contenteditable定时检测脏区计算出changeset应用changeset更新html刷新dom简单实现会有哪些问题IOS上光标飘起来了一切随缘的表现浏览器排好之后跳变想都别想了排版引擎-需要解决的问题和思路The quick brown fox jumps over the lazy dog.Bi-Directional Text 阿拉伯语和英语混排，需要根据文字的方向

2、属性进行处理0 x0067 (g) LATIN SMALL LETTER G0 x0308 () COMBINING DIAERESIS 0 xAC01 () HANGUL SYLLABLE GAG0 x1100 () HANGUL CHOSEONG KIYEOK0 x1161 () HANGUL JUNGSEONG A0 x11A8 () HANGUL JONGSEONG KIYEOK Grapheme Cluster带有重音符号的拉丁字符、韩语的文字等，一个字素（Grapheme）可能由多个 Unicode 码点组合而成。断行时需要格外注意。中文行首字母不能为标点符号英文单词不能被分词，行

3、内单词均衡摆放Vertical Layout竖排文字需要对标点进行旋转（如括号）或者平移（如句号，左下角移动到右上角）英文、数字根据设置需要支持旋转 90 或者 Upright 排列排版引擎-需要解决的问题和思路分页、分栏、分层、环绕、工程图腾讯文档Word编辑器架构Layout(排版引擎)Features(功能)ServiceNetWork权限控制事件通知中心工具栏&菜单断字测绘排版字体&段落图片分页表格Workbench状态栏IOSurface(输入)输入复制粘贴上下文菜单文档内容选区Render(渲染引擎)光标StateDataModel(数据层)Unitool日志系统ViewModel

4、Editor(编辑器)Collab新编辑器的设计整体架构排版引擎渲染引擎输入&编辑数据层Workbench通用容器开放和未来展望SDK及开源协同后续规划排版-Box-Glue-Penalty模型boxBox width: aestretic aestretic不可分割的 Block，内容可以是一个字符、单词、音节等Glue width,shrink,stretch可拉伸或压缩的 Block，通常是单词间的空格Penalty width, flag, penalty潜在的断行点，包含体现排版美观的惩罚值因子penaltygluepenalty渲染引擎-整体实现React组件化各级渲染渲染整体可替

5、换两层实现局部更新挂载overlay独立一棵树渲染引擎-选区选区是编辑器的核心状态，几乎所有操作都围绕选区CoreSelection（数据层）ViewSelection（ViewModel层）WindowSelection（UI层）CoreSelection与ViewSelection提供便捷的转换接口避免老文档方案使用Dom比对来获取Model层的选区选区移动（方向键）左右移动简单思路：数据层Core Range 1问题：多码位文本的处理解决方法：使用 unicode 计算字素长度，设置正确的 range上下移动计算光标相对左侧偏移量 X获取上一行在 X 偏移量的文本盒子 Box对文本进行分

6、割测量，计算文本内最靠近 X 的分割点光标偏移量 X上一行光标位置输入及复制粘贴隐藏输入区处理好之后再渲染到文档中捕获删除，移动事件，模拟输入&编辑-拼音输入法问题Google Doc 协同编辑当前还存在的问题：1.2.3.增加 compositionRange 记录拼音输入法中间态区间同步底层数据，通知排版展示，不协同数据对协同方编辑的数据，进行坐标偏移处理解决方案：数据结构字符串操作转换节属性表(Section)、段属性表(Paragraph)、字属性表(Span)，底层采用 FloatTree(基于红黑树) 数据结构实现，可以支持大量文档属性的增删查改。文字池 TextPool，底层采用

7、 PieceTable 数据结构，可以高效地支持大文本的增删查改。以扁平化的方式，独立描述文档的几种属性元素。实现快速的插删改查操作方式。PiceTable示意图协同操作原子化增加删除保留要求可撤销时序性基本版本解决冲突参考ot.jsEasySync2模块化、插件化设计模块化、插件化设计通过命令添加一个feature字体功能配置文件片段命令创建feature实现handler全局配置增加plugin功能配置开发模式，丰富的基础feature开发成本低开发新需求所需修改的文件2分隔线需求开发时间4d区分移动端配置解析Word工具栏所有feature50+已实现featureExport组合形成SDK企业微信、Q友记SDK通用容器通用容器图片录音文件代码块操作：缩放、移动、删除属性：坐标、大小和类型开放SDK编辑器 SDK核心 Features腾讯文档企业微信文档文档业务 Features企业微信 Feature