slate-angular 正式开源

本文由智能化研发管理工具PingCode前端工程师 @pubuzhixing （杨振兴）分享

一句话介绍

slate-angular 是一个基于 Angular 和 Slate.js 的编辑器视图层，帮助开发者使用 Angular + Slate.js 构建 Web 富文本编辑器。

Slate.js 介绍

Slate.js 是一个特别优秀的富文本编辑器框架，代码整洁、架构良好、扩展性强，目前市面上基于 Slate.js 开发的富文本编辑器及产品已经数不胜数。而且 Slate.js 足够有魔力，从开始接触富文本编辑器开发到现在两年左右的时间，感觉 Slate.js 一直是我成长的良师，从最初的入门调研，到开发出第一个版本编辑器，然后是视图层架构的升级，再到后面的性能及稳定性的优化，每一个阶段都能从 Slate.js 身上学到很多东西，当然对它的了解也越来越深。我觉得 Slate.js 就是一个自身在不断地迭代和改进的编辑器框架，专注于视图层和模型层，架构实现一直紧跟社区主流技术的发展，内容编辑的实现机制也在不断地向现行标准事件靠拢，已经开源 5 年左右的时间，目前社区仍然非常活跃，还在不断地扩展更多的适用场景，是非常厉害的一个存在。

自研 Angular 视图层

我们的前端技术栈是 Angular，开源社区中基于 Angular 开发的富文本编辑器极其稀缺，而我们要做的 PingCode Wiki 产品又对富文本编辑器的易用性和可扩展性要求极高，调研发现 Slate 编辑器框架非常符合我们的需求，核心模型层不依赖任何前端框架，可扩展性极其高，有完整的测试覆盖，所以我们尝试自研基于 Angular 的视图层，可以理解为自研视图层的核心驱动来源于产品。

个人觉得开发基于 Angular 的视图层是一个很有意义的过程，并且当前开源社区中还没有使用 Angular 开发 Slate 编辑器的实现，所以我们想把我们的这种实践成果开源出去，以回馈 Slate 和 Angular 社区，让更多的开发者可以基于 Angular + Slate 开发富文本编辑器。

开源之路

当前 slate-angular 已经支持企业级知识库产品 PingCode Wiki 稳定运行超过 1 年，最初版本是基于 Slate@0.47.0 版本（JavaScript 版本 Slate），第二版是基于最新 Slate 的实现（TypeScript），当前已经是第三版，从年初就开始准备，包括公开 Github 仓储、统一底层的实现及 API 风格、搭建在线 Demo、补充单元测试、同步升级最新 Slate 等。

Demo 功能：





github：https://github.com/worktile/slate-angular

demo ：http://slate-angular.ngnice.com/

slate-angular 可能不是一个开箱即用的富文本编辑器，它属于 Slate 框架的一个视图层，对接 Slate 框架底层与用户交互界面的一个中间层，它仅提供基础的富文本编辑能力和功能扩展的插槽，但这也是 slate-angualr 的优势，它只专注底层的实现：兼容浏览器、移动端、代理输入事件、代理光标、支持自定义 Element/Text/Leaf 节点的渲染、处理基础交互等，基于它可以很快开发出像 Quill、Prosemirror 这类有一定基础功能的富文本编辑器，并且它的可扩展上限很高，经过一定的时间完全可以构建出像 Confluence、Notion、PingCode Wiki 这种功能级别的富文本编辑器。

特性支持

• 集成块级元素前后光标方案

支持扩展指定元素渲染前后光标，方便在块级元素前后插入段落（表格 Demo 中已经实现块级光标的基本交互）

• 自定义组件/模版渲染块级元素

支持多层级元素内容的自定义渲染，可方便实现像表格这类复杂场景的需求，同时维持了自定义组件之间的正确的依赖注入链，也就是单元格组件可以通过依赖注入获取父级表格组件的服务

• 自定义渲染 Text

