syncfusion-react-rich-text-editor

Syncfusion React 富文本编辑器

一款所见即所得（WYSIWYG）编辑器，可用于创建和设置 HTML 或 Markdown 富文本的格式。支持工具栏、媒体插入、AI 辅助、智能编辑功能、表单验证和深度自定义。

何时使用此技能

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

快速入门

npm install @syncfusion/ej2-react-richtexteditor

npm install @syncfusion/ej2-tailwind3-theme

src/App.css - 添加 CSS 导入

@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/rich-text-editor/index.css';

import './App.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;

模块注入参考

仅注入应用所需的模块，以保持打包体积精简。

模块	功能
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 助手集成

导航指南

入门

📄 阅读： references/getting-started.md

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

编辑器模式

📄 阅读： references/editor-modes.md

• HTML 编辑器模式（默认 WYSIWYG）
• 带预览的 Markdown 编辑器模式
• IFrame 与 DIV 模式
• 行内编辑
• 可调整大小的编辑器

工具栏配置

📄 阅读： references/toolbar-configuration.md

• 默认工具栏项目
• 工具栏类型：展开、多行、可滚动
• 工具栏位置（顶部/底部）
• 粘性/浮动工具栏
• 用于图像和链接的快速工具栏

工具栏工具

📄 阅读： references/toolbar-tools.md

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

插入媒体

📄 阅读： references/insert-media.md

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

插入内容

📄 阅读： references/insert-content.md

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

智能编辑功能

📄 阅读： references/smart-editing.md

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

管理编辑器值

📄 阅读： references/editor-value.md

• 设置初始值
• 通过属性、事件或方法获取值
• 使用 React 状态进行双向绑定
• 使用 saveInterval 自动保存
• 导入/导出 Word 和 PDF
• Markdown 预览
• 字符计数和 maxLength
• 源代码视图

粘贴与剪贴板

📄 阅读： references/paste-clipboard.md

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

验证与安全

📄 阅读： references/validation-security.md

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

AI 助手

📄 阅读： references/ai-assistant.md

• AI 集成设置
• AI 助手属性
• 自定义 AI 工具栏与响应

无障碍与全球化

📄 阅读： references/accessibility.md

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

样式与自定义

📄 阅读： references/styling-customization.md

• 自定义 CSS 变量
• 样式封装（shadow DOM）
• 第三方集成（CodeMirror、Mention library）
• 拼写／语法检查

撤销／重做

📄 阅读： references/undo-redo.md

• 撤销／重做管理器的行为
• 键盘快捷键
• 以编程方式撤销／重做

Enter 键与选区

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

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

事件

📄 阅读： references/events.md

• 推断每个事件的 EventArgs Type 值
• 生命周期事件：created、destroyed、focus、blur
• 内容更改：带有 ChangeEventArgs 的 change 事件
• 操作事件：actionBegin（可取消）、actionComplete
• 工具栏事件：toolbarClick、updatedToolbarStatus
• 对话框与弹出窗口事件：beforeDialogOpen/Close、beforePopupOpen/Close
• 媒体与文件事件：图像／音频／视频上传、选择、移除、放置
• 粘贴与剪贴板事件：beforePasteCleanup、afterPasteCleanup
• AI 助手事件：aiAssistantPromptRequest、aiAssistantToolbarClick
• 调整大小、斜杠菜单、选区、快速工具栏、导入／导出事件

方法

📄 阅读： 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

属性参考

📄 阅读： 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

操作指南

📄 阅读： references/how-to.md

• 捕获 Ctrl 键以更新值
• 更改默认字体系列
• 检查上传图像的大小
• 自定义占位符样式
• 自定义快捷键
• 文件附件
• 设置代码块格式
• 将光标定位到内容末尾
• 在服务器上重命名图像
• 在 Dialog 或 Tab 中使用 RTE
• 将光标设置到特定范围
• 修复 Tailwind preflight 问题
• 以编程方式更新值

常见模式

值变化时读取

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>
  );
}

使用 React 状态控制值

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

Markdown 模式

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