概述
在线富文本编辑器是用于在 Web 浏览器中编辑文本的界面，它为用户出现所见即所得（WYSIWYG）的编辑区域。它的劣势是充分利用 HTML 的丰盛体现能力，缩小用户对文本格式转换的工作量。这里的富文本是相较于纯文本而言，与纯文本不同的是它具备款式、排版等信息。
工作原理
在线富文本编辑器是如何工作的呢？语雀团队的一位研发工程师总结的很好，即在线富文本编辑器次要解决两个问题：
- 如何在浏览器出现富文本。
- 如何在浏览器编辑富文本。
对于问题 1，既然在线富文本是运行在浏览器中，那必定是浏览器反对的出现形式。目前市面上支流的计划都是采纳 HTML 标签联合 CSS 款式来出现富文本，另外的一些富文本编辑器也会采纳 Canvas 来出现富文本, 比方 Google Docs。
对于问题 2，也就是如何在网页进行文字的输出和编辑。回顾咱们平时的网页浏览，绝大部分状况是在有表单元素的状况下才可进行用户输出, 例如咱们常常用的百度搜寻，那就是一个 input 框供用户输出想要检索的关键字。诸如 input、textarea 之类的表单元素尽管容许用户进行文字输出，然而它们只能输出纯文本内容，而咱们要实现的却是一个富文本编辑器。好在浏览器为绝大多数 HTML 元素提供了一个 contenteditable 属性，该属性能够用来管制元素是否能够编辑。在浏览器地址栏输出如下地址并拜访，那整个网页就是一个可输出文本的编辑器：
因为古代浏览器简直都反对该属性，而且该属性又能够利用浏览器提供的一些默认行为，因而利用该属性实现富文本编辑器是绝大多数开发者的不二抉择。
但凡事都有例外，一些实力比拟弱小、以富文本编辑器为主营业务的团队也会采纳模仿光标加事件拦挡来实现富文本编辑器。咱们无妨思考一下，平时浏览网页的时候，如何判断一个网页是否能够编辑的呢？概括来说就是该区域光标是能够聚焦的，且用户通过键盘等设施输出字符的时候输出的字符能出现在该区域。正如一句俗语所说，如果走起来像一只鸭子、叫起来像一只鸭子，那么它就是一只鸭子。如果咱们能让网页的一块区域能够鼠标聚焦，且容许用户输出字符在下面，那么它就能够称之为富文本编辑器。
以 Google Docs 为例，当你用鼠标点击文档区域，会呈现一个闪动的光标。当用浏览器开发者工具查看页面元素的时候，你会发现文档编辑区域既不是可输出的 input 等表单元素，又没有上文提到的 contenteditabe 属性，那么为什么光标能够在该区域聚焦并且显示字符的呢？原来你所看见的光标，只不过是用 HTML 加 CSS 实现的虚构光标。当你用鼠标点击文档区域的时候，页面会拦挡点击事件，并计算光标的地位，实时地绘制出一条虚构的光标。当你输出文字的时候，同样是通过拦挡的输出事件获取用户输出的字符，实时地显示在文档编辑区域。用户对这所有是无感知的，就如同真的是在一个可输出、编辑的区域进行文字创作。
优劣比照
以 contenteditalbe 属性实现富文本编辑性能，并用 HTML 加 CSS 展现富文本内容的这类编辑器：
长处：开箱即用，给元素加上一个属性就能够开始编辑、输出，另外浏览器提供了一些默认的行为，比方光标聚焦、选取高亮。
毛病：短少一致性，这包含内容一致性和体现一致性。内容一致性体现为，当编辑器里的内容看起来一样，但实际上存储的 HTML 构造不统一。比方当你在编辑框按下回车，是减少一个 div 标签 还是 p 标签，亦或是 <br/> 标签，这在不同浏览器中可能产生不同的行为。体现一致性体现为，当存储的 HTML 构造统一，在不同的浏览器的显示款式也会有不同，比方同一个 button 标签在不同浏览器中外观款式也会不一样。前 Medium 工程师已经发表一篇名为“Why ContentEditable is Terrible”的文章，对这方面感兴趣的能够搜寻这篇文章浏览理解。
本人实现模仿光标拦挡用户输出，并用 Canvas 来展现富文本内容的这类编辑器：
长处：高一致性以及性能晋升。Canvas 只是一块画布，自身并没有任何内容，咱们能够通过 JavaScript 在画布上绘制图像、文字，因而它可能做到在不同浏览器中体现统一。另外在编辑超大文档的时候，对文档的批改容易触发浏览器的重绘、回流，这些都会导致性能问题，而应用了 Canvas 后开发者则有了更大的优化空间。
毛病：复杂度高。鼠标聚焦、选区等操作都要本人实现。举例来说，你把光标挪动到单词结尾，而后拖动选取到单词结尾，这个单词就会高亮。在你看来这是天经地义，这是因为浏览器帮咱们做了这些操作。如果是本人拦挡用户操作并用 Canvas 绘制，那么这所有都要本人去实现，甚至用户单击鼠标你都要判断用户是在单击还是在拖选。另外通过 Canvas 绘制的富文本，是 SEO 不敌对的，因为你的内容都是绘制在画布内，搜索引擎无奈感知。同理，这对于有视觉阻碍的用户，也会带来应用上的麻烦。
本文首发于集体公众号，点击浏览原文