syncfusion-javascript-rich-text-editor

实现 Syncfusion Rich Text Editor

用于在 TypeScript 中实现 Syncfusion Rich Text Editor（RTE）和 Markdown Editor 的统一技能。两种编辑器共用同一个 RichTextEditor 类和 @syncfusion/ej2-richtexteditor 包——唯一的区别是 editorMode 属性以及注入的功能模块。

编辑器模式决策指南

用户需要所见即所得（WYSIWYG）/带格式的 HTML 内容？ → 使用 editorMode: 'HTML'（默认值），注入 HtmlEditor

用户需要 Markdown /带预览的纯文本？ → 使用 editorMode: 'Markdown'，注入 MarkdownEditor

用户需要 iframe 隔离？ → 在 HTML 模式下添加 iframeSettings: { enable: true }

用户需要内联编辑？ → 在 HTML 模式下添加 inlineMode: { enable: true }

何时使用此技能

用户有以下需求时，请使用此技能：

• 构建富文本 / 所见即所得（WYSIWYG）编辑器，用于博客文章、评论、电子邮件、CMS 内容
• 构建带实时预览的 Markdown 编辑器，用于文档、笔记、开发者工具
• 自定义工具栏——添加/移除项目、更改布局、添加自定义工具
• 插入媒体——图片、音频、视频、文件浏览器集成
• 启用智能编辑——@提及、斜杠命令、表情选择器、邮件合并
• 为编辑器添加 AI 写作辅助
• 处理编辑器值——获取/设置 HTML 或 Markdown 内容、自动保存、字符计数
• 在编辑器中使用表格和链接
• 配置验证——表单集成、XHTML 验证、只读模式
• 设置编辑器样式或主题——字体、颜色、CSS 自定义
• 导入/导出内容——Word/PDF/Markdown 导入和导出

触发关键词： RichTextEditor、MarkdownEditor、editorMode、WYSIWYG、富文本、Markdown 编辑器、内容编辑器、文本格式设置、ej2-richtexteditor、HtmlEditor、内联编辑器、iframe 编辑器

---

导航指南

开始使用

📄 阅读： references/getting-started.md

• 包安装和 CSS 导入
• 模块注入（HtmlEditor 与 MarkdownEditor）
• HTML 编辑器初始化
• Markdown 编辑器初始化
• 设置时配置工具栏
• 功能模块参考表

编辑器模式与类型

📄 阅读： references/editor-modes.md

• HTML 模式与 Markdown 模式的选择
• iframe 编辑器（样式隔离编辑）
• 内联编辑（选中内容时显示工具栏）
• 可调整大小的编辑器
• editorMode API 和模式切换

工具栏配置

📄 阅读： references/toolbar.md

• 工具栏类型：Expand、MultiRow、Scrollable、Popup
• 工具栏位置：顶部 / 底部
• 固定（浮动）工具栏
• 图片、链接、表格、音频、视频、文本的快捷工具栏
• 分隔符用法（| 和 -）

工具（内置和自定义）

📄 阅读： references/tools.md

• 完整的内置工具目录（文本、字体、对齐、列表等）
• 添加和移除工具栏工具
• 创建自定义工具栏命令
• 以编程方式启用 / 禁用工具栏项目
• 文本格式设置、样式设置、全屏工具

编辑器值（获取/设置/保存）

📄 阅读： references/editor-value.md

• 使用 value / valueTemplate 设置初始内容
• 获取 HTML 内容：editor.value、getHtml()、getText()
• 更改事件和自动保存（saveInterval）
• 字符计数和最大长度
• 编码后的 HTML 输出（enableHtmlEncode）
• 源代码编辑（SourceCode 工具）
• 占位文本

插入图片和媒体

📄 阅读： references/insert-image-media.md

• 插入图片（URL、上传、拖放）
• 插入音频和视频
• 文件浏览器集成
• 上传配置（服务器上传、重命名）
• 图片/媒体快捷工具栏

表格

📄 阅读： references/table.md

• 创建表格（工具栏、以编程方式）
• 表格快捷工具栏操作
• 单元格属性、对齐、合并/拆分
• 表格样式自定义

链接

📄 阅读： references/link.md

• 插入超链接
• 链接快捷工具栏（打开、编辑、移除）
• 自动识别 URL 并创建链接

智能编辑

📄 阅读： references/smart-editing.md

• @提及集成
• 斜杠菜单 / 斜杠命令
• 表情选择器
• 使用动态占位符进行邮件合并

AI 助手

📄 阅读： references/ai-assistant.md

• 集成 AI 助手面板
• AI 助手属性和配置
• 自定义 AI 建议界面

Markdown 专属功能

📄 阅读： references/markdown-features.md

