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

背景

Markdown是一种有用的轻量级标记语言，后续Markdown简写为md。

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

兼容MD和富文本的编辑器

vditor 编辑器

简介

Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React、Angular，提供桌面版。

Vditor 的开发文档详尽且例子丰富，对开发者友好，且开源的插件也多。

该编辑器由三个成员共同维护，维护频率大概在半个月一次，由专门的讨论社区，且社区活跃。

优点

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

Arya 编辑器

简介

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

目前Github点赞数1.4k，

优点

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

缺点

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

DHTMLX 编辑器

简介

DHTMLX 提供了一组紧凑的格式设置控件，两个用于轻松处理文本的编辑模式以及一个易于调整的工具栏。

DHTMLX 支持HTML和JSON格式的数据解析和序列化，并允许使用任何图标字体和添加自定义控件。此外，还有现成的解决方案可以与Angular，React和Vue.js等流行的JavaScript框架集成。

DHTMLX 的开发文档也详尽且例子丰富，对开发者友好，能自定义功能。DHTMLX 也有专门的论坛，但论坛活跃度低，但每个讨论都有几百人参与。

优点

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

缺点

有些大功能需要付费才有，官方扩展功能、官方技术支持、非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文档，只是介绍流程文档，也没有自定义扩展说法，后续可能要直接去寻找渲染方法去处理自定义方法，时间成本较大。

优点

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

缺点

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

tui.editor 编辑器

简介

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

优点

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

缺点

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

纵向对比

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

MD编辑器调研

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

渲染速度慢

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

功能限制

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

维护问题

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

stackedit 编辑器

优点

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

缺点

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

HedgeDoc 编辑器

优点

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

缺点

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

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；协同支持这点需要后端支持，所以编辑器支不支持集成后都需要后端重新实现。