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

HiJiangChuan · · 1025 次点击 · · 开始浏览    
这是一个创建于 的文章,其中的信息可能已经有所发展或是发生改变。

![react 富文本编辑器](https://kalacloud.com/static/e4f1295739c94edeb0fdaad95153e5a7/ef245/01_header.jpg) 本文首发:[最好用的 5 款 React 富文本编辑器 - 卡拉云](https://kalacloud.com/blog/top-5-rich-text-editors-for-react/) 富文本编辑器常用于网络上各种形式的内容展示,从简单的静态博客到复杂的内容管理系统。它应用于多种应用程序,如博客、文章、列表以及更强大的界面 —— 电商网站商品详情和博客上的。然而,从这么多功能各异的编辑器中挑选出一个合适的并不容易。 我测评了 5 款 React 富文本编辑器,比较了他们编辑器的核心功能, 希望我的测评可以帮你找到最合适你应用场景的编辑器。如果你完全不会前端,也不用担心,可以使用卡拉云,仅需简单拖拽即可生成「富文本」编辑器,卡拉云帮你快速搭建属于你自己的应用程序,详见本文文尾。 ## 1.[Draft.js](https://draftjs.org/) — 能够满足基础需求的免费编辑器 ![Draft.js react富文本编辑器](https://kalacloud.com/static/25e943305175173db5d2443a3468cb5a/9937c/02-draft-js.png) 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](https://slatejs.org/) — 支持复杂内容格式的免费编辑器 ![Slate.js react富文本编辑器](https://kalacloud.com/static/f8d568b336c276df88cff8942e75f38c/0f586/03-slate-js.png) 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](https://quilljs.com/) — 带有主题的免费 API 的文本编辑器 ![Quill.js react富文本编辑器](https://kalacloud.com/static/e0b5819b2689ca77cbd2ba0f980e46b0/17d12/04-quill-js.png) Quill.js 是一个快速、轻量级的富文本编辑器。它支持跨平台和跨浏览器,其主题可扩展、可配置,是你在诸多平台的现代浏览器上能找到功能流畅的最佳选择。 优点 - 易于设置和使用。 - 跨平台和浏览器支持。 - 预设编辑器样式的主题支持。 - 输出 HTML 格式的内容,无需像其他编辑器一样解析。 缺点 - 有限的定制功能。 - 较少的更新和补丁。 - 可能的 XSS 安全漏洞。 使用 yarn 或 npm 安装: ``` npm install react-quill yarn add react-quill ``` ## 4.[TinyMCE](https://tiny.cloud/) — 功能丰富的商业性编辑器 ![TinyMCE react富文本编辑器](https://kalacloud.com/static/246d8ea931120c7016794cf162879b4f/ce0a7/05-tinymce-js.png) TinyMCE 是一款非常强大的 WYSIWYG 富文本编辑器,具有高度的可定制、可扩展性。如果你预算充足同时希望找到一款没有后顾之忧的编辑器,那么就是它了。 优点 - 自动链接检查器。 - 支持实时协作。 - 支持提及和评论。 - 支持增强的媒体嵌入。 - 支持高级表格和复杂的内容格式。 缺点 - 需要付费订阅才能使用其高级功能。 做决定前你可以先试用免费版本, TinyMCE 提供了详尽的技术文档,从如何安装到功能介绍,写的非常清晰。 ## 5.[KendoReact](https://telerik.com/kendo-react-ui/) — 可直接用于商业性产品的编辑器 ![KendoReact](https://kalacloud.com/static/68e0e1c1636757cbeae6b2f5bed6f300/b5a09/06-KendoReact.png) KendoReact 是专业的 UI 组件和数据可视化库,旨在帮助你使用 React 更快地设计和构建业务应用程序。 优点 - 闪电般的性能。 - 高度的可定制。 - 可直接用于开发应用程序。 缺点 - 价格偏贵。 与免费的富文本编辑器相比,Kendo 有许多非常棒的功能。如果你对文本编辑器有极具竞争力的业务性需求,同时也在寻找一个日后也没有麻烦的编辑器, 那么就是 KendoReact 了。 ## 6.[TipTap](https://tiptap.dev/) — 样式很有调调的免费编辑器(多送一款编辑器测评) ![TipTap 富文本编辑器](https://kalacloud.com/static/5507badab3a8981f4693dd55f23dbf34/7be33/07-tiptap-js.png) 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 富文本编辑器的优缺点,我们可以根据自己工作中的实际场景来对编辑器进行挑选。 如果你想搭建自己的后台工具,但你对前端并没有那么熟悉,可以考虑使用卡拉云,**卡拉云内置了富文本编辑器,完全不用你操心前端,只需要简单拖拽即可立即在页面上生成富文本编辑器。** ![卡拉云富文本编辑器](https://kalacloud.com/static/1b5d5ae5c23e7f79927a7c2ecf774033/d3e24/08-kalacloud-rich.jpg) 卡拉云是新一代低代码开发工具,免安装部署,可一键接入包括 MySQL 在内的常见数据库及 API。可根据自己的工作流,定制开发。无需繁琐的前端开发,只需要简单拖拽,即可快速搭建企业内部工具。**数月的开发工作量,使用卡拉云后可缩减至数天,[欢迎免费试用卡拉云](https://kalacloud.com/)。** 卡拉云可根据公司工作流需求,轻松搭建数据看板或其他内部工具,并且可一键分享给组内的小伙伴。 ![使用卡拉云轻松搭建企业内部工具](https://www.kalacloud.com/5400a60956e16d655e0297c5d6e5a8d2/98-kalacloud-gif.gif) 更多数据库相关教程可访问 [卡拉云](https://kalacloud.com/) 查看。 扩展阅读: - [MySQL 时间戳用什么类型 - MySQL 时间函数详解](https://kalacloud.com/blog/difference-between-mysql-datetime-and-timestamp-datatypes/) - [最好用的七大顶级 API 接口测试工具](https://kalacloud.com/blog/api-testing-tools/) - [最好用的 5 款 React 富文本编辑器](https://kalacloud.com/blog/top-5-rich-text-editors-for-react/) - [如何在 MySQL / MariaDB 中跳过多张表导出或指定多张表导出备份](https://kalacloud.com/blog/how-to-dump-database-and-ignore-or-specific-some-tables-with-mysqldump-in-mysql/) - [如何将 MySQL / MariaDB 的查询结果保存到文件](https://kalacloud.com/blog/how-to-save-mysql-mariadb-query-output-to-a-file/) - [如何在 MySQL 中导入和导出 CSV / Excel 文件](https://kalacloud.com/blog/how-to-import-and-export-excel-csv-in-mysql-from-terminal/) 如果觉得本文对你有帮助,还请点个赞。欢迎评论区一起讨论。

有疑问加站长微信联系(非本文作者))

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:692541889

1025 次点击  
加入收藏 微博
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传