web在线编辑器与在线文档盘点

北极象

已于 2023-07-12 10:29:39 修改

阅读量2.3k

点赞数 2

分类专栏：前端技术文章标签： ide web编辑器 markdown编辑器

于 2022-11-03 20:56:18 首次发布

本文链接：https://blog.csdn.net/jgku/article/details/127677712

版权

前端同时被 2 个专栏收录

44 篇文章 5 订阅

订阅专栏

技术

22 篇文章 2 订阅

订阅专栏

前言

web在线编辑器多如牛毛，如google doc, 腾讯文档，石墨文档，语雀，飞书，我来、FlowUs。往小的方面说，它们是web editor, rich editor, markdown editor，往大的方向说，它们是办公协同软件。

10大知识库工具（含开源、免费等）：1.PingCode；2.Confluence；3.MediaWiki；4.Gitbook；5.语雀；6.wiki.js；7.DokuWiki；8.Notion；9.docsify；10.坚果云。

我之前用过UEditor, CKEditor, wangEditor, Quill，TinyMCE，还有最近的vditor，但都不尽如人意。其中TinyMCE的一大优势就是对网上各种html格式的兼容，也就是不挑格式，这点导致我现在还一直用着它。

最后，我在Milkdown, tiptap和StackEdit之间纠结了很久，前两者都是插件体系的，第三个是CSDN编辑器的原型，但目前不活跃。这两者都是基于ProseMirror的，但milkdown的上手难度高，文档不全，例子偏少。后者插件更丰富，对vue3和react都有比较好的支持。

闲话一句，web编辑器研发是个大坑，成本极其高，以年计。

要让一款编辑器达到商业级质量，从目前接触到主要的例子来看，独立开发时间太长:
Quill编辑器，从 2012 年收到第一个 Issue 到 2016 年发布 1.0 版本，已经过去了四年。
Prosemirror编辑器，作者在 2015 年正式开源前筹款维护时已经开发了半年，而到发布 1.0 版本时，已经过去了接近三年。Slate 从开源到接近两年时，仍然有一堆边边角角用起来莫名其妙的 bug 。上面这几个单人主导的编辑器项目要达到稳定质量，时间是以年为单位来计算的。考虑到目前互联网“下周上线”的节奏，动辄几年的时间是不划算的。所以在人力，时间合理性各方面的约束下，使用开源框架是最好的选择。

在线编辑器需要哪些功能？

必选功能:

文本段落和6级标题的支持，基本的文字处理，如字体颜色大小
图片粘贴和上传
表格
基本排版，如缩进
高阶功能:
markdown支持
大纲显示
数学公式
PlantUML和流程图
其它如思维导图，图片裁剪我觉得已经不再属于web编辑器的范畴了，但目前主流的在线文档都必须支持了。

此外，性能要好，顺畅，大文件不卡。

开源的web编辑器

包括富文本编辑器和markdown编辑器。
在这里插入图片描述
L2级别的编辑器一般基于canvas技术，完全掌握文档的绘制，国内有Spire.Cloud在线Office作为代表。

Monaco Editor

微软出品，vscode背后的编辑器。支持多种编程语言，主要面向开发者。也可以作为markdown编辑器。

地址：https://microsoft.github.io/monaco-editor/

https://www.npmjs.com/package/monaco-editor-vue3

ProseMirror

一款可定制性及极强的「所见即所得」富文本编辑器框架，文档的可编辑性基于 contentEditable 属性，支持协同，作者是 @marijnh，他也是 CodeMirror 编辑器的开发者。但它本身并不像其他编辑器一样开箱即用，需要一系列的模块进行配合搭建，而且涉及到一些内部抽象概念，API 复杂且多，官方文档全英文，所以上手成本比较高。
地址：https://github.com/ProseMirror/prosemirror-view

tiptap

基于ProseMirror，对React和Vue支持比较好。Tiptap 是一款无头编辑器，它没有提供任何 UI 样式。目前2.0版本支持vue3。
注意：tiptap不支持Markdown作为输入和输出，只支持JSON和HTML。比较奇怪的一点。

https://github.com/ueberdosis/tiptap
基于elementplus+tiptap的封装：https://github.com/Leecason/element-tiptap

Milkdown

