本文为蚂蚁团体语雀自研编辑器技术负责人遇春在语雀大会上的演讲。

大家好，我我叫遇春，接下来由我给大家分享语雀自主研发的编辑器。

在这之前组委会跟我说要分享一下编辑器外面一些技术先进的中央，我就认真思考这个问题，到底语雀编辑器中什么技术是先进的。在我看来。技术自身其实不存在所谓的先进技术或者是落后的技术。技术的目标就是为了解决问题，可能会有新旧之分，然而语雀团队又不是一个特地谋求新技术的一个团队，所以可能接下来我的分享中次要是针对咱们所遇到的具体问题，而后怎么样找解决方案。从问题自身来说，每一个产品他遇到的问题都不一样，所以很难比照说咱们的技术就很先进。所以接下来的分享，咱们来看看咱们语雀编辑器遇到了什么样的问题以及技术上的思考。

先从这一句话开始。文有汝心出，笔墨语雀来。这一句是语雀最早的 slogan。

咱们心愿当你关上语雀编辑器的时候，可能沉迷在一种平静而又愉悦的创作心流当中。不论你是要写一个周报或者是写个小说，或者游览回来写一篇游记。咱们都心愿这个过程是一种享受。当你想要插入一个流程图或者是插一个数据报表，或者想要插一个视频，咱们都心愿在语雀编辑器当中都可能顺手拈来，零打碎敲。这就是语雀编辑器所要谋求的一个方向。

接下来，我的分享会蕴含这几个局部

Part 1. 语雀编辑器的家族介绍

七兄弟

先给大家放一张全家福，这是语雀所有编辑器的一个全家福，咱们依据工夫给大家做了一个排行，老大、老二、老三、老四、老五、老六、老七。

文档编辑器

先从老大文档编辑器开始，能力比拟强，人比拟诚实，而后也肯吃苦，里里外外全靠他，脏活累活全包。能够说有内容输出的中央就有他的身影。咱们能够看到包含语雀小记，各种评论区都是他来负责的，基本上能够说没有他就没有这个家。

目录编辑器

老二目录编辑器，可能大家比拟诧异，这也是个编辑器吗？对的，这是一个如假包换的编辑器。因为早年进来读书，而后长年在外不怎么回家，所以大家都不意识他。大学的时候，在图书馆里做过勤工俭学，在分类整理这一块，可是一个一等一的高手。所以这几年回家来打理家务，家里的材料、文件，经他这么一手，把你整顿的东倒西歪。

工作表 / 数据表

老三工作表，这个哥们天生喜爱数学。家里所有的水费、电费、煤气费，各种吃穿用度，所有的支出开销交给他，保障给你治理的妥妥的。起初他发现自己忙不过来，又有了老七，

老七是咱们的数据表，数据表就和当初的小孩子一样，天生的互联网的原住民，他比拟喜爱收集数据，他在收集数据这块也是有一手，凭着这一手绝活，未来定是前途无量的。所以和数据无关的事件交给他们，稳！

思维图，流程图和演示文稿

老四老五老六，思维图，流程图和演示文稿，他们是个三胞胎，出世的时候日子过得比拟好，养分跟得上，牛奶、鸡蛋每天服侍着，身板硬了心气儿就高，对吧？在图形畛域可真是没有怕过谁，不是明天要干翻这个，就是今天要放平那个，正堪称是初生牛犊不怕虎，立志闯出一片天。

七个编辑器，七兄弟群策群力为大家服务。那么重点来了

所有的语雀编辑器的所有性能，对所有的用户，不论你是付费的还是收费的，厚此薄彼，所有的性能都向大家收费凋谢。

四版本

好的，这么多编辑器必定说不完。咱们接下来挑一些有故事的说，先从文档编辑器说起。

一句话介绍，简洁而不简略，无所不包，普惠公众，语雀文档编辑器经验了四个版本，每一个版本也都给咱们留下了一些十分贵重的个性。

1.0

