基于JavaScript的富文本编辑器

本文收集基于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

• Mobiledoc - https://github.com/bustle/mobiledoc-kit - framework to build editors with a standardized JSON structure
• Substance - http://substance.io - library for building editors and publishing systems
• ShareDB - https://github.com/share/sharedb - framework to sync any JSON document using operational transforms, add real-time collaborative editing to anything else

Abstracted Editors

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

• ProseMirror - http://prosemirror.net/ - supports collaborative editing, offers similar options to Mobiledoc for data structure
• Slate - https://github.com/ianstormtaylor/slate - framework to build more customized editors inspired by Draft, ProseMirror, Quill
• Draft - https://draftjs.org - rich text editor framework for React
• Quill - http://quilljs.com/
• Trix - https://github.com/basecamp/trix - by Basecamp team and used in v3
• Scribe - https://github.com/guardian/scribe - by the Guardian team
• Etherpad - http://etherpad.org/ - collaborative realtime editing framework, backend and editor
• Texture - http://substance.io/texture/ - editor built on Substance library

Dom-Based Editors

• Froala - https://www.froala.com/wysiwyg-editor - best editor (IMO) for traditional HTML structure
• Pell - https://github.com/jaredreich/pell - designed to be the simplest and smallest
• CKEditor (v5) - https://ckeditor.com/ - long history, very customizable, new architecture with built-in collaboration
• TinyMCE - http://www.tinymce.com/ - older editor, similar to CKEditor
• Textbox.IO - https://textbox.io/ - new from the owners of TinyMCE project
• Squire - https://github.com/neilj/Squire - used in FastMail webmail, better for text than images
• medium-editor - https://github.com/yabwe/medium-editor - clone of Medium.com’s editor
• Medium.js - http://jakiestfu.github.io/Medium.js - clone of Medium.com’s editor
• wysihtml - http://wysihtml.com/
• Redactor - http://imperavi.com/redactor/
• Summernote - http://summernote.org/
• ZenPen - http://www.zenpen.io/
• Trumbowyg - https://alex-d.github.io/Trumbowyg/ - html5 editor as jquery plugin

参考链接

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

• Rich text / HTML editors and frameworks
• 20 Excellent Free Rich-Text Editors
• editor frameworks – Adam Hyde
• The Age of the Editor Framework

slate.js相关

• Slate.js - 革命性的富文本编辑框架 - 掘金
• Choosing the best WYSIWYG editor: Slate vs Quill vs ProseMirror

CKEditor5相关

• ckeditor5富文本编辑器填坑记录
• CKEditor 5: A new era for rich text editing
• CKEditor 5: New approach to rich text editing on the web | Hacker News
• Top WYSIWYG Editor Myths
• HN: CKEditor 5: New approach to rich text editing on the web (ckeditor.com)
• CKEditor 5: Core editor architecture
• CKEditor 5: Editing engine

TinyMCE相关

• Editable Discontent
• A Quick Guide to Browser Selection Model

Google Docs相关

• What’s different about the new Google Docs?
• JavaScript Layout Engine like Google Docs?
• Five Open Source Alternatives to Google Docs
• JavaScript Layout Engine Like Google Docs
• How to implement Google doc like text editor? [closed]
• Kix：Google Docs编辑器的早期离线版本
• Google Docs editors: designed with everyone in mind

非富文本编辑器

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

• ACE
• CodeMirror
• CodeMirror Internals
• Monaco
• Monarch: create declarative syntax highlighters using JSON

ContentEditable相关

• Editable Discontent | Tiny Resources
• Why ContentEditable is Terrible – Medium Engineering
• ContentEditable The Good The Bad and The Ugly

Block Based Editor

• Sir Trevor
• Notion

其他

• Quill: Comparison with Other Rich Text Editors
• A Brief Glance at How Various Text Editors Manage Their Textual Data (2015) (ecc-comp.blogspot.com)
• Powerful* text editors built on the web stack cannot rely on the OS text caret and have to provide their own
• rebornix - 维护一个大型开源项目是怎样的体验？ Monaco
• Js光标模拟
• Easily create an HTML editor with DesignMode and ContentEditable
• （HTML）用 contenteditable 與 designMode 創造自己的 HTML 編輯器
• StaskOverflow: What is Virtual DOM
• Operational Transformation
• the limitations of techniques such as operational transforms
• A Brief Glance at How Various Text Editors Manage Their Textual Data
• StackOverflow: Any WYSIWYG rich text editor that doesn’t use HTML (contenteditable or designMode), a la (the new) Google Docs? [closed]
• Creating a custom input cursor/caret
• W3C - Input Method Editor API
• GOTO 2016 • Conflict Resolution for Eventual Consistency • Martin Kleppmann

（完）

2019-10-24更新

• https://editorjs.io
• https://nexttexteditor.com/
• https://gist.github.com/manigandham/65543a0bc2bf7006a487

2020-11-04更新

• 开源富文本编辑器技术的演进（2020 1024） - 知乎
• What is the best WYSIWYG editor?
• A Deep Dive Into Real Time Collaborative Editing Solutions - TagTeamTalk #001 | Tag1 Consulting
• A Deep Dive Into Rich Text Editors - TagTeamTalk #002 | Tag1 Consulting
• yjs/yjs
• Offline, Peer-to-Peer, Collaborative Editing using Yjs
• SmartBlock - A Modern Block Based Wysiwyg Editor using React and ProseMirror | SmartBlock

（更新完）

2022-04-10更新

Editor.js – Block Styled Editor (editorjs.io)讨论了editor.js。

• 提到了https://github.com/madebymany/sir-trevor-js
• 提到了https://github.com/vigetlabs/colonel-kurtz

基于block的编辑器存在如何跨区选取的问题，一般需要编辑器来模拟，比如 Cross block selection from text #703

Rich text / HTML editors and frameworks也有了一定的更新，依然分为三类

• Strictly Frameworks
• Abstracted Editors
• Dom-Based Editors

Prosemirror在大文件的时候存在一定的问题，参考

• https://discuss.prosemirror.net/t/performance-issues-with-prosemirror-and-chrome/2498/22
• https://discuss.prosemirror.net/t/maintaining-selection/926
• https://discuss.prosemirror.net/t/different-parsing-strategy-for-large-documents/1017

https://web.dev/content-visibility/设为auto可以让浏览器优化一下。

Codemirror的解决办法：https://youtu.be/4UlNIb8i9j8?t=2190。

（更新完）

2022-04-16更新

• vditor是用于思源笔记的编辑器，偏向于实时渲染，可以查看其博客页面。
  • 其Github页面是https://github.com/Vanessa219/vditor，里面有链接了几篇文章，讲述了他们开发vditor的一些决策经过。可以看出，开发图文编辑器不是那么容易的。
  • 使用的markdown引擎是https://github.com/88250/lute
  • 其开发理念有点类似于editor.js，是基于区块的
• https://lexical.dev/，是脸书新造的轮子
  • 从https://news.ycombinator.com/item?id=31017943看，模仿了不少Prosemirror的设计理念
  • 看来是打算抛弃之前的Draft.js了。
• 基于Prosemirror的编辑器
  • https://appleple.github.io/smartblock/看起来是区块类型
  • 这里有一些讨论Block structure editor by prosemirror
  • typora风格的https://github.com/Saul-Mirone/milkdown和https://discuss.prosemirror.net/t/saul-mirone-milkdown/3891

（更新完）