Syncfusion Angular Rich Text Editor 是一个功能完整的所见即所得（WYSIWYG）编辑器组件，来自 @syncfusion/ej2-angular-richtexteditor 包的 <ejs-richtexteditor> 元素，用于让用户在 Angular 应用中创建、编辑和格式化富文本内容。它同时支持 HTML 和 Markdown 编辑模式，并可通过服务注入按需开启各项能力。
主要能力
- 编辑模式：HTML 与 Markdown 两种模式，可在二者间切换。
- 编辑器形态：默认（基于 DIV）、IFrame（样式隔离）、内联编辑（直接在页面中编辑）、可变尺寸（用户可拖拽调整编辑区域）。
- 工具栏：支持展开（Expand）、多行（MultiRow）、滚动（Scrollable）、弹出（Popup/浮动）等类型，可置于顶部或底部；支持快捷上下文工具栏（图片、链接、表格）；可通过 toolbarSettings.items 配置工具栏项，动态启用或禁用，支持分隔符与换行。
- 内置与自定义工具：文本格式化（加粗、斜体、字体、字号、颜色、对齐）、样式（列表、缩进、格式）、全屏，以及通过命令创建自定义工具栏工具。
- 媒体插入：图片（URL、文件上传、base64）、视频、音频、文件；支持服务端上传处理、图片缩放与对齐、alt 文本、上传后重命名、插入前检查图片大小；集成文件浏览器（FileManagerService）。
- 表格与链接：插入和配置表格，调整大小、合并/拆分单元格、增删行列、设置样式与边框；插入和编辑链接，配置 insertLink 对话框、新标签页打开与链接校验。
- 内容与选择控制：读取和设置 HTML/Markdown 值，使用 executeCommand API（加粗、斜体、insertHTML 等），选择范围 API（getRange、setRange），光标定位，捕获键盘快捷键，程序化撤销/重做。
- 智能编辑功能：@提及（Mentions）、表情选择器（Emoji Picker）、斜杠命令菜单（Slash Menu）、邮件合并（Mail Merge）。
- AI 助手：通过 AIAssistantService 集成 AI 内容生成，配置端点、模型、提示词，处理自定义 AI 提示，设置工具栏 AI 按钮，以及生成与插入内容的工作流。
- 导入/导出：从 Word 导入，导出为 PDF、HTML 或 Word。
- 粘贴与剪贴板清理：PasteCleanupService 控制粘贴内容，允许/拒绝特定标签与属性，清理 Word/Excel 粘贴格式，ClipboardCleanupService 处理复制/剪切清理，支持纯文本粘贴。
- 样式与无障碍：CSS 类定制与主题，IFrame 模式样式封装，占位符样式；WCAG 2.1 合规、键盘导航与快捷键、ARIA 属性与屏幕阅读器支持、焦点管理。
- 全球化与本地化：使用 L10n 进行本地化，RTL 支持，自定义区域字符串覆盖，日期与数字格式化。
- 校验与安全：Angular 响应式表单与模板驱动表单校验、XHTML 校验、只读模式、内容清洗、XSS 防护策略。
- 集成：CodeMirror 源码编辑器、HighlightJS 代码块高亮、Embedly 富媒体预览、Tailwind CSS preflight 冲突修复、向字体选择器添加 Google Fonts、文件附件、在 Angular Dialog 与 Tab 组件中使用 RTE、更改默认字体、格式化代码块。
使用方式 安装： npm install @syncfusion/ej2-angular-richtexteditor npm install @syncfusion/ej2-material3-theme
在独立组件中导入 RichTextEditorModule 并注入所需服务： import { Component } from '@angular/core'; import { RichTextEditorModule } from '@syncfusion/ej2-angular-richtexteditor'; import { ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
imports: [RichTextEditorModule],
standalone: true,
selector: 'app-root',
template: <ejs-richtexteditor [(value)]="content"></ejs-richtexteditor>,
providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService]
})
export class AppComponent {
public content: string = '<p>Start editing here...</p>';
}
引入主题 CSS： @import '../node_modules/@syncfusion/ej2-material3-theme/styles/rich-text-editor/index.css';
常用服务及其作用：ToolbarService（工具栏渲染与项管理）、HtmlEditorService（HTML 编辑模式）、MarkdownEditorService（Markdown 编辑模式）、LinkService（超链接插入与编辑）、ImageService（图片插入与管理）、TableService（表格插入与编辑）、QuickToolbarService（浮动上下文工具栏）、FileManagerService（文件浏览器对话框）、PasteCleanupService（粘贴内容清洗）、ResizeService（编辑器可变尺寸手柄）、ImportExportService（Word/PDF 导入导出）、AIAssistantService（AI 助手集成）、EmojiPickerService（表情选择器）、SlashMenuService（斜杠命令菜单）、CodeBlockService（行内代码块格式化）、AudioService（音频插入）、VideoService（视频插入）、FormatPainterService（格式刷）、ClipboardCleanupService（复制/剪切剪贴板清理）、AutoFormatService（自动 Markdown 转 HTML）。
常见模式 双向值绑定：<ejs-richtexteditor [(value)]="htmlContent"></ejs-richtexteditor> 单向绑定 + change 事件：<ejs-richtexteditor [value]="htmlContent" (change)="onChange($event)"></ejs-richtexteditor> 响应式表单：<ejs-richtexteditor formControlName="content"></ejs-richtexteditor>
适用场景 需要在 Angular 应用中添加富文本/WYSIWYG 编辑界面；需要以 HTML 或 Markdown 输出格式化内容；需要支持图片、音频、视频和文件的富媒体编辑器；希望在编辑器中集成 AI 内容生成；需要 @提及、表情、斜杠命令或邮件合并等智能编辑；需要自定义、扩展或限制工具栏；需要与 Angular 响应式或模板驱动表单集成；需要文档导入（Word）或导出（PDF/Word）。
限制 文档未提供该组件的收费、价格与授权信息；未提供具体性能指标或浏览器兼容清单；AI 助手、上传、导入/导出等能力需自行配置对应服务与后端端点；具体可用工具、属性、方法与事件的完整清单需查阅对应的参考文档。