syncfusion-angular-rich-text-editor

实现 Syncfusion Angular 富文本编辑器

Syncfusion Angular 富文本编辑器是一款功能齐全的所见即所得编辑器，可帮助用户创建、编辑和设置富文本内容的格式。它支持 HTML 和 Markdown 编辑模式、多媒体插入、AI 辅助、智能编辑功能以及深度自定义。

何时使用此技能

在以下情况下使用此技能：

• 内容编辑 UI：在 Angular 应用中添加富文本／所见即所得编辑器
• HTML 或 Markdown 输出：将带格式的内容保存为 HTML 或 Markdown
• 富媒体编辑器：支持插入图像、音频、视频和文件
• AI 辅助写作：将 AI 内容生成功能集成到编辑器中
• 智能编辑功能：添加提及、表情符号选择器、斜杠命令或邮件合并
• 自定义工具栏：配置、扩展或限制工具栏项目和工具
• 表单集成：在 Angular 响应式表单或模板驱动表单中使用 RTE
• 文档导入／导出：从 Word 导入，或导出为 PDF／Word

组件概览

来自 @syncfusion/ej2-angular-richtexteditor 的 <ejs-richtexteditor> 组件提供：

• HTML 和 Markdown 编辑模式
• 可配置的工具栏（展开、多行、可滚动、弹出式）
• 支持上传图像、视频、音频和文件
• 行内、IFrame 和可调整大小的编辑器变体
• 智能编辑：提及、表情符号选择器、斜杠菜单、邮件合并
• AI 助手集成
• 导入／导出（Word、PDF）
• 完整的无障碍支持（WCAG 2.1）、键盘导航和 RTL 支持
• 多种主题：Tailwind 3、Material 3、Bootstrap 5、Fluent 2

快速入门

npm install @syncfusion/ej2-angular-richtexteditor

npm install @syncfusion/ej2-material3-theme

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（styles.css）：

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

文档与导航指南

开始使用

📄 阅读： references/getting-started.md

阅读时机： 首次设置、安装、基本实现、模块注入

涵盖主题：

• 安装 @syncfusion/ej2-angular-richtexteditor
• 模块导入：RichTextEditorModule 与 RichTextEditorAllModule
• 服务注入：所有可用服务及其提供的功能
• CSS 主题导入（Material3、Tailwind3、Bootstrap5、Fluent2）
• 独立组件与 NgModule 设置
• 带值绑定的基本 <ejs-richtexteditor>

---

编辑器类型

📄 阅读： references/editor-types.md

阅读时机： 选择合适的编辑器渲染模式

涵盖主题：

• 默认（基于 DIV）编辑器——标准用例
• IFrame 编辑器——样式隔离、CSS 封装
• 行内编辑——直接在页面中编辑内容
• 可调整大小的编辑器——用户可调整编辑器区域大小
• 在 HTML 模式和 Markdown 模式之间切换
• 各种类型的适用场景

---

工具栏配置

📄 阅读： references/toolbar.md

阅读时机： 自定义工具栏布局、位置或项目

涵盖主题：

• 工具栏类型：展开、多行、可滚动、弹出式（浮动）
• 工具栏位置：顶部或底部
• 快捷工具栏（图像、链接、表格上下文工具栏）
• 配置 toolbarSettings.items 数组
• 动态禁用或启用工具栏项目
• 使用分隔符（|）和换行符配置工具栏

---

内置工具和自定义工具

📄 阅读： references/tools.md

阅读时机： 使用文本格式设置、自定义工具栏项目或全屏功能

涵盖主题：

• 内置工具概览（所有可用工具名称）
• 文本格式工具：Bold、Italic、FontName、FontSize、Color、Alignment
• 样式工具：Lists、Indent、Formats
• 全屏工具
• 使用命令创建自定义工具栏工具
• 设置自定义工具按钮的样式

---

插入图像、视频、音频和文件

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

阅读时机： 处理媒体插入、上传或文件浏览器时

涵盖主题：

• 插入图像（URL、文件上传、base64）
• 服务端上传处理程序配置
• 图像大小调整、对齐和替代文本
• 插入和嵌入视频
• 插入音频
• 文件浏览器集成（FileManagerService）
• 上传后在服务器上重命名图像
• 插入前检查图像大小

