市面上主流编辑器介绍（2021/05/20）

背景

Markdown是一种有用的轻量级标记语言，后续Markdown简写为md。
富文本编辑器（Rich Text Editor，RTE）是一种可内嵌于浏览器，所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能，方便那些不太懂HTML用户使用，富文本编辑器的应用非常广泛，它的历史与图文网页诞生的历史几乎一样长。

兼容MD和富文本的编辑器

vditor 编辑器

简介

Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React、Angular，提供桌面版。
Vditor 的开发文档详尽且例子丰富，对开发者友好，且开源的插件也多。
该编辑器由三个成员共同维护，维护频率大概在半个月一次，由专门的讨论社区，且社区活跃。

优点

1. 大纲功能。
2. 支持所见即所得、即时渲染、分屏预览三种编辑模式。
3. 灵活强大的自定义功能。
4. 即时渲染编辑模式解决了表格面对复杂文本的问题。（这是其他调研编辑器所不能解决的问题）
5. 支持评论功能。
6. 支持所有CommonMark、GFM语法。
7. 用户体验友好：①支持中文语境优化（中西文之间插入空格、术语拼写修正、中文后跟英文逗号句号等标点符号替换为中文对应标点）；②表格编辑体验友好；③支持多种主题；④表情 / at / 话题等自动补全扩展；⑤实时保存内容，防止意外丢失；⑥支持主窗口大小拖拽，字符计数；⑦支持主流浏览器，对移动端友好；⑧多语言支持，内置中、英、韩问本地化。
8. 此编辑器还在维护更新中。

Arya 编辑器

简介

基于 Vue、Vditor，所构建的在线 Markdown 编辑器，支持绘制流程图、甘特图、时序图、任务列表、echarts 图表、五线谱，以及 PPT 预览、视频音频解析、HTML 自动转换为 Markdown 等功能。
目前Github点赞数1.4k，

优点

9. 基于vditor编辑器进行开发的，所以vditor的优点Arya也有。
10. 支持粘贴HTML自动转换为Markdown。
11. 支持常用快捷键（Tab），以及代码块添加复制。
12. 导出携带样式的PDF，PNG，JPEG等。
13. 注入RevealJs，增设对PPT预览支持。
14. 支持检查并格式化Markdown语法，转化专业。

缺点

1. 没有文档API。
2. 是对 editor 的二次开发，所以自定义可扩展性被限制了一部分。比如对spa的SEO，Arya 使用的是 prerender-spa-plugin 插件来解决的；pdf 的预览通过 reveal.js 插件来实现。
3. 相对小众的编辑器。

DHTMLX 编辑器

简介

DHTMLX 提供了一组紧凑的格式设置控件，两个用于轻松处理文本的编辑模式以及一个易于调整的工具栏。
DHTMLX 支持HTML和JSON格式的数据解析和序列化，并允许使用任何图标字体和添加自定义控件。此外，还有现成的解决方案可以与Angular，React和Vue.js等流行的JavaScript框架集成。
DHTMLX 的开发文档也详尽且例子丰富，对开发者友好，能自定义功能。DHTMLX 也有专门的论坛，但论坛活跃度低，但每个讨论都有几百人参与。

优点

1. 编辑器可以直接集成到Angular，React和Vue.js框架中。
2. DHTMLX组件是一整套基于JS的UI库，功能强大，其中包含编辑器dhtmlxEditor。
3. 基本的文本编辑和格式设置操作。
4. 经典和文档模式。
5. 全屏模式。
6. HTML，Markdown和纯文本中的数据解析和序列化。
7. 跨浏览器兼容性。
8. 文字处理API。
9. IE11 +支持。
10. 可配置的工具栏。
11. 外观定制。
12. 简单的本地化。
13. 块引号。
14. 高级和自定义统计 。

缺点

1. 有些大功能需要付费才有，官方扩展功能、官方技术支持、非GPL /商业项目、所有更新和修复等。

marktext 编辑器

简介

MarkText是MIT许可的开源项目，且仍在开发中。不过作者从去年12月份开始就没更新了，去年12月份之前更新频率特别快，一个月3-4次提交。Github的星星数达到18.2k。
MarkText具有用于markdown解析的模块的编辑器后端，用于数据存储的块结构，根据CommonMark和GitHub Flavored Markdown规范进行markdown文档转换以及一些额外的规范，事件侦听器和用于生成独立HTML和markdown文件的导出器，以及生成所见即所得的编辑器。Muya和Mark Text是单线程的，但是使用异步功能来提高性能。
MarkText并没有完整的官方API文档，只是介绍流程文档，也没有自定义扩展说法，后续可能要直接去寻找渲染方法去处理自定义方法，时间成本较大。

