syncfusion-angular-rich-text-editor

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Angular Rich Text Editor

实现Syncfusion Angular富文本编辑器

The Syncfusion Angular Rich Text Editor is a full-featured WYSIWYG editor that enables users to create, edit, and format rich text content. It supports HTML and Markdown editing modes, multimedia insertion, AI assistance, smart editing features, and deep customization.

Syncfusion Angular富文本编辑器是一款功能完整的WYSIWYG编辑器，支持用户创建、编辑和格式化富文本内容。它支持HTML和Markdown编辑模式、多媒体插入、AI辅助、智能编辑功能以及深度自定义。

When to Use This Skill

何时使用此技能

Use this skill when you need to:

Content Editing UI: Add a rich text / WYSIWYG editor to an Angular application
HTML or Markdown Output: Capture formatted content as HTML or Markdown
Media-Rich Editors: Allow image, audio, video, and file insertion
AI-Assisted Writing: Integrate AI content generation into the editor
Smart Editing Features: Add mentions, emoji picker, slash commands, or mail merge
Custom Toolbar: Configure, extend, or restrict toolbar items and tools
Form Integration: Use RTE with Angular Reactive or Template-driven forms
Document Import/Export: Import from Word or export to PDF/Word

在以下场景中使用此技能：

内容编辑UI：为Angular应用添加富文本/WYSIWYG编辑器
HTML或Markdown输出：以HTML或Markdown格式捕获格式化内容
富媒体编辑器：允许插入图片、音频、视频和文件
AI辅助写作：在编辑器中集成AI内容生成功能
智能编辑功能：添加提及、表情选择器、斜杠命令或邮件合并
自定义工具栏：配置、扩展或限制工具栏项和工具
表单集成：将RTE与Angular响应式表单或模板驱动表单结合使用
文档导入/导出：从Word导入内容或导出为PDF/Word

Component Overview

组件概述

The

<ejs-richtexteditor>

component from

@syncfusion/ej2-angular-richtexteditor

provides:

HTML and Markdown editing modes
Configurable toolbar (expand, multirow, scrollable, popup)
Image, video, audio, and file insertion with upload support
Inline, IFrame, and resizable editor variants
Smart editing: Mentions, Emoji Picker, Slash Menu, Mail Merge
AI assistant integration
Import/Export (Word, PDF)
Full accessibility (WCAG 2.1), keyboard navigation, RTL support
Multiple themes: Tailwind 3, Material 3, Bootstrap 5, Fluent 2

来自

@syncfusion/ej2-angular-richtexteditor

的

<ejs-richtexteditor>

组件提供：

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

Quick Start

快速开始

typescript

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):

css

@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-richtexteditor/styles/material3.css';

typescript

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）：

css

@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-richtexteditor/styles/material3.css';

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

When to read: First-time setup, installation, basic implementation, module injection

Topics covered:

Installing
```
@syncfusion/ej2-angular-richtexteditor
```

Module imports:

RichTextEditorModule

RichTextEditorAllModule

Service injection: all available services and what they unlock
CSS theme imports (Material3, Tailwind3, Bootstrap5, Fluent2)
Standalone component vs NgModule setup
Basic
```
<ejs-richtexteditor>
```
with value binding

📄 阅读： references/getting-started.md

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

涵盖主题：

安装
```
@syncfusion/ej2-angular-richtexteditor
```

模块导入：

RichTextEditorModule

RichTextEditorAllModule

服务注入：所有可用服务及其功能
CSS主题导入（Material3、Tailwind3、Bootstrap5、Fluent2）
独立组件与NgModule设置
带值绑定的基础
```
<ejs-richtexteditor>
```

Editor Types

编辑器类型

📄 Read: references/editor-types.md

When to read: Choosing the right editor rendering mode

Topics covered:

Default (DIV-based) editor — standard use case
IFrame editor — isolated styling, CSS encapsulation
Inline editing — edit content directly in-page
Resizable editor — user-resizable editor area
Switching between HTML mode and Markdown mode
When to choose each type

📄 阅读： references/editor-types.md

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

涵盖主题：

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

Toolbar Configuration

工具栏配置

📄 Read: references/toolbar.md

When to read: Customizing toolbar layout, position, or items

Topics covered:

Toolbar types: Expand, MultiRow, Scrollable, Popup (floating)
Toolbar position: top or bottom
Quick toolbar (image, link, table context toolbars)
Configuring
```
toolbarSettings.items
```
array
Disabling or enabling toolbar items dynamically
Toolbar with separators (
```
|
```
) and line breaks

📄 阅读： references/toolbar.md

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

涵盖主题：

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