支持自定义 Text 节点的内容渲染，这个在 slate-react 中是不提供的，slate-angular 中单独提出来了，主要用于实现加粗、斜体、下划线、颜色、背景色等需求

• 自定义渲染 Leaf

支持自定义 Leaf 节点的渲染，Leaf 是对 Text 的拆分，每一个 Text 节点默认对应一个 Leaf，而 Text 节点拆分 Leaf 的依据是 Decoration 装饰器，主要用于实现对文本的动态修饰，配合自定义 Leaf 组件实现搜索高亮、划词评论等需求

• Decoration 装饰器

提供对文本内容的动态修饰，是由外部数据驱动定位、装饰文本内容。它的特点是在不改变原始数据的情况下实现对文本的装饰，是处理动态需求的一种方式

• Void 元素

Void 意为不可编辑，所有内容属于一个整体，slate-angular 支持扩展 Void 元素，通过 Void 元素可以把任意复杂的 Angular 组件的嵌入到编辑器中，比如图片、代码编辑器、甘特图等都可以嵌入到编辑器内容区域中。

兼容浏览器

Chrome、Edge、Safari、Firefox、QQ Browser

已解决常见 Slate.js 兼容问题

1. 中文输入重复问题

2. 中文输入崩溃

3. Safari 浏览器输入中文焦点跳动

4. \n 导致内容混乱

5. a 标签 导致内容混乱

6. 表格结构约束问题

7. angular comment 问题

8. ...

这些问题当前已经在 slate-angular 中得到解决，在此不做更多的说明，如有任何疑问欢迎给 slate-angular 提 Issues。

技术路线

接下来聊点技术相关的内容，个人其实一直想对 Slate.js 的架构设计以及内部机制进行一些剖析，所以借助这次开源跟大家简单聊聊 slate.js 和 slate-angular 的技术路线以及比较重要的一些底层机制。

先从 Slate 架构说起：

Slate 框架核心主要包含模型层和视图层，模型层定义描述富文本内容的基本数据结构（一个支持嵌套的节点树）和对该数据的基础操作，视图层对接前端框架，处理基础输入行为、选区代理，内容渲染、插件扩展等等。

值得一提的是 Slate 的数据模型定义都是都是参照 DOM 标准实现的，对新手还算友好，比如数据模型的概念 Block、Inline-block、Text 等都跟 DOM 中的意义一致，选区也一样有 Selection、Anchor、Focus、Collapsed 等概念。

Slate 富文本编辑器架构概貌：





基于 Angular 开发富文本编辑器

slate-angular 作为一个独立的视图层，是 Slate 底层与上层功能实现之间的桥梁，核心作用就是发挥框架的优势，更好的组织编辑器功能的开发。

基于 slate-angular 开发富文本编辑器可以说是原汁原味的 Angular 味道，无论是基础功能修改、还是扩展新功能，你都可以使用 Angular 组件或者服务组织代码的实现，而不再是使用组件对 JavaScript 库进行简单的封装：

1. 你可以使用 Angular 组件或者模板自定义插件的渲染。

2. 你可以基于 Angular 组件封装复杂的交互行为。

3. 你可以复用 Angular 组件库。

4. 你也可以使用服务在父子级节点组件之间共享数据，它们维持了正确的依赖注入链。

5. 总之 Angular 的一切特性你都可以使用。

内容编辑基础原理

当前技术框架下想实现对输入内容的控制大概有两种实现思路，一种是事件代理，另外一种是监控内容变化，Slate 主要采用的是事件代理，就是通过监控一系列内容输入的 DOM 事件，然后通过事件类型及其它上下文判断该输入对应的数据操作，最后把它转化为针对数据模型的一系列操作。

监控内容变化的方式在 Slate 中也有用到，是为了支持 Android 浏览器，大概是因为 Android 浏览器下某些场景的输入事件无法被正确捕获，进而无法响应用户的操作，所以使用 MutationObserver 监控内容变化以正确响应用户的输入行为。

