一、富文本编辑器推荐
1.editor.md
GitHub:https://github.com/pandao/editor.md
Star 数:12k
这是目前我个人最看好的国内的富文本编辑器,只学过 HTML、CSS、JS 三件套的同学也能使用。支持 Markdown 语法、代码块、科学公式、流程图等等,有非常多的自定义配置,兼容 IE 8+ 浏览器,基本上能满足写作网站的需求。
界面也很优雅,如图:
但美中不足的是,Editor.md 目前不支持将 HTML 解析为 Markdown,有这方面需求的朋友要注意下。
2.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
3.bytemd
GitHub:https://github.com/bytedance/bytemd
Star 数:2k
从名字就能看出来,这是字节跳动(掘金)出品的富文本编辑器,功能强大,而且支持很多掘金内置的主题,写作体验很棒:
这款编辑器使用 Svelte 框架开发,支持原生、Vue、React、Svelte 框架集成,几乎适用于所有前端开发人员:
这个编辑器之前在火狐浏览器会崩溃,后来很快就修复了,给响应速度点个赞。
4.monaco-editor
GitHub:https://github.com/microsoft/monaco-editor
Star 数:28.6k
微软开源的代码编辑器,支持 Visual Studio 主题,可以给用户如同在本地编辑器一般敲代码的体验:
最吸引我的是,这款编辑器还支持代码 Diff 功能!如果想自己开发一个类似 GitHub 的代码差异展示界面,用它就能轻松实现了~
5.tui.editor
GitHub:https://github.com/nhn/tui.editor
Star 数:14.4k
这款富文本编辑器最吸引我的是它的界面,个人感觉看着比其他的都舒服一点。
而且它是支持所见即所得的,类似 Typora 的那种编辑体验:
这款编辑器也同时支持原生 JS 以及 Vue、React 的封装版本,还是很推荐的。
6.slate
GitHub:https://github.com/ianstormtaylor/slate
Star 数:23.8k
这个富文本编辑器有些特殊,作者对它的描述是:专注于构建富文本编辑器的完全可定制框架,可以将它理解为用于更好地造轮子的轮子。
实际体验下来,它的易用性相对不高,但是十分灵活,如果你想做一个自己的富文本编辑器,slate 是一个不错的选择!