概述在线富文本编辑器是在网络浏览器中编辑文本的界面，为用户呈现所见即所得（WYSIWYG）的编辑区域。其优点是充分利用了HTML丰富的表现力，减少了用户在文本格式转换上的工作量。这里的富文本是相对于纯文本而言的，富文本与纯文本的不同之处在于它具有样式、布局等信息。它是如何工作的在线富文本编辑器是如何工作的？语雀团队的一位研发工程师总结得很好，即在线富文本编辑器主要解决两个问题：如何在浏览器中呈现富文本。如何在浏览器中编辑富文本。对于问题1，既然在线富文本是在浏览器中运行的，那肯定是浏览器支持的渲染方式。目前市场上主流的解决方案都是使用HTML标签结合CSS样式来渲染富文本，部分富文本编辑器也使用Canvas来渲染富文本，比如GoogleDocs。对于问题2，即如何在网页上输入和编辑文本。回想我们平时的网页浏览，在大多数情况下，用户输入只有在有表单元素的情况下才能进行。比如我们经常使用的百度搜索，就是一个输入框，让用户输入自己想要检索的关键词。input、textarea等表单元素虽然允许用户输入文本，但是只能输入纯文本内容，但是我们要实现的是一个富文本编辑器。幸运的是，浏览器为大多数HTML元素提供了一个contenteditable属性，可以用来控制元素是否可以编辑。在浏览器地址栏输入如下地址访问，那么整个网页就是一个可以输入文字的编辑器：因为几乎所有的现代浏览器都支持这个属性，而这个属性可以利用浏览器提供的一些默认行为，所以使用this属性来实现富文本编辑器是大多数开发者的最佳选择。但凡事都有例外。一些比较有实力的以富文本编辑器为主要业务的团队也会使用模拟游标和事件拦截来实现富文本编辑器。我们不妨想一想，在浏览网页的时候如何判断一个网页是否可以编辑呢？简而言之，该区域中的光标可以被聚焦，当用户通过键盘或其他设备输入字符时，输入的字符可以显示在该区域中。俗话说，走路像鸭子，叫起来像鸭子，就是鸭子。如果我们能把网页的一个区域做成鼠标可聚焦的区域，并允许用户在上面输入字符，那么它就可以称为富文本编辑器了。以GoogleDocs为例，当你用鼠标点击文档的某个区域时，会出现一个闪烁的光标。用浏览器开发者工具查看页面元素时，会发现文档编辑区既不是可以输入的输入表单元素，也没有上面提到的contenteditabe属性，那么为什么光标可以聚焦到这个区域并显示字符？关于什么？原来你看到的光标只是一个用HTML和CSS实现的虚拟光标。当你用鼠标点击文档区域时，页面会拦截点击事件，计算光标的位置，实时绘制一个虚拟光标。当你输入文字时，用户输入的字符也是通过拦截的输入事件获取的，并实时显示在文档编辑区。用户并没有意识到这一切，就好像他们真的在输入和可编辑区域中创建文本一样。优缺点使用contenteditalbe属性实现富文本编辑功能，使用HTML和CSS显示富文本内容：优点：开箱即用，给元素添加一个属性即可开始编辑输入，浏览器提供一些默认行为，例如光标焦点、选择突出显示。缺点：缺乏一致性，包括内容一致性和呈现一致性。当编辑器中的内容看起来相同，但存储的HTML结构不一致时，就会出现内容一致性。比如当你在编辑框回车的时候，是添加div标签，还是p标签，还是
标签，这个在不同的浏览器中可能会有不同的表现。性能上的一致性是指当存储的HTML结构一致时，在不同浏览器中的显示风格也会有所不同。例如，同一个按钮标签在不同的浏览器中会有不同的外观风格。一位前Medium工程师曾发表过一篇名为“为什么ContentEditable很糟糕”的文章。对这方面感兴趣的可以搜索这篇文章阅读理解。实现一个模拟光标拦截用户输入，使用Canvas显示富文本内容的编辑器：优点：一致性高，性能提升。Canvas只是一块画布，本身没有任何内容。我们可以通过JavaScript在画布上绘制图片和文字，这样在不同的浏览器中可以保持一致。另外，在编辑非常大的文档时，文档的修改很容易触发浏览器的重绘和重排，从而造成性能问题。使用Canvas后，开发者有更多的优化空间。缺点：复杂度高。鼠标焦点和选择等操作必须自己实现。例如，如果将光标移动到单词的开头，然后拖动到单词的末尾，则该单词将突出显示。你认为这是理所当然的，因为浏览器为我们做了。如果你自己拦截用户操作，用Canvas去画，那这一切你都得自己实现，即使用户点击了鼠标，你也要判断用户是点击还是拖动。另外，Canvas绘制的富文本对SEO并不友好，因为你的内容是画在canvas里面的，搜索引擎是感知不到的。同样，这也会给有视力障碍的用户带来困扰。
