关于react.js:最好用的-5-款-React-富文本编辑器

本文首发:最好用的 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-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。可依据本人的工作流,定制开发。无需繁琐的前端开发,只须要简略拖拽,即可疾速搭建企业外部工具。数月的开发工作量,应用卡拉云后可缩减至数天,欢送收费试用卡拉云。

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

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

扩大浏览:

  • MySQL 工夫戳用什么类型 – MySQL 工夫函数详解
  • 最好用的七大顶级 API 接口测试工具
  • 最好用的 5 款 React 富文本编辑器
  • 如何在 MySQL / MariaDB 中跳过多张表导出或指定多张表导出备份
  • 如何将 MySQL / MariaDB 的查问后果保留到文件
  • 如何在 MySQL 中导入和导出 CSV / Excel 文件

如果感觉本文对你有帮忙,还请点个赞。欢送评论区一起探讨。

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据