10+ 个 React 富文本编辑器

2025-05-26

10+ 个 React 富文本编辑器

Slate - 用于构建富文本编辑器的完全可定制的框架。

Slate 可让您构建丰富、直观的编辑器，就像 Medium、Dropbox Paper 或 Google Docs 中的编辑器一样（它们正在成为网络上应用程序的赌注），而不会让您的代码库陷入复杂性。

  • 编辑器的“模式”是硬编码的，很难定制。粗体和斜体等功能开箱即用，但评论、嵌入，甚至更多特定领域的需求呢？

  • 通过编程方式转换文档非常复杂。以用户身份编写代码或许可行，但通过编程方式进行更改（这对于构建高级行为至关重要）却过于复杂，毫无必要。

  • 序列化为 HTML、Markdown 等似乎是事后才想到的。像将文档转换为 HTML 或 Markdown 这样的简单操作，需要编写大量样板代码，而这似乎是非常常见的用例。

  • 重新设计视图层似乎效率低下，而且限制颇多。大多数编辑器都自行开发了视图，而不是使用 React 等现有技术，因此你必须学习一整套充满新“陷阱”的系统。

  • 协同编辑并非预先设计好的。通常情况下，编辑器内部的数据表示方式使其无法用于实时协同编辑用例，除非彻底重写编辑器。

  • 这些代码库过于庞大，不够小巧，且无法复用。许多编辑器的代码库通常不会暴露可供开发人员复用的内部工具，导致开发人员不得不重新发明轮子。

  • 构建复杂的嵌套文档是不可能的。许多编辑器都是围绕简单的“扁平”文档设计的，这使得表格、嵌入和标题等内容难以理解，有时甚至无法实现。GitHub演示
    石板

Draft.js——一个用于构建文本编辑器的 React 框架。

Draft.js 是一个 JavaScript 富文本编辑器框架，专为 React 构建并由不可变模型支持。

  • 可扩展和可定制：我们提供构建模块，以实现各种丰富的文本创作体验，从基本文本样式到嵌入式媒体。
  • 声明性富文本： Draft.js 无缝融入 React 应用程序，使用熟悉的声明性 API 抽象出渲染、选择和输入行为的细节。
  • *不可变编辑器状态：* Draft.js 模型采用 immutable-js 构建，提供具有功能状态更新的 API，并积极利用数据持久性实现可扩展的内存使用。Draft.js 演示 GitHub

React Draft 所见即所得

使用 ReactJS 和 DraftJS 库构建的所见即所得编辑器。

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


演示 GitHub

Quill 富文本编辑器

Quill 是一款免费开源的所见即所得 (WYSIWYG) 编辑器，专为现代 Web 打造。凭借其可扩展的架构和丰富的 API，您可以完全自定义它以满足您的需求。部分内置功能包括：

  • 快速且轻量
  • 语义标记
  • 浏览器之间的标准化 HTML
  • 跨浏览器支持，包括 Chrome、Firefox、Safari 和 IE 9+图片描述

演示 GitHub

React 电子邮件编辑器

适用于 React.js 的拖放式电子邮件编辑器组件。Unlayer 开发的这款出色的拖放式电子邮件编辑器，是 React.js 的封装组件。这是您应用中功能最强大、开发者最友好的可视化电子邮件构建器。

  • editorId 字符串 HTML div 编辑器嵌入容器的 id（可选）
  • 编辑器容器的样式对象（默认 {}）
  • minHeight 字符串初始化编辑器的最小高度（默认 500px）
  • onLoad 编辑器实例创建时调用的函数
  • onReady 编辑器加载完成后调用的函数
  • 传递给 Unlayer 编辑器实例的选项对象选项（默认 {}）
  • tools 内置和自定义工具的对象配置（默认 {}）
  • 外观和主题的外观对象配置（默认{}）
  • projectId Integer Unlayer 项目 ID（可选）

图片描述

演示 GitHub

React 的 Monaco 编辑器

用于 React 的 Monaco 编辑器 - 在任何 React 应用程序中使用 monaco-editor，而无需使用 webpack（或 rollup/parcel/etc）配置文件/插件。

除了类型之外，该库还导出 Editor 和 DiffEditor 组件，以及加载器实用程序和 useMonaco 钩子：

import Editor, { DiffEditor, useMonaco, loader } from "@monaco-editor/react";

演示 GitHub

合金编辑器

Alloy Editor 是一款基于 CKEditor 构建的现代所见即所得编辑器，旨在创建现代而华丽的网页内容。

  • 智能工具栏出现在所选文本的旁边，并根据上下文提供不同的功能
  • 轻松添加您自己的按钮（请参阅文档中的“marquee”示例）
  • 从剪贴板粘贴图像，或从另一个应用程序拖放图像
  • 插入设备相机中的图像！
  • 从任何网页粘贴富文本并保留其格式
  • CKEditor 的全部样式功能...
  • ...具有更加现代化的用户界面
  • 核心与 UI 完全分离
  • 示例 UI 是用 React 构建的
  • 插件架构

合金编辑器
演示 GitHub

react-contenteditable

对具有可编辑内容的 div 做出反应的组件。



import React from 'react'
import ContentEditable from 'react-contenteditable'

class MyComponent extends React.Component {
  constructor() {
    super()
    this.contentEditable = React.createRef();
    this.state = {html: "<b>Hello <i>World</i></b>"};
  };

  handleChange = evt => {
    this.setState({html: evt.target.value});
  };

  render = () => {
    return <ContentEditable
              innerRef={this.contentEditable}
              html={this.state.html} // innerHTML of the editable div
              disabled={false}       // use true to disable editing
              onChange={this.handleChange} // handle innerHTML change
              tagName='article' // Use a custom HTML tag (uses a div by default)
            />
  };
};
Enter fullscreen mode Exit fullscreen mode

演示 GitHub

Megadraft - 富文本编辑器

Megadraft 是一个基于 Facebook 的 Draft.JS 构建的富文本编辑器，具有良好的默认组件基础和可扩展性。



import React from "react";
import ReactDOM from "react-dom";
import {MegadraftEditor, editorStateFromRaw} from "megadraft";

//Import megadraft.css
import 'megadraft/dist/css/megadraft.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {editorState: editorStateFromRaw(null)};
  }

  onChange = (editorState) => {
    this.setState({editorState});
  }

  render() {
    return (
      //Add some margin left to show plugins sidebar
      <div style={{marginLeft: 80}}>
        <MegadraftEditor
          editorState={this.state.editorState}
          onChange={this.onChange}
          placeholder='Add some text'/>
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);
Enter fullscreen mode Exit fullscreen mode

演示 GitHub

React-web-editor

react-web-editor 是一个所见即所得的编辑器库。您可以调整组件的大小并拖动它。它还具有简单的富文本编辑器。

  • React Web 编辑器是一个提供可以动态改变 UI 的组件钩子的库。

  • 它支持调整大小、可拖动和拖放等功能，您还可以动态上传图像以及设置组件的颜色和文本样式。

  • 块状组件内置有坐标标签，显示当前组件的位置，以及引导线，告诉您当前组件是否集中。

  • 最终，你可以创建一个可以动态改变网页 UI 的编辑器页面。Demo GitHub
    图片描述

蒂普塔普

基于 ProseMirror 的无头、与框架无关且可扩展的富文本编辑器。
React-web-editor

演示 GitHub

来源：bestofreactjs.com

文章来源：https://dev.to/pccprint/10-react-rich-text-editors-1hh5
Devto 翻译
PREV
使用 Visual Studio Code 中的键盘提高工作效率
NEXT
Git Squash 简化