优点

1. 渲染速度快，Mark Text使用虚拟DOM来呈现页面。
2. snabbdom 作为 Mark Text 的渲染引擎，保证了极速渲染编辑页面，带来流畅的书写体验。
3. 支持 CommonMark Spec 和 GitHub Flavored Markdown Spec 语法格式，生成的 Markdown 可以复制到任何支持 markdown 格式的社区、网站。
4. 段落及行内样式快捷键提升您的编辑效率。
5. 输出 HTML 和 PDF 格式文件，方便在浏览器中预览。
6. 黑、白两款默认主题，自由切换。还有多种定制主图多种选择。
7. 多种编辑模式：源代码模式、打字机模式、专注模式。
8. 斗图功能，可以尝试连接火星个人表情包进行获取。

缺点

9. 简介的界面意味着没有工具栏，需要后续加上去。
10. 本身的界面把所有的工具栏按钮、定义的功能快捷按钮全部浓缩在一个按钮里面，对于新手、频繁使用菜单的人体验不佳（后续可手动添加工具栏解决）
11. 项目采用 node-gyp 来兼容多端的显示，后续剔除相关代码也需要时间。
12. 非源代码模式下不支持文段和图片拖动改变位置。
13. 采用后端驱动，本地化吃力。
14. 本地自定义位置。

tui.editor 编辑器

简介

tui.editor是一个所见即所得的开源编辑器，GFM标准+图表和UML可扩展。是功能强大的开源MarkDown编辑器，具备强悍的生产力能力以及丰富的扩展性功能。提供Markdown模式和WYSIWYG模式，可以在任何时间点进行切换。Github上点赞数12.9k，更新频率高，一个月三次左右。社区活跃。

优点

1. 有官网相关插件，兼容性好，渲染快。
2. 支持的语言多。
3. 强大的复制粘贴功能：粘贴浏览器，屏幕截图，Excel，PowerPoint等中的任何内容。
4. 自动缩进：光标将始终位于您想要的位置。

缺点

1. 文档不够全面，而且比较难理解。
2. 难以定制（功能和 UI 都是）。
3. 官网代码例子不够多。
4. 官网的API提供的多是方法和用途，没例子介绍，加大开发理解时间成本。

纵向对比

• 注：满分五颗星（☆☆☆☆☆）

MD编辑器调研

旧MD编辑器（editor.md）面临的问题

渲染速度慢

旧MD编辑器的渲染原理把全文进行正则匹配捕获特定文本去渲染功能，但功能一多时，每次都要去用正则去扫描全文，效率低下。且当文本很长时（差不多1万字），从点击文章到渲染出来需要5秒左右。

功能限制

1. 当表格内容复杂一点时，用户难以对表格进行快速定位编辑，体验很差。（这是所有的分屏预览功能的MD编辑器的痛点）
2. 不支持行内数学公式。
3. 由于渲染原因不太适合加太多自定义功能。

维护问题

该编辑器已经五年没有维护了。

stackedit 编辑器

优点

1. 渲染速度快：通过引入块级概念和行级概念，将文本划分为各种块级文本，块级文本再去渲染行级规则，通过并行处理大大加快文本渲染速度。
2. 使用了HTML5的应用缓存，第一次打开后在打开速度会更快。
3. 解决了旧MD除表格外的其他问题。
4. 通过模板导出 MarkDown 或 HTML 格式文件。
5. 文档信息统计显示功能。
6. diff功能，能检索出当前文档和上次保存文档的区别。
7. 灵活强大的自定义功能。

缺点

1. 部分语法和旧MD语法不兼容。现已知三个：①stackedit由于渲染算法不支持表格内插入代码块；②没有隐藏文本功能；③不支持css样式添加；其他不兼容语法可以通过自定义功能实现兼容。
2. 是个轻量级编辑器。
3. 没有解决表格复杂带来的不方便编辑问题。
4. 该编辑器也有几年没有维护了。

HedgeDoc 编辑器

优点

1. 支持实时协作。
2. 支持图表和MathJax。
3. 支持幻灯片模式。
4. 工具栏操作使用window.selection()原生方法，兼容性高。
5. 文档信息统计显示功能。

