热门推荐：ReactJS的最佳富文本编辑器组件(WYSIWYG)合集

本文概述

• 15.Jodit React
• 14.Alloy Editor React
• 13.Suneditor React
• 12.Slate
• 11.React Froala WYSIWYG
• 10.React Summernote
• 9.React Quill
• 8.Dante2
• 7.React Page
• 6.React Draft WYSIWYG
• 5.React Prosemirror
• 4.React RTE
• 3.Draft.js
• 2.CKEditor React
• 1.TinyMCE React

富文本编辑器是不同类型应用程序的关键组件, 从博客到电子商务的管理工具, 无所不在。即使在单页应用程序中, 也需要以某种方式嵌入它们。对于ReactJS框架, 可以使用许多组件来实现编辑器。在此顶部, 我们将与你分享React.js最好的15种富文本编辑器组件。

15.Jodit React

Jodit是一款出色的开源WYSIWYG编辑器, 使用纯TypeScript编写, 无需使用其他库。

14.Alloy Editor React

基于CKEditor的WYSIWYG编辑器, 具有完全重写的UI。它具有以下特点：

• 智能工具栏出现在所选文本的附近, 并根据上下文提供不同的功能
• 轻松添加你自己的按钮(请参阅文档中的”选取框”示例)
• 从剪贴板粘贴图像, 或从其他应用程序拖放图像
• 插入设备相机中的图像！
• 从任何网页粘贴富文本并保留其格式
• CKEditor的全部样式功能…
• …具有更现代的用户界面
• 核心与用户界面完全分离
• 示例UI是使用React构建的
• 插件架构

13.Suneditor React

该库作为SunEditor的纯React组件提供。 Suneditor是用于Web应用程序的轻巧, 灵活, 可自定义的WYSIWYG文本编辑器。

• 从Microsoft Word和Excel粘贴。
• 自定义表选择, 合并和拆分。
• 媒体嵌入, 图像上传。
• 可以使用CodeMirror。
• 和..许多其他功能:)

12.Slate

用于构建富文本编辑器的完全可自定义的框架。 (当前处于beta版。)Slate允许你构建功能丰富, 直观的编辑器, 例如Medium, Dropbox Paper或Google Docs中的那些, 这些正在成为Web应用程序的赌注, 而你的代码库却不会陷入复杂性的泥潭。之所以可以这样做, 是因为其所有逻辑都是通过一系列插件来实现的, 因此你永远不会受到”核心”中内容的束缚。你可以将其视为基于React和Immutable构建的contenteditable的可插入实现。它的灵感来自于Draft.js, Prosemirror和Quill之类的库。

11.React Froala WYSIWYG

react-froala-wyswiyg提供了到Froala WYSIWYG编辑器VERSION 2的React绑定。Froala Editor是一个漂亮的Javascript Web编辑器, 易于开发人员集成, 你的用户将爱上其简洁的设计。

10.React Summernote

Summernote是一个超级简单的WYSIWYG的Bootstrap编辑器。它需要Bootstrap和jQuery, Summernote支持自动完成功能, 有助于打字。

9.React Quill

Quill是为现代Web构建的免费, 开源WYSIWYG编辑器。凭借其可扩展的体系结构和表达性的API, 你可以完全自定义它以满足你的需求。一些内置功能包括：

• 快速轻巧
• 语义标记
• 浏览器之间的标准化HTML
• 跨浏览器支持, 包括Chrome, Firefox, Safari和IE 9+

8.Dante2

Dante2是对Draft-js(只是在DraftJs之上构建的另一个中等克隆)的dante编辑器的完整重写。 Dante的先前版本在很大程度上依赖于DOM操作, 这导致表示和逻辑的混合。即使使用他们的模块化插件系统, 这种情况也假设在所有功能上都可以使用sphagetti模型。这种方法的最大问题是：如果你想进行更改以影响用户内容的表示方式, 比如说你可能想更改段落的默认标记, 则可能会结束更新数据库中的所有内容, 因为处理”仅DOM”假设你将html保存到数据库中, 对吧？

7.React Page

React Page是用React编写的Web的智能, 可扩展且现代的编辑器(” WYSIWYG”)。如果你厌倦了contenteditable的局限性, 那么你来对地方了。

