syncfusion-react-rich-text-editor

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Syncfusion React Rich Text Editor

Syncfusion React 富文本编辑器

A WYSIWYG (What You See Is What You Get) editor for creating and formatting rich content as HTML or Markdown. Supports toolbars, media insertion, AI assistance, smart editing features, form validation, and deep customization.

一款所见即所得（WYSIWYG）编辑器，可创建并将富内容格式化为HTML或Markdown格式。支持工具栏、媒体插入、AI辅助、智能编辑功能、表单验证以及深度自定义。

When to Use This Skill

何时使用该技能

Setting up a rich text / WYSIWYG editor in a React app
Configuring toolbar items, types, or positions
Switching between HTML and Markdown editor modes
Inserting images, video, audio, or files
Working with smart editing features: emoji, slash menu, mentions, mail merge
Integrating AI assistant into the editor
Handling editor value: get, set, two-way binding, auto-save, import/export
Applying paste cleanup, form validation, or read-only mode
Customizing styles, accessibility, or keyboard shortcuts

在React应用中搭建富文本/WYSIWYG编辑器
配置工具栏项、类型或位置
在HTML和Markdown编辑模式间切换
插入图片、视频、音频或文件
使用智能编辑功能：表情、斜杠菜单、提及、邮件合并
在编辑器中集成AI助手
处理编辑器值：获取、设置、双向绑定、自动保存、导入/导出
应用粘贴内容清理、表单验证或只读模式
自定义样式、无障碍访问或键盘快捷键

Quick Start

快速开始

bash

npm install @syncfusion/ej2-react-richtexteditor

tsx

// src/App.css - add CSS imports
// @import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
// @import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
// @import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
// @import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css';
// @import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
// @import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
// @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
// @import '../node_modules/@syncfusion/ej2-richtexteditor/styles/tailwind3.css';

import {
  HtmlEditor, Image, Inject, Link,
  QuickToolbar, RichTextEditorComponent, Toolbar
} from '@syncfusion/ej2-react-richtexteditor';

function App() {
  return (
    <RichTextEditorComponent height={450}>
      <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
    </RichTextEditorComponent>
  );
}
export default App;

bash

npm install @syncfusion/ej2-react-richtexteditor

tsx

// src/App.css - add CSS imports
// @import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
// @import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
// @import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
// @import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css';
// @import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
// @import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
// @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
// @import '../node_modules/@syncfusion/ej2-richtexteditor/styles/tailwind3.css';

import {
  HtmlEditor, Image, Inject, Link,
  QuickToolbar, RichTextEditorComponent, Toolbar
} from '@syncfusion/ej2-react-richtexteditor';

function App() {
  return (
    <RichTextEditorComponent height={450}>
      <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
    </RichTextEditorComponent>
  );
}
export default App;

Module Injection Reference

模块注入参考

Inject only the modules your app needs — this keeps the bundle lean.

Module	What it enables
`Toolbar`	Toolbar rendering and commands
`HtmlEditor`	HTML editing mode (default)
`MarkdownEditor`	Markdown editing mode
`Link`	Hyperlink insert/edit/remove
`Image`	Image insertion and management
`Video`	Video insertion
`Audio`	Audio insertion
`Table`	HTML table insert/edit
`QuickToolbar`	Floating toolbar for images/links
`PasteCleanup`	Clean up pasted content formatting
`ClipboardCleanup`	Clean clipboard on copy/cut
`FileManager`	File browser for server-side images
`Resize`	Resizable editor area
`Count`	Character count display
`EmojiPicker`	Emoji search and insert
`SlashMenu`	Slash `/` command menu
`ImportExport`	Import Word, export Word/PDF
`CodeBlock`	Inline code block formatting
`AutoFormat`	Auto-convert Markdown syntax while typing
`FormatPainter`	Copy-paste text formatting
`AIAssistant`	AI assistant integration

仅注入应用所需的模块，可保持包体积轻量化。

模块	功能说明
`Toolbar`	工具栏渲染及命令支持
`HtmlEditor`	HTML编辑模式（默认）
`MarkdownEditor`	Markdown编辑模式
`Link`	超链接插入/编辑/删除
`Image`	图片插入及管理
`Video`	视频插入
`Audio`	音频插入
`Table`	HTML表格插入/编辑
`QuickToolbar`	图片/链接的浮动工具栏
`PasteCleanup`	清理粘贴内容的格式
`ClipboardCleanup`	复制/剪切时清理剪贴板
`FileManager`	服务端图片的文件浏览器
`Resize`	编辑器区域可调整大小
`Count`	字符计数显示
`EmojiPicker`	表情搜索及插入
`SlashMenu`	斜杠 `/` 命令菜单
`ImportExport`	导入Word，导出Word/PDF
`CodeBlock`	内联代码块格式化
`AutoFormat`	输入时自动转换Markdown语法
`FormatPainter`	复制粘贴文本格式
`AIAssistant`	AI助手集成