---

表格和链接

📄 阅读： references/table-and-links.md

阅读时机： 在编辑器中处理表格或超链接时

涵盖主题：

• 插入和配置表格
• 调整表格大小、合并和拆分单元格、添加或删除行和列
• 表格样式和边框
• 插入和编辑链接
• insertLink 对话框配置
• 在新标签页中打开链接、验证链接

---

编辑器值、选区和命令

📄 阅读： references/editor-value-and-selection.md

阅读时机： 以编程方式读取或写入内容，或控制编辑器时

涵盖主题：

• 获取和设置 HTML 值
• 获取和设置 Markdown 值
• executeCommand API（粗体、斜体、insertHTML 等）
• 选区范围 API：getRange、setRange
• 将光标定位到特定位置
• 捕获键盘快捷键以更新值
• 以编程方式控制撤销和重做

---

属性

📄 阅读： references/properties.md

阅读时机： 配置编辑器行为、外观或功能设置时

涵盖主题：

• AI 助手配置（aiAssistantSettings）
• 自动保存设置（autoSaveOnIdle）
• 调色板配置（backgroundColor、fontColor）
• 代码块和格式列表
• 编辑器模式设置（editorMode、enterKey）
• 表情符号选择器配置
• 功能开关（enableAutoUrl、enableResize、enableXhtml 等）
• 导入/导出设置（PDF、Word）
• IFrame 和内联模式配置
• 媒体插入设置（图像、音频、视频）
• 样式属性（cssClass、height、htmlAttributes）
• 工具栏和格式配置
• 文件管理器集成

---

方法

📄 阅读： references/methods.md

阅读时机： 调用编程 API 控制编辑器时

涵盖主题：

• AI 助手方法（addAIPromptResponse、clearAIPromptHistory、executeAIPrompt、getAIPromptHistory）
• 内容检索方法（getHtml、getText、getXhtml、getContent、getCharCount）
• 内容操作（executeCommand、clearUndoRedo、sanitizeHtml）
• 对话框管理（showDialog、closeDialog）
• 焦点管理（focusIn、focusOut）
• 选区方法（getRange、selectRange、selectAll、getSelection、getSelectedHtml）
• 工具栏管理（enableToolbarItem、disableToolbarItem、removeToolbarItem）
• 弹出窗口和 UI 控制（showEmojiPicker、showFullScreen、showSourceCode、showInlineToolbar、hideInlineToolbar、refreshUI）
• 组件生命周期（destroy）

---

事件 — 核心

📄 阅读： references/events-core.md

阅读时机： 处理生命周期、操作、内容更改、选区、对话框、弹出窗口、快速工具栏或调整大小事件时

涵盖主题：

• 生命周期事件（created、destroyed、focus、blur）
• 操作事件（actionBegin、actionComplete）
• 内容更改事件（change）
• 选区事件（selectionChanged）
• 对话框事件（beforeDialogOpen、dialogOpen、beforeDialogClose、dialogClose）
• 弹出窗口事件（beforePopupOpen、beforePopupClose）
• 快速工具栏事件（beforeQuickToolbarOpen、quickToolbarOpen、quickToolbarClose）
• 调整大小事件（resizeStart、resizing、resizeStop）

---

事件 — 媒体、上传和工具栏

📄 阅读： references/events-media-upload.md

阅读时机： 处理 AI 助手、媒体、粘贴/剪贴板、工具栏、上传或导入/导出事件时

涵盖主题：

• AI 助手事件（aiAssistantPromptRequest、aiAssistantStopRespondingClick、aiAssistantToolbarClick）
• 媒体事件（afterImageDelete、afterMediaDelete、beforeImageDrop、beforeMediaDrop）
• 粘贴和剪贴板事件（beforePasteCleanup、afterPasteCleanup、beforeClipboardWrite）
• 工具栏事件（toolbarClick、updatedToolbarStatus、slashMenuItemSelect）
• 上传事件 — 图片生命周期（beforeImageUpload、imageUploading、imageUploadSuccess、imageUploadFailed、imageSelected、imageRemoving）
• 上传事件 — 媒体生命周期（beforeFileUpload、fileUploading、fileUploadSuccess、fileUploadFailed、fileSelected、fileRemoving）
• 文档导入/导出事件（documentExporting、wordImporting）

