本文收集基于JavaScript的富文本编辑器。

基于JavaScript的富文本(rich-text)编辑器不说有几十种,也有上百种。写一个简单的js富文本编辑器不难,W3C给网页定义了了一个ContentEditable功能,可以直接把网页元素变成可编辑的形态,而不是依据传统的做法,使用一个FORM元素textarea来盛放需要编辑的内容。

所以,这些富文本编辑器可以分为下面几类:

  • 基于TextArea的
  • 基于ContentEditable的
  • 基于ContentEditable + Virtual DOM的
  • 其他类的

首先基于TextArea的编辑器功能相对比较简单,只能对TextArea区域内的文字做一定的格式化。但是这种编辑器功能不强,只能在简单的场景下使用。

更多的富文本编辑器是基于ContentEditable,因为可以实现更复杂的功能。像常见的TinyMCE和CKEditor都是基于ContentEditable的。但是ContentEditable存在一些问题,如Why ContentEditable is Terrible – Medium Engineering一文所述,不同的浏览器针对ContentEditable存在着相当大的差异,导致使用ContentEditable实现一个跨平台的编辑器会十分困难。

既然ContentEditable有这些缺点,一种解决办法只使用ContentEditable跨平台的部分,而剩下的部分另外解决。使用这种做法的前提是编辑器要截获所有的用户输入,只把需要让ContentEditable处理的部分才传给它。这就要要求在DOM之上加一层抽象层,也就是VirtualDOM。VirtualDOM除了帮助特性实现跨平台以外,还允许用户有自己定义的数据模型,而不是直接使用HTML作为内容的格式。使用ContentEditable+Virtual DOM的编辑器有Medium网站自带的编辑器、ProseMirror、Slate、CkEditor5等等。

最后是其他类的编辑器,最典型的例子是Google Docs的编辑器。它不基于ContentEditable,而是自己实现了一个编辑层,捕获所有的用户输入,并根据用户输入,自己排版显示输出(而不像ContentEditable那样,排版输出是由浏览器自行处理的)

富文本编辑器大全

以下列表摘抄自Rich text / HTML editors and frameworks

下面的Dom-Based Editors大概都是基于ContentEditable的;Abstracted Editors大概是基于ContentEditable加上VirtualDOM的。

Strictly Frameworks

Abstracted Editors

These use separate document structures instead of HTML, some are more modular libraries than full editors

Dom-Based Editors

参考链接

在线收集的富文本编辑器列表:

slate.js相关

CKEditor5相关

TinyMCE相关

Google Docs相关

非富文本编辑器

以下属于代码编辑器,都是基于JavaScript的,功能值得参考:

ContentEditable相关

Block Based Editor

其他

(完)

2019-10-24更新

2020-11-04更新

(更新完)