Navigation Guide

导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

Installation, npm setup, CSS imports
Basic component implementation
Module injection patterns
Toolbar configuration basics
Running the application

📄 阅读： references/getting-started.md

安装、npm配置、CSS导入
基础组件实现
模块注入模式
工具栏配置基础
运行应用

Editor Modes

编辑器模式

📄 Read: references/editor-modes.md

HTML editor mode (default WYSIWYG)
Markdown editor mode with preview
IFrame vs DIV mode
Inline editing
Resizable editor

📄 阅读： references/editor-modes.md

HTML编辑器模式（默认所见即所得）
带预览的Markdown编辑器模式
IFrame与DIV模式
内联编辑
可调整大小的编辑器

Toolbar Configuration

工具栏配置

📄 Read: references/toolbar-configuration.md

Default toolbar items
Toolbar types: Expand, MultiRow, Scrollable
Toolbar position (top/bottom)
Sticky/floating toolbar
Quick toolbar for images and links

📄 阅读： references/toolbar-configuration.md

默认工具栏项
工具栏类型：展开式、多行、滚动式
工具栏位置（顶部/底部）
粘性/浮动工具栏
图片和链接的快捷工具栏

Toolbar Tools

工具栏工具

📄 Read: references/toolbar-tools.md

Built-in tools reference (Bold, Italic, Formats, etc.)
Custom toolbar items with templates
Text formatting tools
Styling tools (font, color, alignment)
Fullscreen tool

📄 阅读： references/toolbar-tools.md

内置工具参考（加粗、斜体、格式等）
带模板的自定义工具栏项
文本格式化工具
样式工具（字体、颜色、对齐方式）
全屏工具

Inserting Media

插入媒体

📄 Read: references/insert-media.md

Inserting images (URL, upload, base64)
Video insertion and configuration
Audio insertion
File browser integration

📄 阅读： references/insert-media.md

插入图片（URL、上传、base64）
视频插入及配置
音频插入
文件浏览器集成

Inserting Content

插入内容

📄 Read: references/insert-content.md

Tables: insert, resize, merge cells
Hyperlinks: create, edit, open in new tab
Code blocks
Custom format blocks

📄 阅读： references/insert-content.md

表格：插入、调整大小、合并单元格
超链接：创建、编辑、在新标签页打开
代码块
自定义格式块

Smart Editing Features

智能编辑功能

📄 Read: references/smart-editing.md

Emoji picker
Slash menu (type
```
/
```
to open)
Mentions (tag users)
Mail merge

📄 阅读： references/smart-editing.md

表情选择器
斜杠菜单（输入
```
/
```
打开）
提及（标记用户）
邮件合并

Managing Editor Value

管理编辑器值

📄 Read: references/editor-value.md

Setting initial value
Getting value via property, event, or method
Two-way binding with React state
Auto-save with
```
saveInterval
```
Import/export Word and PDF
Markdown preview
Character count and maxLength
Source code view

📄 阅读： references/editor-value.md

设置初始值
通过属性、事件或方法获取值
与React状态双向绑定
利用
```
saveInterval
```
实现自动保存
Word和PDF的导入/导出
Markdown预览
字符计数及最大长度限制
源代码视图

Paste & Clipboard

粘贴与剪贴板

📄 Read: references/paste-clipboard.md

Paste cleanup configuration
Clipboard cleanup on copy/cut
Executing editor commands programmatically

📄 阅读： references/paste-clipboard.md

粘贴内容清理配置
复制/剪切时清理剪贴板
以编程方式执行编辑器命令

Validation & Security

验证与安全

📄 Read: references/validation-security.md

Form support and submission
XHTML validation
Read-only mode
XSS prevention

📄 阅读： references/validation-security.md

表单支持与提交
XHTML验证
只读模式
XSS防护

AI Assistant

AI助手

📄 Read: references/ai-assistant.md

AI integration setup
AI assistant properties
Customizing AI toolbar and responses

📄 阅读： references/ai-assistant.md

AI集成配置
AI助手属性
自定义AI工具栏及响应

Accessibility & Globalization