6.React Draft WYSIWYG

React Draft Wysiwyg是基于Draft.js的富文本编辑器组件。特点：

• 可配置的工具栏, 带有添加/删除控件的选项。
• 用于更改工具栏中控件顺序的选项。
• 用于向工具栏添加自定义控件的选项。
• 用于更改工具栏中的样式和图标的选项。
• 有条件显示隐藏工具栏的选项。
• 支持内联样式：粗体, 斜体, 下划线, StrikeThrough, 代码, 下标, 上标。
• 支持块类型：段落, H1-H6, 块引用, 代码。
• 支持设置字体大小和字体系列以及添加自定义类型的选项。
• 支持有序/无序列表和缩进。
• 支持文本对齐。
• 支持为文本或背景着色, 以及添加自己的颜色值的选项。
• 支持添加/编辑链接
• 选择150多种表情符号, 并选择添加自己的unicode表情符号。
• 支持提及。
• 支持主题标签。
• 支持添加/上传图像。
• 支持对齐图像, 设置高度, 宽度。
• 支持嵌入式链接, 可灵活设置高度和宽度。
• 提供选项以删除添加的样式。
• 撤消和重做选项。
• RTL和拼写检查的可配置行为。
• 支持占位符。
• 支持WAI-ARIA支持属性
• 使用编辑器作为受控或不受控制的React组件。
• 支持将编辑器内容转换为HTML, JSON, Markdown。
• 支持将编辑器生成的HTML转换回编辑器内容。
• 支持国际化。

5.React Prosemirror

用于在网络上构建富文本编辑器的工具包。理想的内容编辑器可以生成结构化的, 语义上有意义的文档, 但是这样做的方式便于用户理解。 ProseMirror试图弥合Markdown文本编辑和经典WYSIWYG编辑器之间的差距。

它通过实现WYSIWYG样式的编辑界面来实现此目的, 以使文档比纯HTML更加受约束和结构化。你可以自定义编辑器创建的文档的形状和结构, 并根据应用程序的需要对其进行定制。

4.React RTE

这是一个完全内置于React中的UI组件, 旨在替代CKEditor, TinyMCE和其他富文本” WYSIWYG”编辑器, 成为全功能的te​​xtarea替代品。它基于Facebook出色的开放源代码Draft.js, 该代码经过性能测试和生产测试。

RichTextEditor是主要的编辑器组件。它由Draft.js <Editor>, 一些UI组件(例如工具栏)以及一些有关通过HTML / Markdown获取和设置内容的有用抽象组成。 RichTextEditor设计为像文本区域一样使用, 除了它不是值是字符串, 它是带有toString的对象。使用createValueFromString(markup, ‘html’)从字符串创建值也很容易。

3.Draft.js

主页

Draft.js是一个框架, 用于在React中构建富文本编辑器, 该框架由不可变模型提供支持并跨浏览器差异进行抽象。 Draft.js使你可以轻松构建任何类型的富文本输入, 无论你是要支持几种嵌入式文本样式, 还是构建复杂的文本编辑器以撰写长篇文章。

2.CKEditor React

文献资料

具有模块化体系结构的现代JavaScript RTF编辑器。它干净的用户界面和功能为创建语义内容提供了理想的WYSIWYGUX。

• 用MVC架构, 自定义数据模型, 虚拟DOM编写在ES6中。
• 响应式图像和媒体嵌入(视频, tweet)。
• 自定义输出格式：HTML和Markdown支持。
• 通过自动格式化和协作来提高生产力。
• 通过设计可扩展和可定制。

1.TinyMCE React

文献资料

TinyMCE是基于平台的独立于Web的Javascript HTML WYSIWYG编辑器控件, 在LGPL下作为开源发布。开发人员可以在自己的Web项目中使用TinyMCE, 以使最终用户能够向网站或其他应用程序添加/编辑内容。 TinyMCE是可自定义的, 因此你可以指定工具栏上的哪些按钮等。许多工具栏选项都可作为插件使用, 并且在调用编辑器时, 只需在JavaScript中添加适当的参数即可。官方项目还提供了一个React组件, 你可以在项目中轻松安装和使用它。

如果你知道ReactJS的另一个很棒的开源Rich Text Editor组件, 请在注释框中与社区共享。