通过功能比较评估不同的React富文本编辑器
今天，富文本编辑器被用于许多应用程序中，包括简单的博客和复杂的内容管理系统。然而，选择一个并不容易，因为有很多具有不同功能的编辑器。
因此，在这篇文章中，我将评估5个React的富文本编辑器，并对其功能进行比较，以帮助你选择最适合你要求的。
1.Draft.js - 最受欢迎的基本需求的免费编辑器
Draft.js是Facebook的一个开源项目，为React构建。这是一个强大的、可扩展的、可定制的框架，它在React开发者中非常受欢迎。
根据Facebook的说法，这个库被用于Facebook的状态、评论和messenger.com。
优点
- 高度的可扩展性和可定制性，有建立在Draft.js之上的插件。
- 扁平的内容模型很容易理解。
- 由于自2016年以来得到Facebook支持的大型、不断增长的开源开发者社区，因此有许多教程和支持。
缺点
- 当需要复杂的内容结构（如表格）时，编辑器会变得很慢，代码也会变得复杂。
- OSX的自定义键绑定问题。
- 没有官方的移动支持。
Draft.js在GitHub上有超过2万颗星，NPM每周有大约62万次下载。
如果你是一个初学者，想实现一个文本编辑器的基本需求，我为你推荐Draft.js，你可以使用npm或yarn轻松安装它。
npm install draft-js
2.Slate.js - 支持复杂内容的免费编辑器
Slate.js是另一个令人兴奋的React富文本编辑器，灵感来自Draft.js。而且你可以用它来构建像Medium Editor、Dropbox Paper或Google Docs那样的漂亮编辑器。
虽然Slate.js仍处于测试阶段，但它在GitHub上有超过20K颗星。
优点
- 产生JSON输出，使其更容易与其他模块集成。
- 它的嵌套文档模型支持更复杂的内容结构，如表格、分页符和其他自定义功能。
- 可通过使用插件进行扩展。
- 有很好的描述性文档 和互动演示。
- 受到Salesforce和Airtable的信任。
缺点
- 仍处于测试阶段（截至2021年5月），这对于信任和在生产网站上实施可能是个坏消息。
- 需要更多的初始UI设置来适应编辑器控制。
然而，如果你想实现一个具有自定义功能的内存优化的富文本编辑器，Slate.js是你最好的选择之一，它可以使用yarn或npm轻松安装。
yarn add slate slate-react
3.Quill.js - 带有主题的免费API驱动的编辑器
排名第三的是Quill.js，它是具有跨平台和跨浏览器支持的富文本编辑器。因此，这是你在台式机、平板电脑和手机的所有现代浏览器上寻找流畅功能的最佳选择。
Quill.js在GitHub上有29.9万个星星，在NPM上每周有超过57万次下载。
优点
- 由于其API驱动的设计，不需要像其他文本编辑器那样解析HTML或不同的DOM树。
- 支持自定义内容和格式，有预设的编辑器样式。
- 跨平台和浏览器支持。
- 易于设置。
缺点
- 可能存在XSS安全漏洞。
- 功能的定制是有限的。
- 较少的更新和补丁。
你可以使用NPM安装Quill.js或者使用CDN版本。
npm install quill@1.3.6
<!-- or use the bellow CDN -->
<!-- Main Quill library -->
<!-- Theme included stylesheets -->
<!-- Core build with no theme, formatting, non-essential modules --> <link href="//cdn.quilljs.com/1.3.6/quill.core.css" rel="stylesheet">
4.TinyMCE - 商业功能的富文本编辑器
这个编辑器是一个商业库，带有大量的铃声和口哨。如果你有一些额外的钱，并希望拥有一个不头痛的强大的文本编辑器，TinyMCE是一个不错的选择。
优点
- 支持实时协作。
- 支持提及和评论。
- 先进的表格和复杂内容支持。
- 增强的媒体嵌入支持。
- 自动链接检查器。
缺点
- 需要购买订阅才能使用高级功能。
TinyMCE为你提供了核心（免费计划，功能有限）、基本（每月25美元）、专业（每月75美元）和灵活（自定义定价）等定价计划。
在做决定之前，你可以随时尝试免费版本或试用。TinyMCE提供了良好的文档，包括关于其功能和安装的所有细节。
5.KendoReact - 商业生产就绪的编辑器
Kendo可能是市场上最有名的商业UI组件库。
它是一个高度稳定的、可用于生产的库，毫无疑问，它有最好的客户支持服务。
优点
- 闪电般的性能。
- 高度的可定制性。
- 可用于生产应用。
- 全球化支持。
- 客户支持。
缺点
- 极其昂贵。
与免费编辑器相比，Kendo有一些奇妙的功能。如果你对文本编辑器有高度竞争性的业务需求，并且正在寻找一个无忧无虑的未来解决方案，那么这款软件适合你。
Kendo有3个不同的计划：KendoReact.KendoUI和DevCraft，每个开发者的永久许可证从899美元到1499美元不等。
与DevCraft相比，前两个套餐有一些限制，你可以在他们的网站上找到完整的比较。
奖励： TipTap - 免费的现代文本编辑器
这是我个人的最爱。尽管这个编辑器还在测试阶段，但有许多令人兴奋的功能。
TipTap是一个无头编辑器，它允许你完全自定义。这个编辑器也支持实时协作。
优点
- 可定制的用户界面。
- 键盘快捷键。
- 移动支持。
- 协作式编辑。
缺点
- 仍然是测试版（但很稳定，并有一个快速增长的开发者社区的支持）。
尽管相当新，TipTap在GitHub上有超过10K颗星，每周有93,000多次NPM下载。
如果你正在寻找一个免费的、功能丰富的、来自React的现代文本编辑器？在这种情况下，我强烈推荐TipTap供你试用。
# install with npm
# install with Yarn
总结
以上的富文本编辑器只是React可用的众多编辑器中的一个子集。然而，我介绍了6种不同的编辑器，并介绍了它们的优点和缺点，以便为你的需要挑选理想的编辑器。
我希望我的建议能帮助你为你的项目选择最好的富文本编辑器。不要忘记分享你使用这些库后的想法。
谢谢您的阅读！!