无障碍访问与全球化

📄 Read: references/accessibility.md

WCAG 2.1 compliance
Keyboard shortcuts
Globalization, localization, RTL
Style encapsulation

📄 阅读： references/accessibility.md

符合WCAG 2.1标准
键盘快捷键
全球化、本地化、RTL布局
样式封装

Styling & Customization

样式与自定义

📄 Read: references/styling-customization.md

CSS variable customization
Style encapsulation (shadow DOM)
Third-party integrations (CodeMirror, Mention library)
Spell/grammar check

📄 阅读： references/styling-customization.md

CSS变量自定义
样式封装（Shadow DOM）
第三方集成（CodeMirror、提及库）
拼写/语法检查

Undo / Redo

撤销/重做

📄 Read: references/undo-redo.md

Undo/redo manager behavior
Keyboard shortcuts
Programmatic undo/redo

📄 阅读： references/undo-redo.md

撤销/重做管理器行为
键盘快捷键
程序化撤销/重做

Enter Key & Selection

回车键与选区

📄 Read: references/enter-key-selection.md

Enter key configuration (P, BR, DIV)
Selection API
Cursor positioning

📄 阅读： references/enter-key-selection.md

回车键配置（P、BR、DIV）
选区API
光标定位

Events

事件

📄 Read: references/events.md

Infer EventArgs Type value for each events
Lifecycle events:
```
created
```
,
```
destroyed
```
,
```
focus
```
,
```
blur
```
Content change:
```
change
```
event with
```
ChangeEventArgs
```
Action events:
```
actionBegin
```
(cancelable),
```
actionComplete
```
Toolbar events:
```
toolbarClick
```
,
```
updatedToolbarStatus
```

Dialog & popup events:

beforeDialogOpen/Close

beforePopupOpen/Close

Media & file events: image/audio/video upload, select, remove, drop
Paste & clipboard events:
```
beforePasteCleanup
```
,
```
afterPasteCleanup
```

AI Assistant events:

aiAssistantPromptRequest

aiAssistantToolbarClick

Resize, slash menu, selection, quick toolbar, import/export events

📄 阅读： references/events.md

推断每个事件的EventArgs类型值
生命周期事件：
```
created
```
、
```
destroyed
```
、
```
focus
```
、
```
blur
```
内容变更：带
```
ChangeEventArgs
```
的
```
change
```
事件
操作事件：
```
actionBegin
```
（可取消）、
```
actionComplete
```
工具栏事件：
```
toolbarClick
```
、
```
updatedToolbarStatus
```

对话框与弹出层事件：

beforeDialogOpen/Close

、

beforePopupOpen/Close

媒体与文件事件：图片/音频/视频的上传、选择、删除、拖放
粘贴与剪贴板事件：
```
beforePasteCleanup
```
、
```
afterPasteCleanup
```

AI助手事件：

aiAssistantPromptRequest

、

aiAssistantToolbarClick

调整大小、斜杠菜单、选区、快捷工具栏、导入/导出事件

Methods

方法

📄 Read: references/methods.md

Focus & content:

focusIn

focusOut

getHtml

getText

getSelectedHtml

Toolbar:

enableToolbarItem

disableToolbarItem

removeToolbarItem

Dialog:
```
showDialog
```
,
```
closeDialog
```
with
```
DialogType
```
enum
Selection:
```
selectAll
```
,
```
getRange
```
,
```
selectRange
```
Undo/redo:
```
clearUndoRedo
```

AI Assistant:

executeAIPrompt

addAIPromptResponse

getAIPromptHistory

clearAIPromptHistory

Utility:

executeCommand

(all

CommandName

values),

sanitizeHtml

destroy

📄 阅读： references/methods.md

焦点与内容：

focusIn

、

focusOut

、

getHtml

、

getText

、

getSelectedHtml

工具栏：

enableToolbarItem

、

disableToolbarItem

、

removeToolbarItem

对话框：带
```
DialogType
```
枚举的
```
showDialog
```
、
```
closeDialog
```
选区：
```
selectAll
```
、
```
getRange
```
、
```
selectRange
```
撤销/重做：
```
clearUndoRedo
```

AI助手：

executeAIPrompt

、

addAIPromptResponse

、

getAIPromptHistory

、

clearAIPromptHistory

工具类：

executeCommand

（支持所有

CommandName

值）、

sanitizeHtml

、

destroy

Properties Reference

属性参考

📄 Read: references/properties.md

Core:

height

width

enabled

readonly

placeholder