https://github.com/Saul-Mirone/milkdown
插件化的体系结构，扩展性好。20k。网上相关资料不多，API复杂，文档不全面，上手难度大。
基于prosemirror 和 remark构建
基于mermaid的图表支持，通过插件。
支持协同编辑。
采用prismjs支持各种代码语法高亮和基本编辑：https://prismjs.com/

掘金markdown编辑器

ByteMD编辑器是字节跳动的掘金团队（字节2020年收购了掘金）所使用的编辑器。此编辑器也是在2020开源，基于Svelte 这个前端框架，经过二年打磨，功能已经比较齐全。ByteMD支持多种web框架使用，并且也支持多个插件。

主要特点：

轻量级和框架无关：ByteMD 是用Svelte构建的。它编译为 vanilla JS DOM 操作，无需导入任何 UI 框架运行时包，这使其轻量级，并易于适应其他库/框架。
易于扩展：ByteMD 有一个插件系统来扩展基本的 Markdown 语法，这使得添加附加功能变得很容易，例如代码语法高亮、数学方程和美人鱼流程图。如果这些插件不能满足您的需求，您也可以编写自己的插件。
默认情况下是安全的：ByteMD已经正确处理了跨站点脚本（XSS）攻击。无需引入额外的 DOM 清理步骤。
SSR 兼容：ByteMD 可以在服务器端渲染（SSR）环境中使用，无需额外配置。SSR 在某些情况下被广泛使用，因为它具有更好的 SEO 和在慢速网络连接中快速获取内容的时间。

地址:

https://bytemd.js.org/
https://github.com/bytedance/bytemd

字节的Syllepsis

字节基于Prosemirror二次封装开箱即用的的富文本编辑器兼容主流现代浏览器。
Syllepsis 是一款开箱即用的的富文本编辑器，兼容主流现代浏览器。我们在 Prosemirror 的基础上做了二次封装，提供更简洁的 API，大量基础插件扩展，和自定义插件支持，让定制编辑器更简单。

功能特色：

开箱即用：支持快速接入React，引入 Syllepsis 和其它普通组件一样简单。
大量基础插件：提供大量常规插件，按需选择，即插即用，无需额外的开发成本。
可拓展性：更简单的插件封装和 API，使开发者轻松定制业务插件。
其它特色功能：我们在框架中积累了大量的工程实践和优化技巧，可移步官网进一步了解

地址：https://github.com/bytedance/syllepsis
https://bytedance.github.io/syllepsis/#/zh-cn/plugins/README

slate.js

强大，基于React框架，语雀一度基于它开发的。
https://github.com/ianstormtaylor/slate

draft-js

已经停止更新了。A React framework for building text editors.
https://github.com/facebookarchive/draft-js

StackEdit

目前已经不再更新，CSDN的博客编辑器基于它开发。该编辑器基于PageDown。PageDown是一个用来解析和编辑 Markdown 内容的 JavaScript 库，可将 Markdown 转成 HTML 文本，并提供一个编辑器可实时预览生成的 HTML。

Full-featured, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites.

地址：https://github.com/benweet/stackedit
国人汉化版：stackedit
vue封装版：https://github.com/loliconer/vue-stackedit
stackedit.js：https://github.com/benweet/stackedit.js

Quill

老牌富文本编辑器。

editor.md

12.8k star，国人开发。也是非常棒，基本开箱即用。
地址：https://editor.md.ipandao.com/

mavonEditor

5.9k，轻量级。

https://github.com/hinesboy/mavonEditor

tui.editor

15.6k, 全功能编辑器，支持所见即所得和markdown编辑。

The Editor allows you to edit your Markdown documents using text or WYSIWYG and comes with Syntax Highlighting, Scroll-Sync, Live Preview, and Chart features.

https://ui.toast.com/tui-editor
https://github.com/nhn/tui.editor

腾讯的CherryMarkdown

Cherry Markdown Editor 是一款 Javascript Markdown 编辑器，具有开箱即用、轻量简洁、易于扩展等特点. 它可以运行在浏览器或服务端(NodeJs).

项目名称：
Cherry Markdown Editor
项目地址：
https://github.com/Tencent/cherry-markdown

Cherry Markdown Editor

微信markdown编辑器