从 1.0 开始，咱们是一个 Markdown 编辑器，相熟 Markdown 语法的同学都晓得。咱们能够通过输出一些非常简单的字符，而后实现一些清晰的文档构造。题目，列表，援用等等，十分有利于浏览。这也让咱们意识到文档的美，美在构造。而这种快捷输出的能力在咱们 1.0 的时候就曾经具备并且连续了下来。

2.0

2.0 咱们进入了富文本时代，富文本时代给咱们带来了更加丰盛的款式，让咱们能够更纵情的施展。而且富文本编辑器还给咱们带来了一个新的编辑模式，叫做“所见即所得”。你所编辑的就是你看到的，不再须要你重复去预览，这样能够大大的晋升了你的编辑效率。

3.0

3.0 时代，咱们齐全进入自研的时代，也就是大家近 2 年多始终在应用的编辑器，咱们发现咱们还须要在文档里插入一些非凡格局的数据，比如说一个日历，比如说一个投票，比如说一个代码块，这样的一个简单的数据格式，咱们须要可能满足，咱们引入了卡片模型，卡片模型让语雀整个编辑器变得更加凋谢，更加具备连贯能力。借助这个能力，咱们能够连贯互联网，比如说你插入一个网页进来也是能够的，咱们也能够在语雀外部去做一些连贯，不同的文档之间也能够互相引入，原文档编辑后，引入的文档也会自动更新。
而后，3.0 还给咱们带来一个另一个能力，就是多人协同，多人协同让咱们语雀编辑器真正的实现了多人同时编辑，成为常识合作的一个工具。

4.0

明天，咱们进入 4.0 时代，4.0 编辑器刚刚公布上线，大家可可能直观感触到就是咱们的文档表格曾经能够多人同时编辑了。通过了半年的研发，咱们底层做了一个很大的降级，在架构上也具备更好的灵活性和拓展性。大家晓得咱们的评论区外面有很多用户给咱们提的倡议，还有一些问题。尽管不是每个倡议咱们都可能驳回，然而 4.0 时代咱们会给大家出现更多的精彩，让咱们敬请期待。

当然刚刚上线难免会有一些问题，一些用户在讨论区外面说咱们的有一些交互变了。尽管这些交互的变动也是通过了咱们的一些思考的，但总有不到的中央，咱们心愿大家一直的给咱们提意见。鲜花和鸡蛋我感觉都会让咱们变得更好。

Part2. 编辑器成长故事

接下来我给大家介绍一下语雀编辑器的成长故事。

就像方才所说，其实语雀就是在用户给咱们一直的吐槽，给咱们一直提倡议的一个环境下长大的。那接下来的三个故事，让咱们缓缓来看。

故事 1. 实时协同

先从第一个故事：实时协同。

在咱们语雀商业化第一年的时候，其实咱们是不具备这样的一个能力的，咱们过后是从咱们本人的工作场景中察看，发现多集体同时编辑一篇文档的场景很少，偶然会用到，频率也很低。然而过后整个市场上对于这个性能是十分关注的，没有这个性能，如同都不好意思跟他人打招呼，是不是这样呢？咱们要不要破费微小的研发老本来实现一个低频的能力呢？咱们从来不是一个喜爱去跟风的一个产品，然而咱们还是会反思的。咱们在想这样的一个性能，这样一个低频的性能，为什么大家如此关注？

咱们起初认真想一想，原来咱们对待问题的形式可能有一些问题。

那就是应用频率和重要性。它其实并不可能划等号。我举个例子，一个商场它的消防设施可能并不是常常应用，对吧？咱们也心愿它始终不要应用，那消防设施其实它很重要。重要性决定咱们要不要做这个性能，而应用频率只是决定咱们要把它做到什么样子，放在什么地位。

当咱们想通了这一点当前，咱们感觉咱们之前的顾虑和犹豫其实是有问题的。作为一个提倡常识合作的产品，多人同时编辑会在关键时刻晋升用户的合作效率。于是咱们决定要做实时协同。

