最好用的 5 款 React 富文本编辑器

2021-09-19 00:44:04

富文本编辑器常用于网络上各种形式的内容展示，从简单的静态博客到复杂的内容管理系统。它应用于多种应用程序，如博客、文章、列表以及更强大的界面 —— 电商网站商品详情和博客上的。然而，从这么多功能各异的编辑器中挑选出一个合适的并不容易。

我测评了 5 款 React 富文本编辑器，比较了他们编辑器的核心功能，希望我的测评可以帮你找到最合适你应用场景的编辑器。如果你完全不会前端，也不用担心，可以使用卡拉云，仅需简单拖拽即可生成「富文本」编辑器，卡拉云帮你快速搭建属于你自己的应用程序，详见本文文尾。

1.Draft.js — 能够满足基础需求的免费编辑器

Draft.js 是 Facebook 为了 React 而开发的一个 React.js 开源框架。它是健壮、可扩展及可定制的，在 React 开发者中非常受欢迎。

Draft.js 提供了管理各项配置的工具，包括事件触发器上的编辑器样式和单个文本实体（如标题和块引用）的块样式。对于在编辑器中创建的内容，我们希望将其转换为便于在页面上显示的 HTML。一些库如 draft-convert 和 draftjs-to-html 可用于转换这些数据。

优点

易于理解的扁平化内容模型。
构建在 Draft.js 上的高度可扩展及可定制的插件。
自 2016 年以来，由 Facebook 支持的庞大且不断增长的开发者社区提供了许多的教程和支持。

缺点

缺乏官方的移动端支持。
OSX 自定义键绑定的问题。
当需要表格这样复杂的内容结构时，编辑器将会变慢，代码也会变得复杂。

如果你是初学者且希望找到一个能满足基础需求的文本编辑器，试试 Draft.js 吧。

使用 npm 或 yarn 安装：

npm install draft-js 
yarn add draft-js

2.Slate.js — 支持复杂内容格式的免费编辑器

Slate.js 是另一款超好用的 react 富文本编辑器，可用于构建优雅、功能强悍的编辑器如 Medium Editor、Google Docs 等。

优点

可使用插件进行扩展。
输出 JSON 格式的内容，更容易与其他模块集成。
嵌套文档模型支持更复杂的内容结构，如表格、分页符和其他自定义功能。

缺点

操作编辑器控件需要 UI 设置。
仍处于 beta 阶段，在生产环境下站点的实践和信赖上可能会令人失望。

如果你希望找到带有自定义功能的内存优化的编辑器，Slate.js 是最佳的选择。

使用 yarn 或 npm 安装：

yarn add slate slate-react
npm install slate slate-react

3.Quill.js — 带有主题的免费 API 的文本编辑器

Quill.js 是一个快速、轻量级的富文本编辑器。它支持跨平台和跨浏览器，其主题可扩展、可配置，是你在诸多平台的现代浏览器上能找到功能流畅的最佳选择。

优点

易于设置和使用。
跨平台和浏览器支持。
预设编辑器样式的主题支持。
输出 HTML 格式的内容，无需像其他编辑器一样解析。

缺点

有限的定制功能。
较少的更新和补丁。
可能的 XSS 安全漏洞。

使用 yarn 或 npm 安装:

npm install react-quill
yarn add react-quill

4.TinyMCE — 功能丰富的商业性编辑器

TinyMCE 是一款非常强大的 WYSIWYG 富文本编辑器，具有高度的可定制、可扩展性。如果你预算充足同时希望找到一款没有后顾之忧的编辑器，那么就是它了。

优点

自动链接检查器。
支持实时协作。
支持提及和评论。
支持增强的媒体嵌入。
支持高级表格和复杂的内容格式。

缺点

需要付费订阅才能使用其高级功能。

做决定前你可以先试用免费版本， TinyMCE 提供了详尽的技术文档，从如何安装到功能介绍，写的非常清晰。

5.KendoReact — 可直接用于商业性产品的编辑器

KendoReact 是专业的 UI 组件和数据可视化库，旨在帮助你使用 React 更快地设计和构建业务应用程序。

优点

闪电般的性能。
高度的可定制。
可直接用于开发应用程序。

缺点

价格偏贵。

与免费的富文本编辑器相比，Kendo 有许多非常棒的功能。如果你对文本编辑器有极具竞争力的业务性需求，同时也在寻找一个日后也没有麻烦的编辑器，那么就是 KendoReact 了。

6.TipTap — 样式很有调调的免费编辑器（多送一款编辑器测评）

TipTap 是一个没有提供用户界面的富文本编辑器。它允许你完全地自定义构建任何想要的界面，同时也支持实时的协作。

优点

可定制的 UI。
支持键盘快捷键。
支持移动端。
协同编辑。

缺点

依旧处于测试阶段。

如果你在寻找功能丰富、外观现代的免费编辑器，试试 TipTap 吧：

## install with npm 
npm install @tiptap/core @tiptap/starter-kit 
## install with Yarn 
yarn add @tiptap/core @tiptap/starter-kit

总结

本文比较了 6 种 React 富文本编辑器的优缺点，我们可以根据自己工作中的实际场景来对编辑器进行挑选。

如果你想搭建自己的后台工具，但你对前端并没有那么熟悉，可以考虑使用卡拉云，卡拉云内置了富文本编辑器，完全不用你操心前端，只需要简单拖拽即可立即在页面上生成富文本编辑器。

卡拉云是新一代低代码开发工具，免安装部署，可一键接入包括 MySQL 在内的常见数据库及 API。可根据自己的工作流，定制开发。无需繁琐的前端开发，只需要简单拖拽，即可快速搭建企业内部工具。数月的开发工作量，使用卡拉云后可缩减至数天，欢迎免费试用卡拉云。

卡拉云可根据公司工作流需求，轻松搭建数据看板或其他内部工具，并且可一键分享给组内的小伙伴。

更多数据库相关教程可访问卡拉云查看。

扩展阅读：

如果觉得本文对你有帮助，还请点个赞。欢迎评论区一起讨论。

码农公寓