• 支持的 Markdown 语法（标题、列表、粗体、斜体等）
• 自定义 Markdown 格式定义
• 实时 Markdown 预览（分栏）
• 在 Markdown 模式下插入图片 / 表格
• 在 Markdown 模式下支持提及
• Markdown 专属工具栏项

内容操作

📄 阅读： references/content-operations.md

• 支持代码块
• 文本选择 API
• 剪贴板清理
• 粘贴清理（粘贴 Word 内容、清理 HTML）
• 撤销/重做配置
• 以编程方式执行命令（executeCommand）
• Enter 键配置（P、BR、DIV）

导入与导出

📄 阅读： references/import-export.md

• 将 Word/HTML 文档导入编辑器
• 将编辑器内容导出为 Word / PDF
• Markdown 导入/导出

样式与外观

📄 阅读： references/style-appearance.md

• CSS 自定义和 cssClass
• 样式封装
• 添加自定义 Google 字体
• 拼写和语法检查
• 国际化（RTL、本地化）
• Tailwind CSS preflight 解决方法
• 默认字体配置
• 占位文本样式

验证与安全

📄 阅读： references/validation-security.md

• 将 HTML 表单与 RTE 集成
• XHTML 验证和 XSS 防护
• 只读模式

操作指南

📄 阅读： references/how-to.md

• 在 Dialog 中使用 RTE
• 在 Tab 控件中使用 RTE
• 支持文件附件
• 文件大小限制
• 格式化代码块
• 自定义快捷键
• 保存功能
• 光标位置控制
• 在服务器上重命名图片

属性参考

📄 阅读： references/properties.md

• 完整列出所有 RichTextEditor 属性及其类型、默认值和说明
• 复杂模型属性（工具栏、图片、表格、字体、颜色、AI 助手等）的子类型详情
• 关键属性的代码示例

方法参考

📄 阅读： references/methods.md

• 完整列出所有公共实例方法及其签名和返回类型
• 参数详情和用法示例
• executeCommand 及完整的 CommandName 枚举和参数接口
• 静态 Inject 方法和可用模块列表

事件参考

📄 阅读： references/events.md

• 完整列出所有组件事件及其类型和事件参数详情
• 生命周期事件：created、destroyed、blur、focus、change
• 图片、音频和视频的上传事件
• AI 助手事件：aiAssistantPromptRequest、aiAssistantToolbarClick、aiAssistantStopRespondingClick
• 工具栏、弹出窗口、对话框、快捷工具栏、调整大小和选择事件

---

快速入门

npm install @syncfusion/ej2-angular-richtexteditor

npm install @syncfusion/ej2-tailwind3-theme

HTML 编辑器（WYSIWYG）

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

import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar);

const editor = new RichTextEditor({
  toolbarSettings: {
    items: ['Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments',
            'OrderedList', 'UnorderedList', '|', 'CreateLink', 'Image', '|',
            'SourceCode', 'Undo', 'Redo']
  },
  value: '<p>Start editing here...</p>'
});
editor.appendTo('#editor');

<div id="editor"></div>

Markdown 编辑器

import { RichTextEditor, Toolbar, Link, Image, MarkdownEditor } from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, Link, Image, MarkdownEditor);

const editor = new RichTextEditor({
  editorMode: 'Markdown',
  toolbarSettings: {
    items: ['Bold', 'Italic', 'StrikeThrough', 'InlineCode', '|',
            'Formats', 'Blockquote', '|', 'OrderedList', 'UnorderedList',
            'CreateLink', 'Image', 'CreateTable', '|', 'Undo', 'Redo']
  },
  value: '## Hello Markdown\n\nStart writing here...'
});
editor.appendTo('#editor');

---

常见模式

在表单提交时获取编辑器值

const form = document.getElementById('myForm');
form.addEventListener('submit', () => {
  const content = editor.value; // HTML string or Markdown string
  console.log(content);
});

自动保存内容

const editor = new RichTextEditor({
  saveInterval: 5000, // save every 5 seconds of inactivity
  change: (args) => {
    localStorage.setItem('draft', args.value);
  }
});

只读模式

editor.readonly = true;

以编程方式设置内容

editor.value = '<p>New content</p>';
editor.dataBind(); // apply the change

---

模块注入参考

功能	要注入的模块
HTML 编辑	HtmlEditor
Markdown 编辑	MarkdownEditor
工具栏	Toolbar
超链接	Link
图像	Image
音频	Audio
视频	Video
表格	Table
快捷工具栏	QuickToolbar
粘贴清理	PasteCleanup
字符计数	Count
调整大小	Resize
文件管理器	FileManager
提及	Mention（来自 ej2-dropdowns）

只注入所需模块——每个模块都会增大打包体积。务必在 new RichTextEditor(...) 之前调用 RichTextEditor.Inject(...)。