共计 2474 个字符，预计需要花费 7 分钟才能阅读完成。
本文首发：最好用的 5 款 React 富文本编辑器 – 卡拉云
富文本编辑器罕用于网络上各种模式的内容展现，从简略的动态博客到简单的内容管理系统。它利用于多种应用程序，如博客、文章、列表以及更弱小的界面 —— 电商网站商品详情和博客上的。然而，从这么多功能各异的编辑器中挑选出一个适合的并不容易。
我测评了 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-react3.Quill.js — 带有主题的收费 API 的文本编辑器
Quill.js 是一个疾速、轻量级的富文本编辑器。它反对跨平台和跨浏览器，其主题可扩大、可配置，是你在诸多平台的古代浏览器上能找到性能晦涩的最佳抉择。
长处
- 易于设置和应用。
- 跨平台和浏览器反对。
- 预设编辑器款式的主题反对。
- 输入 HTML 格局的内容，无需像其余编辑器一样解析。
毛病
- 无限的定制性能。
- 较少的更新和补丁。
- 可能的 XSS 安全漏洞。
应用 yarn 或 npm 装置:
npm install react-quill
yarn add react-quill4.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。可依据本人的工作流，定制开发。无需繁琐的前端开发，只须要简略拖拽，即可疾速搭建企业外部工具。 数月的开发工作量，应用卡拉云后可缩减至数天，欢送收费试用卡拉云。
卡拉云可依据公司工作流需要，轻松搭建数据看板或其余外部工具，并且可一键分享给组内的小伙伴。
更多数据库相干教程可拜访 卡拉云 查看。
扩大浏览：
- MySQL 工夫戳用什么类型 – MySQL 工夫函数详解
- 最好用的七大顶级 API 接口测试工具
- 最好用的 5 款 React 富文本编辑器
- 如何在 MySQL / MariaDB 中跳过多张表导出或指定多张表导出备份
- 如何将 MySQL / MariaDB 的查问后果保留到文件
- 如何在 MySQL 中导入和导出 CSV / Excel 文件
如果感觉本文对你有帮忙，还请点个赞。欢送评论区一起探讨。