Built-in and Custom Tools

内置与自定义工具

📄 Read: references/tools.md

When to read: Working with text formatting, custom toolbar items, or fullscreen

Topics covered:

Built-in tools overview (all available tool names)
Text formatting tools: Bold, Italic, FontName, FontSize, Color, Alignment
Styling tools: Lists, Indent, Formats
Fullscreen tool
Creating custom toolbar tools with commands
Styling custom tool buttons

📄 阅读： references/tools.md

阅读时机： 处理文本格式化、自定义工具栏项或全屏功能

涵盖主题：

内置工具概述（所有可用工具名称）
文本格式化工具：粗体、斜体、字体名称、字体大小、颜色、对齐方式
样式工具：列表、缩进、格式
全屏工具
创建带命令的自定义工具栏工具
自定义工具按钮样式

Inserting Images, Video, Audio & Files

插入图片、视频、音频与文件

📄 Read: references/insert-image-media.md

When to read: Handling media insertion, uploads, or the file browser

Topics covered:

Image insertion (URL, file upload, base64)
Server-side upload handler configuration
Image resize, alignment, and alt text
Video insertion and embedding
Audio insertion
File browser integration (
```
FileManagerService
```
)
Renaming images on server after upload
Checking image size before insert

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

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

涵盖主题：

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

Tables and Links

表格与链接

📄 Read: references/table-and-links.md

When to read: Working with tables or hyperlinks inside the editor

Topics covered:

Inserting and configuring tables
Table resize, merge, split cells, add/remove rows and columns
Table styles and borders
Link insertion and editing
```
insertLink
```
dialog configuration
Opening links in new tab, link validation

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

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

涵盖主题：

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

Editor Value, Selection & Commands

编辑器值、选择与命令

📄 Read: references/editor-value-and-selection.md

When to read: Programmatically reading/writing content or controlling the editor

Topics covered:

Getting and setting the HTML value
Getting and setting Markdown value
```
executeCommand
```
API (bold, italic, insertHTML, etc.)
Selection range APIs:
```
getRange
```
,
```
setRange
```
Positioning cursor at specific location
Capturing keyboard shortcuts to update value
Undo/redo programmatic control

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

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

涵盖主题：

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

Properties

属性

📄 Read: references/properties.md

When to read: Configuring editor behavior, appearance, or feature settings

Topics covered:

AI Assistant configuration (
```
aiAssistantSettings
```
)
Auto-save settings (
```
autoSaveOnIdle
```
)
Color palette configuration (
```
backgroundColor
```
,
```
fontColor
```
)
Code block and format lists
Editor mode settings (
```
editorMode
```
,
```
enterKey
```
)
Emoji picker configuration
Feature flags (enableAutoUrl, enableResize, enableXhtml, etc.)
Import/Export settings (PDF, Word)
IFrame and inline mode configuration
Media insertion settings (image, audio, video)
Styling properties (cssClass, height, htmlAttributes)
Toolbar and format configuration
File manager integration

📄 阅读： references/properties.md

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

涵盖主题：

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

Methods

方法

📄 Read: references/methods.md

When to read: Calling programmatic APIs to control the editor

Topics covered:

AI Assistant methods (

addAIPromptResponse

clearAIPromptHistory

executeAIPrompt

getAIPromptHistory

)

Content retrieval methods (

getHtml

getText

getXhtml

getContent

getCharCount

)

Content manipulation (
```
executeCommand
```
,
```
clearUndoRedo
```
,
```
sanitizeHtml
```
)
Dialog management (
```
showDialog
```
,
```
closeDialog
```
)
Focus management (
```
focusIn
```
,
```
focusOut
```
)

Selection methods (

getRange

selectRange

selectAll

getSelection

getSelectedHtml

)

Toolbar management (

enableToolbarItem

disableToolbarItem

removeToolbarItem

)

Popup and UI control (

showEmojiPicker

showFullScreen

showSourceCode

showInlineToolbar

hideInlineToolbar

refreshUI

)

Component lifecycle (
```
destroy
```
)

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

Events — Core

事件 — 核心

📄 Read: references/events-core.md

When to read: Handling lifecycle, action, content change, selection, dialog, popup, quick toolbar, or resize events

Topics covered:

Lifecycle events (
```
created
```
,
```
destroyed
```
,
```
focus
```
,
```
blur
```
)
Action events (
```
actionBegin
```
,
```
actionComplete
```
)
Content change events (
```
change
```
)
Selection events (
```
selectionChanged
```
)

Dialog events (

beforeDialogOpen

dialogOpen

beforeDialogClose

dialogClose

)

Popup events (
```
beforePopupOpen
```
,
```
beforePopupClose
```
)