因为视图层中事件代理的实现主要是与输入事件打交道，各个浏览器对于输入事件的实现不完全统一，加上又要区分普通英文输入和中文组合输入，所以需要针对不同浏览器做很多兼容性处理，可以说打的是一套组合拳，招式概览：

1. 理想情况下：使用 beforeinput 事件完成基础输入代理，因为 beforeinput 语义化清晰，可以作为输入行为判断标准。

2. 非理想情况：浏览器不支持 beforeinput 事件，使用 React 的合成事件 onBeforeInput 处理英文输入(Angular 中需要自己实现)，对于其它输入交互如回车、删除使用 keydown 事件处理。

3. IME 输入处理使用事件 compositionstart 和 compositionend 处理，这三个事件非常可靠，没有任何浏览器兼容性问题。

4. 除此之外撤销/重做、焦点移动等是在 keydown 事件中处理，复制、剪切等逻辑使用原生 copy、cut 事件即可，而粘贴、拖拽等逻辑和基础输入一样依赖 beforeinput 事件，如果浏览器不支持 beforeinput 事件则在 paste、drop 等事件中处理。

事件代理过程概貌：





选区同步机制

和浏览器的选区一样，Slate 的数据模型也需要选区，当数据变更发生时标识数据修改的位置，并且这个位置需要跟浏览器原生的选区保持一致，无论是浏览器的选区变化了，还是 Slate 的选区变化了都需要实现互相同步。

下面介绍下 slate-angular 视图层中选区的双向同步机制：

一、DOM Selection -> Slate Selection：

监控原生 Document 对象的 selectionchange 事件，当 DOM Selection 改变时查询对应的 Slate Selection，修改 Slate Selection 与 DOM Selection 一致。

交互行为 -> DOM Selection 改变 -> selectionchange -> sync Slate Selection

交互行为包括鼠标 Click、按方向键等

二、Slate Selection -> DOM Selection：

Slate 数据 Change 导致 Slate Selection 发生变化，需要在 Change 事件中做处理，根据最新的 Slate Selection 查询对应的 DOM Selection，修改 DOM Selection 与 Slate Selection 一致。

交互行为 -> 触发数据更新 -> 新的 Slate Selection -> 视图刷新 -> sync DOM Selection

插件扩展

Slate 使用插件来扩展编辑器功能，并且插件是一等公民（slate-angular 也可以理解为是一个基础插件），任何高级交互都可以通过开发编辑器插件来实现。

一、可重写方法

Slate 底层通过抽象出一个一个的可重写方法（deleteBackward、insertBreak、insertText、apply 等等）供外部扩展，比如我要实现粘贴时识别 Markdown 数据格式，可以重写 insertText 实现，实现回车的特殊处理可以重写 insertBreak，相比直接暴露基础事件，提供可重写方式是一个很高级的实现，在 slate-angular 视图层也单独提供了几个可重写的方法：insertData（处理粘贴数据）、isBlockCard（块级卡片）、onError（错误处理）、onKeydown（基础事件）。

二、自定义渲染

视图层 UI 部分主要由三层渲染组成，对应三个层级的数据：Element、Text、Leaf ，每一个层级的数据都支持自定义组件/模版渲染，主要是通过 renderElement、renderText、renderLeaf 实现。

视图层自定义渲染组件的过程概貌：





这部分主要介绍跟 slate-angular 关联比较大的几个部分：组件化开发编辑器、事件代理、选区同步、插件扩展等，核心还是希望大家可以更多的了解 slate.js 以及 slate-angular，技术上就点到为止，有兴趣的可以阅读源代码或者其它技术资料。

写在最后

富文本编辑器是前端中非常复杂的一个领域，未来的道路还很长，我们也希望有更多的开发者能够参与进来，发现并解决诸如浏览器兼容性、兼容移动端、中文输入、标准交互的问题，优化输入代理的机制，优化底层架构，探索基于 Slate 的协同方案等等。

如有任何问题，欢迎大家给 slate-angular 提 Issues 或者 PRs ！