实时协同咱们怎么设计呢？

咱们在实时协同之前，语雀的编辑是一种锁模式，就是一个人在编辑的时候，他人是不可能同时编辑的。这也是基于内容的平安思考，避免内容和版本变乱，那锁模式它也有锁模式的益处，比如说锁模式比较简单，比较稳定，它的离线也比拟敌对。咱们心愿这些个性也可能在在持续连续下来，所以咱们额定减少了一个协同模式。

协同模式在团队下，在协同的知识库上面默认开启，你的集体知识库如果加了协作者也会帮你默认开启合作模式。合作模式的益处，就是多集体同时能够同时编辑了，内容实时同步到多个编辑端。然而它也有它的毛病，比方协同模式对网络的要求比拟高，有些用户他可能网络比较慢，或者是常常会断，或者是他设置了代理，有可能连不到咱们的协同服务器上。这时候咱们又减少了一个叫做智能切换的能力，咱们能够将你从协同模式切回到锁模式，让你更加稳固的去编辑，这就是语雀编辑器在协同这一块的设计。

实时协同上线了 1 年多，咱们也遇到很多问题。

刚上线的时候其实有很多很难解的问题。比如说丢光标、内容错乱，大家可能偶然会遇到过，这些问题有很多问题很不好复现。因为你在失常编辑下可能还发现不了，只有那些十分奇怪的一些场景才会呈现。而后咱们用了靠近一年的工夫来一直的修 bug，革新底层，交互调优，把这些协同的问题缓缓的解掉。在合作模式和锁模式之间实现平滑无感知的智能切换，到去年的下半年语雀的实时协同的性能才逐渐的趋于稳定。

故事 2. 表格滚动

接下来一个故事是对于表格滚动的

表格编辑器在当初的定位是要把 Excel 20% 的根底性能做到极致，施展在线的合作劣势，将 80% 的数据处理场景做透。这样一个定位决定咱们必定不可能把那个 Excel 的性能全副照搬过去。当然这也不太事实，毕竟人家做了三十几年。既然不能全副照搬，那咱们就从最根底的性能去着手。

咱们要把根底性能的体验做到极致。那根底体验是什么？

我把它比喻成空气和水，洁净的水和清爽的空气自身就能够给大家带来一些愉悦的感触。咱们心愿语雀的编辑器可能像洁净的水和空气一样，给编辑者带来最天然的愉悦感触。
怎么样把根底体验做得极致呢？咱们说用户会通知咱们，咱们常说和用户一起成长，这句话有人可能不太好了解。其实咱们的故事就是这样子产生的。

先从表格编辑器中一个最根底的性能来说起，就是滚动。

在你查看表格的时候，你总是须要高低滚动，或者左右滚动来查看你须要的那一行或者一列数据。咱们晓得受浏览器的一些渲染性能的局限性，表格的滚动可能每个 web 产品的做法可能都不一样。有一种滚动叫做行级滚动，就是一行一行的滚动。一些出名的产品也采取了行级的滚动。咱们能够看一看行级滚动是一个什么样的成果。

当你的每一行的内容有一些多的时候，你会发现它的滚动过程中是跳动着的。甚至极其场景，某一行的内容高度超过视窗，你是看不到这行内容底部的内容的。能够自行脑补一下。

而后咱们再看一看语雀的像素级滚动

像素级滚动就显著平滑很多，而后这是语雀在滚动这一块做的一个体验。两头为了实现这样的一个特能力，咱们其实做了很多技术上的优化计划。比如说依据视窗来按需渲染，比如说咱们要实时计算并缓存每一行的高度，等等。

做完像素级滚动当前，咱们感觉咱们的滚动成果挺好了，而后又有用户跟咱们反馈了，说你们的滚动如同有点“晃”，还给咱们发来了视频，咱们就认真推敲了一下。你说的“晃”是什么“晃”。