3.7k，还在发展中
doocs.github.io/md

vditor

b3log出品，剑走偏锋，架构独特。5.8k star, 插入代码有bug，放弃了。

https://github.com/Vanessa219/vditor

simplemde

https://github.com/sparksuite/simplemde-markdown-editor

其它

其它： ckeditor, wangEditor， UEditor。

数学公式

这个还不错：
https://demo.wiris.com/mathtype/en/developers.php#mathml-latex

码云的Web IDE不错，一看，来自Monaco Editor。网上一搜，的确有不少基于Monaco的web IDE。

HTML和Markdown格式的互转

将Markdown转换为html的开源库有很多，比如markdown-it、marked、showdown
html转md: turndown 和 html2md(helloworld网站的作品)

如何选择？

不想做二次开发，傻瓜型，开箱即用：TinyMCE
做适度定制: Milkdown 和 Tiptap，StackEdit也可以考虑

附录：老外的讨论

The full list of findings can be found here: https://docs.google.com/spreadsheets/d/18v2G44v0ix41xbAseOIcMcFOMNluc67IJz9f2U5IpRo/edit#gid=0.

6 were declined declined for recommendation due to lack of activity or being deprecated, though other factors could also cause it to be declined:

CodeMirror5 - deprecated by CodeMirror6
Easy MarkDown Editor - based on CodeMirror5, a big rewrite is pending
stackedit.js - lack of activity
StrapDown.js - lack of activity
TeXMe - lack of activity
zero-md - lack of activity
5 were declined due to lack of compatibility, though other factors could also cause it to be declined:

mark - does not appear to be extensible
react-markdown - no Vue support
react-md-editor - no Vue support
React Monaco Editor - no Vue support
Silver Bullet - this seems to be a “whole package” deal, not something easily dropped into Directus
1 was declined because it requires a license: Typora.

5 were declined because they were single purpose, that is they only supported Markdown. This is important because in order to keep code weight down the editor should be multi-purpose:

ByteMD
kg-markdown-html-renderrer
md-editor-v3
Showdown.js
Toast UI
This left 5 for consideration that support Vue, are active projects, and are multipurpose:

CodeMirror6 - code or Markdown
Milkdown - Markdown or WYSIWYG
Monaco - code or Markdown
ProseMirror - Markdown or WYSIWYG
Tiptap - Markdown or WYSIWYG
Recommendation
Further evaluation is needed to identify a sure path forward. I believe there are two general paths to take, Option 1 and Option 2 as clarified below. This deeper evaluation should consider specific features for each of the Markdown, Code, and WYSIWYG fields such as extensibility, autosave, collaborative editing, accessibility, internationalization, syntax highlighting, code completion, undo history, preview vs source toggling, and the overall experience and needs for those respective field types.

Option 1: Use one editor for Markdown and Code Fields and another for WYSIWYG Field
In this scenario, it probably makes most sense to proceed with using CodeMirror for Markdown and Code fields, but upgrade from CodeMirror5 to CodeMirror6 to address defects. Continue using TinyMCE for WYSIWYG.

The alternative would be to use Monaco instead of CodeMirror for the Markdown and Code fields since it seems (on the surface) to offer comparable functionality, but there are reasons to decide against Monaco. One, Directus already has experience with CodeMirror. Two, of the Markdown editors I found there was only 1 based on Monaco but at least 2 based on CodeMirror. Third, of the CMS’s I evaluated none of them used Monaco for the Markdown inputs but 3 of them used CodeMirror.

Option 2: Use one editor for Markdown and WYSIWYG Fields and another for Code Field
In this scenario, it probably makes sense to use CodeMirror for the Code field. Upgrading from CodeMirror5 to 6 is ideal, but optional in the near term.

TinyMCE would be removed from the project and a ProseMirror editor would be used instead. There are 3 options:

Milkdown
ProseMirror
Tiptap
Further evaluation would need to be done to identify which is the best fit. They all have examples of a WYSIWYG view so they should be compatible for the WYSIWYG field. But, I did not find examples of how to use these editors in a side-by-side view or toggle view which allows the author to write in raw Markdown. However, that should be supported. They are all based on ProseMirror and its documentation shows that a raw view would be supported as shown here: https://prosemirror.net/examples/markdown/.