只要做后台系统、做社区论坛、做笔记工具，基本都会撞上一个需求，就是让用户自己写一段带格式的文字，能有标题、加粗、列表、插图。从零手搓一个编辑器是不现实的，光标、选区、撤销重做每一样都是深坑。现成的开源编辑器其实不少，但定位差别很大，有的极简、有的功能堆满，选错了要么不够用要么太重。这次整理了 5 款开源免费、可商用的富文本编辑器，从轻量到全能都覆盖了，你按项目档位挑一个直接嵌进去就行。
五款编辑器差别在哪
Quill 是最经典的一款，模块化设计，工具栏、标题、列表、链接、图片、代码块这些常用格式都有，还提供 snow 和 bubble 两套主题，社区成熟、扩展插件多。Trix 由 Basecamp 开源，走极简路线，交互干净、默认样式舒服，只管内容不管花哨排版，适合博客和留言这类简单场景。SunEditor 功能覆盖很广，图片上传、表格、代码视图、全屏、格式刷、字符统计一应俱全，界面接近传统富文本，适合什么都想有的后台。TOAST UI Editor 的杀手锏是双模式，Markdown 和所见即所得可以来回切，自带代码高亮，很对写作者的胃口。
双模式和单模式怎么选
选编辑器先想清楚你的用户是谁。如果面向的是技术写作者、技术文档类产品，用户习惯了 Markdown，那 TOAST UI Editor 的双模式会明显加分，随手写标记、随时切预览，流畅度很高。如果是普通运营、商家、学生这类用户，他们只关心所见即所得，格式按钮点一下就变，那 Quill 或者 SunEditor 更顺手，界面直白、学习成本低。Trix 适合内容形态简单、不想要一堆按钮的项目，留言板、简短笔记用它最干净，不会让用户被满屏工具栏吓到。
接入方式和包内容
每个目录里是压缩构建产物和对应样式文件，用 script 和 link 标签引到页面里，给一个容器就能初始化，不用跑构建、也不依赖包管理器。Quill 这里要留个心，2.x 版本把样式合并进了 JS，引入 quill.js 加上对应主题的 CSS 即可，很多老教程还在写引另一个 CSS，照着做反而会找不到文件。包里同时附了各库的说明文档和许可文件，基础用法和常用配置都写在里面了。
富文本编辑器属于典型的自己写要命、用现成的省命的一类组件。这五款都是经过大量项目验证的成熟方案，稳定性和文档质量都靠得住。整包加起来九百多 KB，对项目负担不大，建议先存一份进自己的工具箱。全部是 MIT 或 BSD 协议，可免费商用、修改和再分发，保留各自的许可文件即可。后面还会继续整理前端开发常用的组件合集，需要的可以关注。
暂无评论内容