Web编辑器的实现
从简单编辑到专业排版
2019-11-16
个人简介
11年程序员，前端、终端、Java后台…
1
目录
2 3
典型的编辑器-Word
菜单栏
工具栏 内容编辑区 右键菜单
状态栏
实现一个最简单的编辑器
<div id="contentedite" contenteditable="true">
图片
录音
文件
代码块
……
开放SDK
腾讯文档
文档业务 Features
腾讯文档
核心 Features 编辑器 SDK
Q友记
企业微信文档
企业微信 Features
实现快速的插删改查操作方式。
PiceTable示意图
协同
操作原子化
增加 删除 保留
要求
可撤销 时序性 基本版本解决冲突
参考
ot.js EasySync2
模块化、插件化设计
模块化、插件化设计
命令创建feature
实现handler
功能配置
通过命令添加一个feature
断字
测绘
排版
Service DataModel(数据层)
IO
Collab
NetWork
Unitool
Workbench
权限控制 事件通知中心 工具栏&菜单
状态栏 日志系统
新编辑器的设计
整体架构 排版引擎 渲染引擎 输入&编辑 数据层 Workbench 通用容器
开放和未来 展望
SDK及开
源协同
ox
penalty
Box {width}: aestretic aestretic 不可分割的 Block，内容可以是一个字符、单词、音节等
Glue {width,shrink,stretch} 可拉伸或压缩的 Block，通常是单词间的空格
摆放
Vertical Layout 竖排文字需要对标点进行旋转（如
括号）或者平移（如句号，左下角 移动到右上角）
英文、数字根据设置需要支持旋转 90° 或者 Upright 排列……
Grapheme Cluster
带有重音符号的拉丁字符、韩语的文 字等，一个字素（Grapheme）可能 由多个 Unicode 码点组合而成。断 行时需要格外注意。
The quick brown fox ‫ ال َع َر ِب َّية‬jumps over the lazy dog.
Bi-Directional Text 阿拉伯语和英语混排，需要根据文字的方向属性进行处理
0x0067 ( g ) LATIN SMALL LETTER G 0x0308 ( ◌̈ ) COMBINING DIAERESIS
数据结构—字符串操作转换
节属性表(Section)、段属性表(Paragraph)、字属性表(Span)，底层采用 FloatTree(基于红黑树) 数据结构实现，可以支持大量文档属性的增删查改。 文字池 TextPool，底层采用 PieceTable 数据结构，可以高效地支持大文本的
增删查改。 以扁平化的方式，独立描述文档的几种属性元素。
</div>
示例
完整的编辑流程 打开文档
contentedi table
dom树的渲染
解析数据生成html
接受输入并渲染
定时检测脏区
计算出changeset
应用changeset
更新html
刷新dom
简单实现会有哪些问题
一切随缘的表现
浏览器排好之后跳变 IOS上光标飘起来了
想都别想了
排版引擎-需要解决的问题和思路
上一行光标位置
光标偏 移量 X
输入及复制粘贴
■ 隐藏输入区 ■ 处理好之后再渲染到文档中 ■ 捕获删除，移动事件，模拟
输入&编辑-拼音输入法问题
解决方案：
Google Doc 协同编辑当前还存在的问题： 1. 2. 3.
增加 compositionRange 记录拼音输入法中间态区间 同步底层数据，通知排版展示，不协同数据 对协同方编辑的数据，进行坐标偏移处理
增加plugin
全局配置
字体功能配置文件片段
开发模式，丰富的基础feature
区分移动端配置解析
Word工具栏所有feature
开发成本低
开发新需求所需修改的文件
2
分隔线需求开发时间
4d
50+已实现feature Export组合形成SDK
企业微信、Q友记SDK
通用容器
通用容器
操作：缩放、移动、删除 属性：坐标、大小和类型
- ViewSelection（ViewModel层） - WindowSelection（UI层）
CoreSelection与ViewSelection提供便捷的转换接口 避免老文档方案使用Dom比对来获取Model层的选区
选区移动（方向键）
• 左右移动 简单思路：数据层Core Range ±1 问题：多码位文本的处理 解决方法：使用 unicode 计算字素长度，设置正确的 range • 上下移动 1. 计算光标相对左侧偏移量 X 2. 获取上一行在 X 偏移量的文本盒子 Box 3. 对文本进行分割测量，计算文本内最靠近 X 的分割点
0xAC01 ( 각 ) HANGUL SYLLABLE GAG
각 0x1100 ( ᄀ ) HANGUL CHOSEONG KIYEOK 0x1161 ( ᅡ ) HANGUL JUNGSEONG A 0x11A8 ( ᆨ ) HANGUL JONGSEONG KIYEOK
中文行首字母不能为标点符号 英文单词不能被分词，行内单词均衡
Penalty {width, flag, penalty} 潜在的断行点，包含体现排版美观的惩罚值因子penalty
渲染引擎-整体实现
React组件化各级渲染 渲染整体可替换 两层实现局部更新 挂载overlay独立一棵树
渲染引擎-选区
选区是编辑器的核心状态，几乎所有操作都围绕选区 - CoreSelection（数据层）
排版引擎-需要解决的问题和思路 分页、分栏、分层、环绕、工程图
腾讯文档Word编辑器架构
Editor(编辑器) Features(功能)
字体&段落
分页
图片
表格
……
Render(渲染引擎)
文档内容
选区
光标
Surface(输入)
输入
复制粘贴
上下文菜单
ViewModel
State
Layout(排版引擎)