三甲：在线富文本编辑器的架构设计及实践

12月5日， 极客邦（InfoQ）在深圳举办 GMTC
大会，蚂蚁集团语雀编辑器技术同学三甲受邀参加大会并分享《在线富文本编辑器的架构设计及实践》，以下内容是根据现场演讲收集整理。

大家下午好，我叫韩聪，花名三甲。现在在蚂蚁集团语雀团队负责语雀文档编辑器的研发工作。

今天在这边和大家分享的是我们语雀在富文本编辑器上的架构设计和实践。

语雀编辑器家族

首先，我们先来认识一下语雀的编辑器家族。语雀发展到现在我们已经诞生了 7 款类型不同的编辑器。老大是文档编辑器，它是基于传统的 DOM 技术来构建的，老二是目录编辑器，也是 DOM 技术来构建的。老三是工作表，他是基于 Canvas 构建的。老四和老五都是图类型的编辑器，他们是基于 SVG 技术来构建的。老六是演示文稿，也是 SVG 技术。

认识语雀文档编辑器

今天和大家分享的是我们的老大 —— 文档编辑器。先简单看一下这个文档编辑器的界面，是非常经典的一个布局，顶部是我们的工具栏区域，我们把一些常见的高频功能罗列出来放置于工具栏当中，供大家使用。
右侧是我们的功能扩展面板区域，这个区域常驻的是我们文档的大纲，根据用户的操作不同，这边还会出现其他的功能面板，比如图片设置面板以及附件下载控制面板。
中间是文档的编辑区域，这是我们编辑器工作的核心区域，编辑器下大部分的代码都是在处理这个区域上用户产生的交互。

这是语雀富本文编辑器填充后内容之后的一个效果。

富文本编辑器工作原理

像这样的一个富文本编辑器，它背后的工作原理是什么呢？
其实在我的角度来看的话，我觉得其实只要清楚这两个问题就好了。第一个问题就是：在浏览器上我们如何去呈现富文本。第二个就是：在浏览器上我们如何去编辑富文本，我们来展开看一下

在浏览器上如何呈现富文本？

首先我们需要先搞清楚什么是富文本，传统意义上的富文本其实是相对于纯文本的概念提出来的。简单来说就是具有丰富格式的文本。
回到这个问题本身，我们怎么去在浏览器上去呈现这些内容呢？那就必然离不开这个浏览器的内容呈现技术。浏览器为我们提供的内容呈现技术大致上有 3 种：SVG 、Canvas 和 HTML + CSS。

这三种技术我们到底应该选哪一种来呈现我们的富文本呢？我给出的答案是 HTML + CSS，为什么呢？因为它足够简单，另外它的扩展非常方便。通常情况下，我们要实现相同的 UI 效果的话，HTML + CSS 是这三种技术中最简单的一个