那其实是这样子的，最后咱们做的滚动呢，它是横向和纵向能够自在滚动的，横向和纵向都能够同时滚动。（我拿一个自在滚动的友商产品举个例子）

如果是触摸板的同学可能感触更深一些，你会发现当你横向滚动的时候，你的纵向难免会有一些偏移，所以当你想查看某一行数据的时候，你的眼帘在这种滚动的时候会受到烦扰，你的注意力会聚焦不到你所关注的那一行。
于是咱们又减少了方向的束缚，

而后咱们看到下面的这张动画，就是咱们当初的滚动成果，横向滚动和纵向滚动的时候，它的另一个方向就会锁住。这样的话你的整个滚动会更加稳固，视觉的焦点页可能更加专一，数据的检索会更加高效，这就是咱们的滚动。

在语雀表格编辑器中这样的细节体验其实还有很多。

咱们明天就不一一介绍了。

故事 3. 读写拆散

第三个故事是对于读写拆散的。
咱们先说一说读写拆散的一个设计初衷。我给大家说两个场景，大家感受一下。

第一个场景，你正在写一篇文章，你的身后站着一堆人在那里看，你是什么样的一个感触，你会不会感觉你的脑袋是齐全空白的，不晓得该写什么，对不对？

第二个场景，你正在看一篇文章，你发现光标在动，有集体正在写，还有人在删字，还有一些人在调整段落格局，又是一个什么样的浏览感触，你会不会也感觉有些手足无措，这篇文章到底有没有写完，要不要当初看？

这就是读和写，它自身是两种场景。如果把他们揉在一起，会产生很奇怪的一些体验。所以咱们心愿对作者来说，他的写可能在一种平静又沉迷的一个创作环境中，他可能无所顾虑的写。而读者他可能释怀的去浏览。而后在这两个体验之间，咱们用一个“公布 / 更新”的动作来实现连贯。这个公布让咱们的作者更加有典礼感，这个动作通知作者，你的内容将交给读者，由读者来浏览。

这样的一个“读写拆散”的设计的应用反馈是怎么样的呢？

咱们看一看，首先有一部分用户说挺好的，这样的我能够放心大胆的写了。也有一部分用户会说我一个人写为什么要公布呀？好麻烦呀。是的。同一个体验设计收到截然不同的两种反馈。咱们是什么样的感触，读写要不要拆散，咱们的心田是陷入矛盾的，是保持还是斗争？问题在哪里？而后咱们就去想怎么样去改良这个问题。

剖析发现，其实是读者和作者这两个角色的关系问题，咱们起初减少了一个主动公布的选项，

对于那些读者和作者是同一个角色的时候，咱们就开启这种主动公布的选项。比方咱们的集体私密的知识库下，咱们就默认开启，比方咱们的桌面端，桌面端咱们就会默认进入写模式，这样的读写拆散就会更加敌对，咱们依据读写两种角色是否为同一个角色来决定读写拆散的形式。

好的，3 个用户故事咱们就讲到这里。

Part3. 编辑器防火墙

接下来我给大家分享一下云雀的编辑器的防火墙：防丢、防乱和防卡。

这一章节之前，在这里向之前所有被语雀编辑器弄丢过、卡过或者弄乱过内容的用户示意一声歉意。的确是咱们一开始做的不到，给大家带来了麻烦，那也同时要感激大家，陪伴咱们，帮忙咱们反馈问题，帮助排查问题，才让咱们一直的能够去欠缺产品，来改良体验。

防丢

先从防丢开始说

内容不丢，咱们把它当成是一个根底体验的底线。有人说主动保留不就能够了吗？是真的这么简略吗？

咱们看一些主观的因素

首先，保留是个大动作，语雀采纳的是快照模式的保留，每次保留须要编辑器将全文整顿好，发送给服务端，当保留动作和输出动作同时产生的时候，尤其大文档的时候，容易造成输出卡顿。