Quick toolbar events (

beforeQuickToolbarOpen

quickToolbarOpen

quickToolbarClose

)

Resize events (
```
resizeStart
```
,
```
resizing
```
,
```
resizeStop
```
)

📄 阅读： references/events-core.md

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

涵盖主题：

生命周期事件（
```
created
```
、
```
destroyed
```
、
```
focus
```
、
```
blur
```
）
操作事件（
```
actionBegin
```
、
```
actionComplete
```
）
内容更改事件（
```
change
```
）
选择事件（
```
selectionChanged
```
）

对话框事件（

beforeDialogOpen

、

dialogOpen

、

beforeDialogClose

、

dialogClose

）

弹出窗口事件（
```
beforePopupOpen
```
、
```
beforePopupClose
```
）

快速工具栏事件（

beforeQuickToolbarOpen

、

quickToolbarOpen

、

quickToolbarClose

）

调整大小事件（
```
resizeStart
```
、
```
resizing
```
、
```
resizeStop
```
）

Events — Media, Upload & Toolbar

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

📄 Read: references/events-media-upload.md

When to read: Handling AI assistant, media, paste/clipboard, toolbar, upload, or import/export events

Topics covered:

AI Assistant events (

aiAssistantPromptRequest

aiAssistantStopRespondingClick

aiAssistantToolbarClick

)

Media events (

afterImageDelete

afterMediaDelete

beforeImageDrop

beforeMediaDrop

)

Paste and clipboard events (

beforePasteCleanup

afterPasteCleanup

beforeClipboardWrite

)

Toolbar events (

toolbarClick

updatedToolbarStatus

slashMenuItemSelect

)

Upload events — image lifecycle (

beforeImageUpload

imageUploading

imageUploadSuccess

imageUploadFailed

imageSelected

imageRemoving

)

Upload events — media lifecycle (

beforeFileUpload

fileUploading

fileUploadSuccess

fileUploadFailed

fileSelected

fileRemoving

)

Document import/export events (
```
documentExporting
```
,
```
wordImporting
```
)

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

Smart Editing Features

智能编辑功能

📄 Read: references/smart-editing.md

When to read: Adding mentions, emoji, slash commands, or mail merge

Topics covered:

Mentions (
```
@user
```
) — configuration and data source
Emoji picker — enabling and customizing
Slash command menu — enabling
```
/
```
trigger commands
Mail merge — inserting merge fields into content
Combining multiple smart editing features

📄 阅读： references/smart-editing.md

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

涵盖主题：

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

AI Assistant Integration

AI助手集成

📄 Read: references/ai-assistant.md

When to read: Integrating AI content generation into the editor

Topics covered:

AI AssistView integration overview
```
AIAssistantService
```
injection
Configuring AI properties (endpoint, model, prompts)
Custom AI prompt handling in Angular
Toolbar AI button setup
AI content generation and insertion workflow

📄 阅读： references/ai-assistant.md

阅读时机： 在编辑器中集成AI内容生成

涵盖主题：

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

Clipboard and Paste Cleanup

剪贴板与粘贴清理

📄 Read: references/clipboard-and-paste.md

When to read: Controlling what happens when content is pasted into the editor

Topics covered:

```
PasteCleanupService
```
— enabling paste cleanup
Allowing/denying specific HTML tags and attributes
Cleaning up Word and Excel paste formatting
```
ClipboardCleanupService
```
for copy/cut cleanup
```
afterPasteCleanup
```
event handling
Configuring paste as plain text

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

阅读时机： 控制内容粘贴到编辑器时的行为

涵盖主题：

```
PasteCleanupService
```
——启用粘贴清理
允许/拒绝特定HTML标签和属性
清理Word和Excel粘贴格式
```
ClipboardCleanupService
```
用于复制/剪切清理
```
afterPasteCleanup
```
事件处理
配置纯文本粘贴

Styling and Accessibility

样式与可访问性

📄 Read: references/style-and-accessibility.md

When to read: Customizing editor appearance or ensuring accessibility compliance

Topics covered:

CSS class customization and theming
Style encapsulation in IFrame mode
Custom placeholder styling
WCAG 2.1 compliance overview
Keyboard navigation and shortcuts
ARIA attributes and screen reader support
Focus management

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

阅读时机： 自定义编辑器外观或确保可访问性合规

涵盖主题：

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

Globalization and Localization

全球化与本地化

📄 Read: references/globalization-and-i18n.md

When to read: Supporting multiple languages, RTL, or locale-specific formatting

Topics covered:

