Syncfusion React Rich Text Editor 是 ej2-react-richtexteditor 包提供的 WYSIWYG（所见即所得）编辑器组件，用于以 HTML 或 Markdown 创建和格式化富内容，支持工具栏、媒体插入、AI 辅助、智能编辑、表单验证和深度自定义。
用途 该技能适用于在 React 应用中设置富文本 / WYSIWYG 编辑器、配置工具栏项、类型或位置、在 HTML 与 Markdown 编辑器模式之间切换、插入图片、视频、音频或文件、使用智能编辑功能（emoji、斜杠菜单、提及、邮件合并）、将 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（emoji 搜索与插入）、SlashMenu（斜杠 / 命令菜单）、ImportExport（导入 Word、导出 Word/PDF）、CodeBlock（内联代码块格式化）、AutoFormat（输入时自动转换 Markdown 语法）、FormatPainter（复制粘贴文本格式）、AIAssistant（AI 助手集成）。
主要能力 编辑器模式：HTML 编辑模式（默认 WYSIWYG）、带预览的 Markdown 编辑模式、IFrame 与 DIV 模式、内联编辑、可调整大小的编辑器。 工具栏配置：默认工具栏项、工具栏类型（Expand、MultiRow、Scrollable）、工具栏位置（顶部/底部）、粘性/浮动工具栏、图片与链接的快速工具栏。 工具栏工具：内置工具（加粗、斜体、格式等）、使用模板的自定义工具栏项、文本格式工具、样式工具（字体、颜色、对齐）、全屏工具。 插入媒体：插入图片（URL、上传、base64）、视频插入与配置、音频插入、文件浏览器集成。 插入内容：表格（插入、调整大小、合并单元格）、超链接（创建、编辑、新标签页打开）、代码块、自定义格式块。 智能编辑：Emoji 选择器、斜杠菜单（输入 / 打开）、提及（标记用户）、邮件合并。 管理编辑器取值：设置初始值、通过属性/事件/方法获取值、与 React state 双向绑定、使用 saveInterval 自动保存、导入/导出 Word 和 PDF、Markdown 预览、字符数与 maxLength、源代码视图。 粘贴与剪贴板：粘贴清理配置、复制/剪切时清理剪贴板、以编程方式执行编辑器命令。 验证与安全：表单支持与提交、XHTML 验证、只读模式、XSS 防护。 AI 助手：AI 集成设置、AI 助手属性、自定义 AI 工具栏与响应。 无障碍与全球化：WCAG 2.1 合规、键盘快捷键、全球化、本地化、RTL、样式封装。 样式与自定义：CSS 变量自定义、样式封装（shadow DOM）、第三方集成（CodeMirror、Mention 库）、拼写/语法检查。 撤销/重做：撤销/重做管理器行为、键盘快捷键、以编程方式撤销/重做。 回车键与选择：回车键配置（P、BR、DIV）、Selection API、光标定位。
事件 包含各事件 EventArgs 类型的推断；生命周期事件（created、destroyed、focus、blur）；内容变更事件（change，带 ChangeEventArgs）；动作事件（actionBegin 可取消、actionComplete）；工具栏事件（toolbarClick、updatedToolbarStatus）；对话框与弹窗事件（beforeDialogOpen/Close、beforePopupOpen/Close）；媒体与文件事件（图片/音频/视频上传、选择、移除、拖放）；粘贴与剪贴板事件（beforePasteCleanup、afterPasteCleanup）；AI 助手事件（aiAssistantPromptRequest、aiAssistantToolbarClick）；以及调整大小、斜杠菜单、选择、快速工具栏、导入/导出事件。
方法 焦点与内容：focusIn、focusOut、getHtml、getText、getSelectedHtml。工具栏：enableToolbarItem、disableToolbarItem、removeToolbarItem。对话框：showDialog、closeDialog（配合 DialogType 枚举）。选择：selectAll、getRange、selectRange。撤销/重做：clearUndoRedo。AI 助手：executeAIPrompt、addAIPromptResponse、getAIPromptHistory、clearAIPromptHistory。工具：executeCommand（所有 CommandName 值）、sanitizeHtml、destroy。
属性 核心：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。
常用模式 变更时读取值：
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 state 受控取值：
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>
限制 资料中未提供具体的收费、价格、平台支持范围、性能或效果数据，相关内容暂未提供。