其次，历史版本过多也容易让人抓狂，不太不便追述。所以咱们须要缓存，而缓存是有容量限度的。

再次，网络是个十分不靠谱的货色，断网，弱网，代理网络都有影响。

最初，用户习惯不可推敲，有些编辑页关上半个月都不关，咱们曾经两头公布过好几次了，有些同一篇文档开着 N 个窗口，明天这个窗口写两句，今天那个窗口写两句，这些事实问题给保留带来了十分大的挑战。

咱们来看看语雀的主动保留的设计，

为了应答各种情况，咱们延聘了 5 位管家和一位专属快递员，这里的文字比拟多，就不给大家读了。这五大管家外围的工作是什么？就是在最合适的时候将你的内容该缓存的缓存，该保留的保留，在你来到的时候，咱们会第一工夫保留。在你激活的时候第一工夫更新内容。

当你离线的时候，咱们这位快递员就会在你下一次上线的时候，将你的离线的编辑内容第一工夫保留一份到服务端，作为快递员他很贴心，它保留服务端的过程中，如果呈现一些网络问题没有胜利，它不会将你的离线缓存给删掉。所以只有你存到咱们的离线缓存外面，你本人不去被动删，内容基本上是平安的。

这样一个设计之后有很有一些淘气的用户就说那么怎么样能力丢内容呢？这个问题的确挺奇异的。想要丢内容也不是做不到，除非你关上编辑器，一秒不停的编辑，而后断电了。或者离线编辑，而后手动的删除了你的离线缓存。如果你真的这么操作，目前状况下咱们是没法顾全你的内容的。当然家下来咱们会持续欠缺这里的机制，做到只有你肉眼看到的就不会丢掉。

防乱

下一个防火墙是防乱，常见的乱有哪些呢？

首先最最根本的乱，就是多集体基于同一个版本来编辑。而后前面的保留的笼罩了后面的，这是一种版本错乱。第二个就是你的协同模式下，你的网络可能有些问题，你的数据没有同步到服务端，那有可能造成某些版本的数据的失落。而后还有一些程序 bug，这就不多说了。

方才说了咱们有两种模式，每一种模式遇到问题都不一样，解法也不一样。咱们明天就重点说一下锁模式，锁模式为了防乱，咱们首先给文档设计了一个版本号，这个版本号会跟随着文档。而后当你保留了一次，他的版本号会加 1，而后你每次保留也会携带着你编辑前的基线版本号到服务端，服务端会判断你这个版本号是不是最新的。如果不是最新的，就不会保留胜利，会提醒抵触。

每次当你关上编辑器的时候，咱们会去服务端申请最新的版本，而后来和你本地缓存的基线版本做比照，而后让你基于最新的版本去编辑。

在你来到的时候，咱们也会将你的内容第一工夫保留到服务端。同时在你编辑的过程中，咱们也会每一分钟去服务端申请一下有没有最新的版本。这样的轮询思考的是一些断网场景，你可能编辑的时候断网了本人都不晓得，而在你断网的时候，你的锁权限其实曾经发出去了。那他人可能在你断网的过程中编辑了内容，版本曾经升上去了。这时候咱们咱们的轮询会保障你的编辑过程中，即便断网。遇到他人同时编辑的时候，也会在你连网的第一工夫，获取最新版本，能让你每次都基于最新的版本去编辑。

但如果呈现保留抵触或者有更新的版本怎么办呢？咱们会把你的离线编辑的缓存版本备份一份到历史记录里，这样不便你前期手动的把那些离线的内容同步到文档的最新版本中。

防卡

最初说一说如何防卡，常见的卡也是有两种：

一种是流程的卡，咱们某些弹窗让你没法往下持续编辑，这种叫做卡住的卡。
还有一种卡就是卡顿的卡，性能不太好，而后编辑不够顺畅。

这两种也都有本人的一些解决方案。

性能卡不必多说，就是一直的去优化性能，而后咱们会做一些性能的监控。