Localization setup with
```
L10n
```
RTL (Right-to-Left) support
Custom locale string overrides
Date and number formatting within the editor

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

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

涵盖主题：

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

Import, Export & Spell Check

导入、导出与拼写检查

📄 Read: references/import-export-spellcheck.md

When to read: Importing Word documents or exporting editor content, or adding spell/grammar check

Topics covered:

```
ImportExportService
```
injection
Importing from Word documents
Exporting to PDF, HTML, or Word
Spell check integration
Grammar check integration
Web Spell Checker plugin setup

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

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

涵盖主题：

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

Validation and Security

验证与安全

📄 Read: references/validation-and-security.md

When to read: Using the editor in forms or enforcing content security

Topics covered:

Form validation with Angular Reactive forms
Form validation with Template-driven forms
XHTML validation
Read-only mode
Content sanitization
XSS prevention strategies

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

阅读时机： 在表单中使用编辑器或强制执行内容安全

涵盖主题：

与Angular响应式表单的表单验证
与模板驱动表单的表单验证
XHTML验证
只读模式
内容清理
XSS预防策略

Integrations and How-To

集成与操作指南

📄 Read: references/integrations-and-how-to.md

When to read: Integrating third-party libraries or solving common configuration scenarios

Topics covered:

CodeMirror source-code editor integration
HighlightJS syntax highlighting for code blocks
Embedly rich media preview integration
Tailwind CSS preflight conflict fix
Adding Google Fonts to font picker
File attachments support
RTE inside Angular Dialog component
RTE inside Angular Tab component
Changing default font family
Formatting code blocks

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

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

涵盖主题：

CodeMirror源代码编辑器集成
代码块的HighlightJS语法高亮
Embedly富媒体预览集成
Tailwind CSS预飞行冲突修复
为字体选择器添加Google字体
文件附件支持
Angular Dialog组件内的RTE
Angular Tab组件内的RTE
更改默认字体族
格式化代码块

Common Patterns

常见模式

Two-Way Value Binding

双向值绑定

typescript

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

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

typescript

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

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

One-Way Binding + Change Event

单向绑定 + 更改事件

typescript

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

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

typescript

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

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

Using with Reactive Forms

与响应式表单结合使用

typescript

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

typescript

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

// 模板
<ejs-richtexteditor formControlName="content"></ejs-richtexteditor>

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

Key Services Reference

关键服务参考

Service	What it enables
`ToolbarService`	Toolbar rendering and item management
`HtmlEditorService`	HTML editing mode
`MarkdownEditorService`	Markdown editing mode
`LinkService`	Hyperlink insertion and editing
`ImageService`	Image insertion and management
`TableService`	Table insertion and editing
`QuickToolbarService`	Floating context toolbars
`FileManagerService`	File browser dialog
`PasteCleanupService`	Paste content sanitization
`ResizeService`	Editor resizing handle
`ImportExportService`	Word/PDF import and export
`AIAssistantService`	AI assistant integration
`EmojiPickerService`	Emoji picker dialog
`SlashMenuService`	`/` slash command menu
`CodeBlockService`	Inline code block formatting
`AudioService`	Audio insertion
`VideoService`	Video insertion
`FormatPainterService`	Format painting (copy/apply styles)
`ClipboardCleanupService`	Copy/cut clipboard cleanup
`AutoFormatService`	Auto Markdown-to-HTML conversion

服务	功能
`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-rich-text-editor

Original

Translation

Implementing Syncfusion Angular Rich Text Editor

实现Syncfusion Angular富文本编辑器

When to Use This Skill

何时使用此技能

Component Overview

组件概述

Quick Start

快速开始

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

Editor Types

编辑器类型

Toolbar Configuration

工具栏配置

Built-in and Custom Tools

内置与自定义工具

Inserting Images, Video, Audio & Files

插入图片、视频、音频与文件

Tables and Links

表格与链接

Editor Value, Selection & Commands

编辑器值、选择与命令

Properties

属性

Methods

方法

Events — Core

事件 — 核心

Events — Media, Upload & Toolbar

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

Smart Editing Features

智能编辑功能

AI Assistant Integration

AI助手集成

Clipboard and Paste Cleanup

剪贴板与粘贴清理

Styling and Accessibility

样式与可访问性

Globalization and Localization

全球化与本地化

Import, Export & Spell Check

导入、导出与拼写检查

Validation and Security

验证与安全

Integrations and How-To

集成与操作指南

Common Patterns

常见模式

Two-Way Value Binding

双向值绑定

One-Way Binding + Change Event

单向绑定 + 更改事件

Using with Reactive Forms

与响应式表单结合使用

Key Services Reference

关键服务参考

Related Skills

相关技能