---

智能编辑功能

📄 阅读： references/smart-editing.md

阅读时机： 添加提及、表情符号、斜杠命令或邮件合并时

涵盖主题：

• 提及（@user）——配置和数据源
• 表情符号选择器——启用和自定义
• 斜杠命令菜单——启用 / 触发的命令
• 邮件合并——在内容中插入合并字段
• 组合使用多项智能编辑功能

---

AI 助手集成

📄 阅读： references/ai-assistant.md

阅读时机： 将 AI 内容生成集成到编辑器时

涵盖主题：

• AI AssistView 集成概览
• 注入 AIAssistantService
• 配置 AI 属性（端点、模型、提示词）
• 在 Angular 中处理自定义 AI 提示词
• 设置工具栏 AI 按钮
• AI 内容生成和插入工作流

---

剪贴板和粘贴清理

📄 阅读： references/clipboard-and-paste.md

阅读时机： 控制内容粘贴到编辑器时的处理方式

涵盖主题：

• PasteCleanupService——启用粘贴清理
• 允许/拒绝特定 HTML 标签和属性
• 清理从 Word 和 Excel 粘贴的格式
• 使用 ClipboardCleanupService 清理复制/剪切内容
• 处理 afterPasteCleanup 事件
• 配置以纯文本形式粘贴

---

样式和无障碍

📄 阅读： references/style-and-accessibility.md

阅读时机： 自定义编辑器外观或确保符合无障碍规范时

涵盖主题：

• CSS 类自定义和主题设置
• IFrame 模式下的样式封装
• 自定义占位符样式
• WCAG 2.1 合规性概览
• 键盘导航和快捷键
• ARIA 属性和屏幕阅读器支持
• 焦点管理

---

全球化和本地化

📄 阅读： references/globalization-and-i18n.md

阅读时机： 支持多种语言、RTL 或特定区域设置的格式时

涵盖主题：

• 使用 L10n 设置本地化
• RTL（从右到左）支持
• 自定义区域设置字符串覆盖
• 在编辑器中设置日期和数字格式

---

导入、导出和拼写检查

📄 阅读： references/import-export-spellcheck.md

阅读时机： 导入 Word 文档、导出编辑器内容，或添加拼写/语法检查时

涵盖主题：

• 注入 ImportExportService
• 从 Word 文档导入
• 导出为 PDF、HTML 或 Word
• 拼写检查集成
• 语法检查集成
• 设置 Web Spell Checker 插件

---

验证与安全

📄 阅读： references/validation-and-security.md

阅读时机： 在表单中使用编辑器或实施内容安全措施时

涵盖主题：

• 使用 Angular 响应式表单进行表单验证
• 使用模板驱动表单进行表单验证
• XHTML 验证
• 只读模式
• 内容净化
• XSS 防护策略

---

集成与操作指南

📄 阅读： references/integrations-and-how-to.md

阅读时机： 集成第三方库或解决常见配置场景时

涵盖主题：

• 集成 CodeMirror 源代码编辑器
• 使用 HighlightJS 为代码块添加语法高亮
• 集成 Embedly 富媒体预览
• 修复 Tailwind CSS preflight 冲突
• 将 Google Fonts 添加到字体选择器
• 文件附件支持
• 在 Angular Dialog 组件中使用 RTE
• 在 Angular Tab 组件中使用 RTE
• 更改默认字体系列
• 设置代码块格式

常见模式

双向值绑定

// Template
<ejs-richtexteditor [(value)]="htmlContent"></ejs-richtexteditor>

// Component
public htmlContent: string = '<p>Initial content</p>';

单向绑定 + 更改事件

<ejs-richtexteditor [value]="htmlContent" (change)="onChange($event)">
</ejs-richtexteditor>

onChange(args: ChangeEventArgs): void {
  this.htmlContent = args.value;
}

与响应式表单搭配使用

import { FormControl, ReactiveFormsModule } from '@angular/forms';

// Template
<ejs-richtexteditor formControlName="content"></ejs-richtexteditor>

// Component
this.form = new FormGroup({
  content: new FormControl('<p></p>', Validators.required)
});

关键服务参考

服务	功能
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

相关技能

• Syncfusion Angular Components — 上级库技能