流程的卡咱们有很多措施，比如说咱们的模式智能切换，当你没法连上咱们的协同服务器的时候，那咱们不心愿将你卡住，咱们会将你降级到锁模式上来编辑。

咱们对锁模式做了很屡次降级也都是防卡设计，咱们最后是锁人，不同的人不能够同时编辑。然而咱们发现这还不够，有些人他是同时关上多个浏览器的，多个窗口之间会互相卡住，咱们就开始降级到锁端，锁端又有可能本人把本人也给锁住了，须要切到有权限的编辑端，或者期待 1 分钟。咱们感觉不好，而后咱们又加一个不自锁。不自锁还是不够，因为用户就是没法防止两个页面之间不停的来回切，咱们不仅要解决锁的问题，还要解决内容同步的问题，咱们于是在来到的时候主动解锁，并且把你的内容及时保留下来，在你激活一个编辑器的时候，要同时把最新的内容更新下来。这样的一个锁模式的一直降级，来让咱们在锁模式下，尽最大可能缩小卡住的状况。

说到卡，在流程的顺滑方面，咱们还有一些分级的揭示设计。举个简略的例子，咱们的保留有主动保留和手动保留。主动保留咱们是不会提醒的。因为咱们心愿你在沉迷的编辑当中主动保留它是背地天然产生的，而手动保留会提醒你保留胜利，这也是基于一个交互的实时性反馈思考，同样是保留，有些须要默默实现，有些须要及时响应。

另外，有些异样如果咱们可能应酬过去，咱们就把它以一种音讯揭示的形式在右上角呈现，会提醒你有点小情况，不过咱们曾经给你解决好了，能够持续释怀编辑。如果是咱们感觉这个问题特地重大，那咱们就会提醒一个弹窗进去，让你来决定下一步如何操作。

以上就是语雀在防丢，防乱以及防卡方面所做的一些设计。

Part4. 编辑器的诗与远方

最初一趴给大家分享一下编辑器的诗与远方。

塔

先从这个塔模型开始说，

这是一个我比拟喜爱的一个模型：DIKW 模型。它给咱们揭示常识的演化过程，从数据到信息到常识到人类智慧的一个演进模型。最底层是咱们的海量的数据。在数据当中咱们能够提炼和观测出一些有用的信息，信息绝对数据更加稀释，而后不同的信息，不同维度的信息，通过一些组织，一些思考，一些推理，可能发现它其中的一些法则，造成咱们的常识，常识的使用造成智慧。在这个常识造成的模型当中，我认为编辑器更像一个阶梯。他在每个环节中承当了这种阶梯的作用，让数据升华为信息，让信息升华为常识，是一个工具。能够说编辑器就是促成常识造成的一个工具。咱们会一直的减少语雀编辑器在每一个环节的能力，让语雀编辑器不负使命。

树

再分享一棵树，这颗树咱们能够叫他为常识之树。

有一个有意思的问题：常识是什么样子的？大家感觉常识是什么样子的？有人说常识可能是网状的，而后有人说常识是树状的，那到底是什么样子呢？其实看你怎么样对待这个问题，取决于你的观测角度，从编辑器的角度来看，咱们心愿常识它更像一棵树，常识的创作从无到有，它其实是一个成长的过程，咱们心愿它有脉络，有骨干，有枝叶，这样子在创作过程中，包含前期的学习中，你可能更更好的把握它的构造。这是从创作和学习的角度思考，那么肯定还有其余的角度，我感觉语雀编辑器的职责就是让常识可能自在的成长成为他应有的样子。从古至今，人类把文字记在龟壳上，到写在竹签上，再写在纸上，录入到电脑上，网络中，那常识的状态也产生了一直的变动，从图形到文字，到图片，到声音，视频。常识到底应该什么状态才是最棒的呢？语雀的编辑器也在一直的摸索，心愿能将常识呈现出她最好的样子出现给大家。

这就是我的分享，感激。

阿里人都在这里积淀常识
yuque.com