缺点

1. 源代码是前后端合并项目，使用此编辑器需要进行分离。
2. 实时协作是官网后端实现的，分离前后端后无法使用此功能，需要后端重新实现。

Dillinger 编辑器

与StackEdir编辑器类似，且更轻量。

富文本编辑器调研

当前富文本编辑器（ueditor）面临的问题

维护问题

ueditor是由百度开发的富文本编辑器，但由于多年不维护的问题，导致很多隐藏的bug并没有去修复，比如插入列表后回车插入普通文字是继续被当成列表去渲染的；插入标题后清空，在输入文本，按回退键，会清空文本。

TinyMCE 编辑器

TinyMCE是一个开源的所见即所得的HTML编辑器，界面相当清新，界面模拟本地软件的风格，顶部有菜单栏。支持图片在线处理，插件多，功能非常强大，易于集成，并且拥有可定制的主题。支持目前流行的各种浏览器，它可以达到微软Word类似的编辑体验。
目前一直有人维护，这款编辑器使用的人非常多。

Ckeditor 编辑器

Ckeditor也是一款非常经典的富文本编辑器，官方下载量过千万。它是在非常著名的FCkEditor基础上开发的新版本，FckEditor的用户现在基本都转移到Ckeditor了。
Ckeditor有高性能的实时预览，它特有行内编辑功能，使得编辑内容更加直观，仿佛是在编辑网页一样，有很强的可扩展性，被各大网站广泛运用。

wangEditor 编辑器

wangEditor轻量级，小巧实用，配置方便，使用简单。可以自定义皮肤功能，免费开源。用户数量也很多，尤其是用在一些轻型环境，比如论坛社区回帖。wangEditor是国人出品的开源项目。

KindEditor 编辑器

KindEditor历史也很长了，用户数也不少，国内某公司出品。免费开源。界面类似于office word，界面和功能中规中矩，文档齐全，使用还算方便。

simditor 编辑器

simditor是Tower平台使用的富文本编辑器，是一款轻量化的编辑器，界面简约，功能实用，插件不是很多，功能要求不高的可以使用。

bootstrap-wysiwyg 编辑器

bootstrap-wysiwyg是基于Bootstrap的轻型、免费开源的富文本编辑器，界面简洁大方。使用需要先引入bootstrap。

summernote 编辑器

summernote是一款轻量级的富文本编辑器，比较容易上手，使用体验流畅，支持各种主流浏览器。summernote开源免费，该项目一直比较活跃，一直都有人在维护。
summernote同样依赖于jquery和bootstrap，使用前先引入这两项。

eWebEditor 编辑器

eWebEditor外观和使用风格都和微软 Word很类似，功能很多。工具条可以定制，运行速度很快。导入文件接口很多，支持word、excel、pdf、ppt直接导入，目前版本不支持代码高亮，不适合纯技术平台使用，适合内容编辑人员使用。
eWebEditor有很长的历史了，是典型的传统富文本编辑器，不论是界面，还是功能都比较传统。
但是只有极简版的前端代码开源。

Quill 编辑器

Quill是轻型的编辑器，样式一般（黑白风），功能中等，它的代码高亮功能比较强，同样支持行内编辑模式，工具条可自定义。
开源免费，项目活跃，一直有人维护。

FreeTextBox 编辑器

FreeTextBox功能强大，前端支持主流浏览器，但后台只支持.NET。它的外观和使用风格都和微软 Word很类似。工具条可以定制，运行速度一般。FreeTextBox分为免费版和pro收费版。

总结

市面上的MD编辑器现在最主流的为所见即所得的编辑模式，但由于流行时间较短，导致调研的MD编辑器或多或少都有bug，当然，没有重大的安全漏洞或者体验上的大问题，且有专人去维护是一件很幸运的事情，因为这些bug在不久的将来就会消失。
而富文本编辑器则是在原理上进行创新，从使用HTML的contentEditable属性来实现编辑器到现在的往这三个方向实现：①数据层与视图层分开②自实现所有操作③协同支持；数据层与视图层分开这点大多数编辑器实现了；但是市面上的编辑器大多数还是通过HTML的contentEditable属性来实现编辑器，能做到不依赖html属性实现自实现所有操作的，脱离浏览器独立渲染的，现在也只有Google的新版本文档和word，wps；协同支持这点需要后端支持，所以编辑器支不支持集成后都需要后端重新实现。