cssClass

Toolbar:

toolbarSettings

quickToolbarSettings

floatingToolbarOffset

Editor mode & behavior:

editorMode

iframeSettings

inlineMode

enterKey

Value & content:

value

maxLength

showCharCount

saveInterval

enableHtmlSanitizer

Media:

insertImageSettings

insertVideoSettings

insertAudioSettings

fileManagerSettings

Font, color & format:

fontFamily

fontSize

fontColor

backgroundColor

format

codeBlockSettings

Paste:

pasteCleanupSettings

enableClipboardCleanup

AI Assistant:
```
aiAssistantSettings
```
(full configuration reference)
Import/export:
```
importWord
```
,
```
exportWord
```
,
```
exportPdf
```

Misc:

undoRedoSteps

keyConfig

slashMenuSettings

emojiPickerSettings

📄 阅读： references/properties.md

核心：

height

、

width

、

enabled

、

readonly

、

placeholder

、

cssClass

工具栏：

toolbarSettings

、

quickToolbarSettings

、

floatingToolbarOffset

编辑器模式与行为：

editorMode

、

iframeSettings

、

inlineMode

、

enterKey

值与内容：

value

、

maxLength

、

showCharCount

、

saveInterval

、

enableHtmlSanitizer

媒体：

insertImageSettings

、

insertVideoSettings

、

insertAudioSettings

、

fileManagerSettings

字体、颜色与格式：

fontFamily

、

fontSize

、

fontColor

、

backgroundColor

、

format

、

codeBlockSettings

粘贴：

pasteCleanupSettings

、

enableClipboardCleanup

AI助手：
```
aiAssistantSettings
```
（完整配置参考）
导入/导出：
```
importWord
```
、
```
exportWord
```
、
```
exportPdf
```

其他：

undoRedoSteps

、

keyConfig

、

slashMenuSettings

、

emojiPickerSettings

How-To Guides

操作指南

📄 Read: references/how-to.md

Capture Ctrl keys to update value
Change default font family
Check uploaded image size
Customize placeholder style
Customize shortcut keys
File attachment
Format code blocks
Position cursor at end of content
Rename images on server
RTE inside Dialog or Tab
Set cursor at specific range
Tailwind preflight fix
Update value programmatically

📄 阅读： references/how-to.md

捕获Ctrl键以更新值
修改默认字体族
检查上传图片大小
自定义占位符样式
自定义快捷键
文件附件
格式化代码块
将光标定位到内容末尾
在服务端重命名图片
在Dialog或Tab中使用富文本编辑器
将光标定位到特定范围
Tailwind预修复
以编程方式更新值

Common Patterns

常见模式

Read value on change

值变更时读取内容

tsx

import { ChangeEventArgs } from '@syncfusion/ej2-react-richtexteditor';

function App() {
  const onChange = (args: ChangeEventArgs) => {
    console.log(args.value); // HTML string
  };
  return (
    <RichTextEditorComponent change={onChange}>
      <Inject services={[Toolbar, HtmlEditor]} />
    </RichTextEditorComponent>
  );
}

tsx

import { ChangeEventArgs } from '@syncfusion/ej2-react-richtexteditor';

function App() {
  const onChange = (args: ChangeEventArgs) => {
    console.log(args.value); // HTML string
  };
  return (
    <RichTextEditorComponent change={onChange}>
      <Inject services={[Toolbar, HtmlEditor]} />
    </RichTextEditorComponent>
  );
}

Controlled value with React state

与React状态双向绑定

tsx

const [content, setContent] = useState('<p>Hello</p>');
<RichTextEditorComponent value={content} change={(e) => setContent(e.value)}>
  <Inject services={[Toolbar, HtmlEditor]} />
</RichTextEditorComponent>

tsx

const [content, setContent] = useState('<p>Hello</p>');
<RichTextEditorComponent value={content} change={(e) => setContent(e.value)}>
  <Inject services={[Toolbar, HtmlEditor]} />
</RichTextEditorComponent>

Markdown mode

Markdown模式

tsx

import { MarkdownEditor } from '@syncfusion/ej2-react-richtexteditor';
<RichTextEditorComponent editorMode="Markdown">
  <Inject services={[Toolbar, MarkdownEditor]} />
</RichTextEditorComponent>

tsx

import { MarkdownEditor } from '@syncfusion/ej2-react-richtexteditor';
<RichTextEditorComponent editorMode="Markdown">
  <Inject services={[Toolbar, MarkdownEditor]} />
</RichTextEditorComponent>