做系统开发过程中，难免要自己产生一些富文本内容，重复造轮子不是一个很好的选择，所以找一款合适的开源，是一个很好的解决途径。
本文收集整理了六款开源富文本编辑器，希望能抛砖引玉，有所启发。
一、Quill
官网地址（演示地址）：
项目地址：
https://github.com/quilljs/quill/
Start数：
33.3k
文档地址：
https://quilljs.com/docs/quickstart/
介绍：
Quill is a modern rich text editor built for compatibility and extensibility. It was created by Jason Chen and Byron Milligan and actively maintained by Slab.
Quill是为兼容性和可扩展性而构建的现代富文本编辑器。它由Jason Chen和Byron Milligan创建，并由Slab积极维护。
它的优势是轻量、兼容性强、支持的插件扩展丰富，需要用到什么就引用什么。
用法也很简单，原生 JS 就可以，界面也很精简：
此外，还有适用于 Vue 和 React 的封装版本，无论用哪个前端框架，都能快速部署。
Vue 版本：
https://github.com/surmon-china/vue-quill-editor
React 版本：
https://github.com/zenoamaro/react-quill
二、Monaco Editor
官网地址（演示地址）：
https://microsoft.github.io/monaco-editor/index.html
项目地址：
https://github.com/microsoft/monaco-editor
Start数：
30.6k
文档地址（完整示例）：
https://github.com/microsoft/monaco-editor/tree/main/samples
介绍：
这是微软开源的代码编辑器，有很多主题，其中就包括Visual Studio 主题，可以给用户如同在本地编辑器一般敲代码的体验。
这款编辑器还支持代码 Diff 功能！如果想自己开发一个类似 GitHub 的代码差异展示界面，用它就能轻松实现。
三、Slate
官网地址（演示地址）：
项目地址：
https://github.com/ianstormtaylor/slate
Start数：
25k
文档地址：
介绍：
completely customizable framework for building rich text editors.
Slate lets you build rich, intuitive editors like those in Medium, Dropbox Paper or Google Docs—which are becoming table stakes for applications on the web—without your codebase getting mired in complexity.
It can do this because all of its logic is implemented with a series of plugins, so you aren’t ever constrained by what is or isn’t in “core”. You can think of it like a pluggable implementation of contenteditable built on top of React. It was inspired by libraries like Draft.js, Prosemirror and Quill.
这个富文本编辑器有些特殊，作者对它的描述是：专注于构建富文本编辑器的完全可定制框架，可以将它理解为用于更好地造轮子的轮子。
实际体验下来，它的易用性相对不高，但是十分灵活，如果你想做一个自己的富文本编辑器，slate 是一个不错的选择！
四、TOAST UI Editor
官网地址：
https://ui.toast.com/tui-editor
项目地址：
https://github.com/nhn/tui.editor
Start数：
15k
文档地址：
介绍：
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.
TOAST UI Editor provides Markdown mode and WYSIWYG mode. Depending on the type of use you want like production of Markdown or maybe to just edit the Markdown. The TOAST UI Editor can be helpful for both the usage. It offers Markdown mode and WYSIWYG mode, which can be switched any point in time.
这款编辑器的界面可谓是要舒服得多，支持所见即所得的，类似 Typora 。
目前有原生JS 、 Vue、React 的封装版本。
五、Editor.md
官网地址：
项目地址：
https://github.com/pandao/editor.md
Start数：
12.4k
文档地址（示例）：
http://editor.md.ipandao.com/examples/
介绍：
Editor.md 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。支持 Markdown 语法、代码块、科学公式、流程图等等，有非常多的自定义配置，兼容 IE 8+ 浏览器，基本上能满足写作网站的需求。
不得不说，以上都是默认英文，而这款相对非常友好，默认是中文的。
官网自称其主要用户有支付宝，阿里，华为，京东，360，CSDN，企业微信，OSCHINA，YY，小米……
六、ByteMD
官网地址：
项目地址：
https://github.com/bytedance/bytemd
Start数：
2.7k
介绍：
ByteMD is a Markdown editor component built with Svelte. It could also be used in other libraries/frameworks such as React, Vue and Angular.
是字节跳动出品的富文本编辑器，功能强大，而且有不少内置的主题，写作体验上很棒。
这款编辑器使用 Svelte 框架开发，支持原生、Vue、React、Svelte 框架集成，几乎满足目前所有的前端需求。
以上，就是本文介绍的六款富文本编辑器，哪一款是你在用的？你觉得哪一款好用呢？
原创文章，作者：蓝洛水深，如若转载，请注明出处：https://blog.lanluo.cn/11361
微信扫一扫 
支付宝扫一扫 
