几个免费的富文本编辑器，这不完胜付费？
大家好，我是鱼皮，昨天 星球 的小伙伴问我：现在想做个写作网站，有没有好用的前端富文本编辑器组件？
这个问题真是戳我痛处了，我之前在开发编程导航、面试鸭、面试君主等网站和小程序时，就一直被富文本编辑器所困扰，尝试过许多，绝大多数都是不能满足我的需求的。要么太难看、要么太卡顿、要么是框架 / 版本不兼容（我用 React 多一点），还有更离谱的是在部分浏览器不兼容！以致于我曾经花了整整一周去调研和试错。。。
所以今天给大家分享几款我用过的、觉得值得一用的、开源免费 的富文本编辑器，甚至可以说是完胜国外的付费编辑器（付费的自己还不方便修改和定制）。
富文本编辑器推荐
editor.md
GitHub：https://github.com/pandao/editor.md
Star 数：12k
这是目前我个人最看好的国内的富文本编辑器，只学过 HTML、CSS、JS 三件套的同学也能使用。支持 Markdown 语法、代码块、科学公式、流程图等等，有非常多的自定义配置，兼容 IE 8+ 浏览器，基本上能满足写作网站的需求。
界面也很优雅，如图：
但美中不足的是，Editor.md 目前不支持将 HTML 解析为 Markdown，有这方面需求的朋友要注意下。
quill
GitHub：https://github.com/quilljs/quill/
Star 数：32.2k
目前面试鸭网站选用的就是 quill，作为富文本编辑器，它在 GitHub 上的 star 数名列前茅。
体验下来，它的优势是轻量、兼容性强、支持的插件扩展丰富，需要用到什么额外功能时再去单独引入就好了。
用法也很简单，原生 JS 就可以，界面也很精简：
此外，它还有适用于 Vue 和 React 的封装版本，无论你习惯用哪个前端框架，都能无差异地使用它。
Vue 版本：https://github.com/surmon-china/vue-quill-editor
React 版本：https://github.com/zenoamaro/react-quill
bytemd
GitHub：https://github.com/bytedance/bytemd
Star 数：2k
从名字就能看出来，这是字节跳动（掘金）出品的富文本编辑器，功能强大，而且支持很多掘金内置的主题，写作体验很棒：
这款编辑器使用 Svelte 框架开发，支持原生、Vue、React、Svelte 框架集成，几乎适用于所有前端开发人员：
我的编程导航网站使用的就是这个编辑器，之前它在火狐浏览器会崩溃，后来很快就修复了，给响应速度点个赞。
monaco-editor
GitHub：https://github.com/microsoft/monaco-editor
Star 数：28.6k
微软开源的代码编辑器，支持 Visual Studio 主题，可以给用户如同在本地编辑器一般敲代码的体验：
最吸引我的是，这款编辑器还支持代码 Diff 功能！如果想自己开发一个类似 GitHub 的代码差异展示界面，用它就能轻松实现了~
tui.editor
GitHub：https://github.com/nhn/tui.editor
Star 数：14.4k
这款富文本编辑器最吸引我的是它的界面，个人感觉看着比其他的都舒服一点。
而且他是支持所见即所得的，类似 Typora 的那种编辑体验：
这款编辑器也同时支持原生 JS 以及 Vue、React 的封装版本，还是很推荐的。
slate
GitHub：https://github.com/ianstormtaylor/slate
Star 数：23.8k
这个富文本编辑器有些特殊，作者对它的描述是：专注于构建富文本编辑器的完全可定制框架，可以将它理解为用于更好地造轮子的轮子。
实际体验下来，它的易用性相对不高，但是确十分灵活，如果你想做一个自己的富文本编辑器，slate 是一个不错的选择！
以上就是本期分享，最后欢迎大家加入鱼皮的 编程知识星球 ，和几千名小伙伴们一起交流学习进步，向鱼皮等大厂同学 1 对 1 提问、跟着鱼皮直播做项目、领取各方向编程资源等。
往期推荐