syncfusion-blazor-rich-text-editor

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Syncfusion Blazor Rich Text Editor

Syncfusion Blazor 富文本编辑器

A comprehensive skill for implementing and configuring the Syncfusion Blazor Rich Text Editor (

SfRichTextEditor

) — a full-featured WYSIWYG editor supporting HTML and Markdown editing, rich toolbar customization, media insertion, tables, data binding, import/export, and accessibility.

这是一份关于实现和配置Syncfusion Blazor 富文本编辑器（

SfRichTextEditor

）的全面指南，它是一款功能完整的所见即所得编辑器，支持HTML和Markdown编辑、丰富的工具栏自定义、媒体插入、表格、数据绑定、导入/导出以及无障碍访问功能。

When to Use This Skill

何时使用本指南

Use this skill when the user needs to:

Install and set up
```
SfRichTextEditor
```
in a Blazor Server, WebAssembly, or Web App project
Configure toolbar items, toolbar types (Expand, MultiRow, Scrollable, Popup), or toolbar position
Format text: bold/italic/underline, headings, lists, alignment, colors, fonts, line height
Insert and manage images, videos, or audio with upload support
Work with tables: insert, resize, merge cells, customize quick toolbar
Switch between HTML, Markdown, or IFrame editor modes
Enable inline editing (inline toolbar)
Add custom toolbar tools or use exec commands
Handle RTE events (
```
ValueChange
```
,
```
OnActionBegin
```
, image upload events, etc.)
Bind content two-way with
```
@bind-Value
```
or retrieve via
```
GetTextAsync
```
Configure paste cleanup behavior
Import from Word / export to Word or PDF
Implement accessibility, keyboard shortcuts, RTL, or globalization

当用户需要以下操作时，可使用本指南：

在Blazor Server、WebAssembly或Web App项目中安装和设置
```
SfRichTextEditor
```
配置工具栏项、工具栏类型（展开式、多行、滚动式、弹出式）或工具栏位置
格式化文本：粗体/斜体/下划线、标题、列表、对齐方式、颜色、字体、行高
插入和管理支持上传的图片、视频或音频
处理表格：插入、调整大小、合并单元格、自定义快捷工具栏
在HTML、Markdown或IFrame编辑器模式之间切换
启用内联编辑（内联工具栏）
添加自定义工具栏工具或使用exec命令
处理RTE事件（
```
ValueChange
```
、
```
OnActionBegin
```
、图片上传事件等）
通过
```
@bind-Value
```
实现双向内容绑定，或通过
```
GetTextAsync
```
获取内容
配置粘贴清理行为
从Word导入/导出到Word或PDF
实现无障碍访问、键盘快捷键、RTL（从右到左布局）或全球化

Quick Start

快速开始

1. Install NuGet packages:

bash

dotnet add package Syncfusion.Blazor.RichTextEditor
dotnet add package Syncfusion.Blazor.Themes

2. Register in
Program.cs
:

csharp

using Syncfusion.Blazor;
builder.Services.AddSyncfusionBlazor();

3. Add to
_Imports.razor
:

razor

@using Syncfusion.Blazor
@using Syncfusion.Blazor.RichTextEditor

4. Add CSS/JS in
index.html
(WASM) or
App.razor
(Server):

html

<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"></script>

5. Add the component:

razor

<SfRichTextEditor @bind-Value="@Content">
    <RichTextEditorToolbarSettings Items="@Tools" />
</SfRichTextEditor>

@code {
    private string Content { get; set; } = "<p>Start editing...</p>";

    private List<ToolbarItemModel> Tools = new()
    {
        new() { Command = ToolbarCommand.Bold },
        new() { Command = ToolbarCommand.Italic },
        new() { Command = ToolbarCommand.Underline },
        new() { Command = ToolbarCommand.Separator },
        new() { Command = ToolbarCommand.Formats },
        new() { Command = ToolbarCommand.Alignments },
        new() { Command = ToolbarCommand.OrderedList },
        new() { Command = ToolbarCommand.UnorderedList },
        new() { Command = ToolbarCommand.Separator },
        new() { Command = ToolbarCommand.CreateLink },
        new() { Command = ToolbarCommand.Image },
        new() { Command = ToolbarCommand.CreateTable },
        new() { Command = ToolbarCommand.Separator },
        new() { Command = ToolbarCommand.Undo },
        new() { Command = ToolbarCommand.Redo }
    };
}

1. 安装NuGet包：

bash

dotnet add package Syncfusion.Blazor.RichTextEditor
dotnet add package Syncfusion.Blazor.Themes

2. 在
Program.cs
中注册：

csharp

using Syncfusion.Blazor;
builder.Services.AddSyncfusionBlazor();

3. 添加到
_Imports.razor
：

razor

@using Syncfusion.Blazor
@using Syncfusion.Blazor.RichTextEditor

4. 在
index.html
（WASM）或
App.razor
（Server）中添加CSS/JS：

html

<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"></script>

5. 添加组件：

razor

<SfRichTextEditor @bind-Value="@Content">
    <RichTextEditorToolbarSettings Items="@Tools" />
</SfRichTextEditor>

@code {
    private string Content { get; set; } = "<p>Start editing...</p>";

    private List<ToolbarItemModel> Tools = new()
    {
        new() { Command = ToolbarCommand.Bold },
        new() { Command = ToolbarCommand.Italic },
        new() { Command = ToolbarCommand.Underline },
        new() { Command = ToolbarCommand.Separator },
        new() { Command = ToolbarCommand.Formats },
        new() { Command = ToolbarCommand.Alignments },
        new() { Command = ToolbarCommand.OrderedList },
        new() { Command = ToolbarCommand.UnorderedList },
        new() { Command = ToolbarCommand.Separator },
        new() { Command = ToolbarCommand.CreateLink },
        new() { Command = ToolbarCommand.Image },
        new() { Command = ToolbarCommand.CreateTable },
        new() { Command = ToolbarCommand.Separator },
        new() { Command = ToolbarCommand.Undo },
        new() { Command = ToolbarCommand.Redo }
    };
}

Navigation Guide

导航指南

Getting Started & Setup

入门与设置

📄 Read: references/getting-started.md

NuGet installation for all project types (Visual Studio, VS Code, .NET CLI)
Service registration and namespace imports
CSS theme and JS script references
Adding the first component to a page
Retrieving content as HTML, plain text, or character count

📄 阅读： references/getting-started.md

适用于所有项目类型（Visual Studio、VS Code、.NET CLI）的NuGet安装
服务注册和命名空间导入
CSS主题和JS脚本引用
向页面添加第一个组件
以HTML、纯文本或字符数形式检索内容

Toolbar Configuration

工具栏配置

📄 Read: references/toolbar.md

Toolbar types: Expand, MultiRow, Scrollable, Popup
Floating toolbar and offset configuration
Toolbar position (top or bottom)
Configuring toolbar items with
```
ToolbarItemModel
```
Custom toolbar items (template-based)

📄 阅读： references/toolbar.md

工具栏类型：展开式、多行、滚动式、弹出式
浮动工具栏和偏移配置
工具栏位置（顶部或底部）
使用
```
ToolbarItemModel
```
配置工具栏项
自定义工具栏项（基于模板）

Built-in Toolbar Tools Reference

内置工具栏工具参考

📄 Read: references/built-in-tools.md

Complete list of all
```
ToolbarCommand
```
enum values
Text formatting, font & styling, alignment, lists, hyperlinks
Image/table/link quick toolbar item commands
Undo/redo, fullscreen, print, source code, preview tools
Removing or reordering default toolbar items

📄 阅读： references/built-in-tools.md

所有
```
ToolbarCommand
```
枚举值的完整列表
文本格式化、字体与样式、对齐方式、列表、超链接
图片/表格/链接快捷工具栏项命令
撤销/重做、全屏、打印、源代码、预览工具
移除或重新排序默认工具栏项

Text Formatting

文本格式化

📄 Read: references/text-formatting.md

Bold, italic, underline, strikethrough, subscript, superscript, inline code
Text alignment (left, center, right, justify)
Ordered/unordered lists with custom number and bullet styles
Heading formats (H1–H6, paragraph, blockquote, code)
Line height configuration
Horizontal line, format painter, clear format
Markdown auto-format (inline and block shortcuts)

📄 阅读： references/text-formatting.md

粗体、斜体、下划线、删除线、下标、上标、行内代码
文本对齐（左对齐、居中、右对齐、两端对齐）
有序/无序列表，支持自定义编号和项目符号样式
标题格式（H1–H6、段落、块引用、代码块）
行高配置
水平线、格式刷、清除格式
Markdown自动格式化（行内和块级快捷方式）

Images, Video & Audio

图片、视频与音频

📄 Read: references/images-and-media.md

Image insertion from local machine or URL
```
RichTextEditorImageSettings
```
: SaveUrl, Path, AllowedTypes, EnableResize
Base64 vs server-side upload
Image quick toolbar configuration
Video and audio insertion and settings

📄 阅读： references/images-and-media.md

从本地机器或URL插入图片
```
RichTextEditorImageSettings
```
：SaveUrl、Path、AllowedTypes、EnableResize
Base64与服务器端上传对比
图片快捷工具栏配置
视频和音频插入及设置

Tables

表格

📄 Read: references/tables.md

Creating tables with
```
CreateTable
```
toolbar item
```
RichTextEditorTableSettings
```
: width, resize, custom styles
Table quick toolbar: add/remove rows & columns, merge cells, properties
Advanced table manipulation (cell selection, split, custom borders)

📄 阅读： references/tables.md

使用
```
CreateTable
```
工具栏项创建表格
```
RichTextEditorTableSettings
```
：宽度、调整大小、自定义样式
表格快捷工具栏：添加/删除行和列、合并单元格、属性设置
高级表格操作（单元格选择、拆分、自定义边框）

Editor Modes

编辑器模式

📄 Read: references/editor-modes.md

HTML editor mode (default WYSIWYG)
Markdown editor mode (
```
EditorMode.Markdown
```
)
IFrame vs DIV rendering mode
Source code view toggling

📄 阅读： references/editor-modes.md

HTML编辑器模式（默认所见即所得）
Markdown编辑器模式（
```
EditorMode.Markdown
```
）
IFrame与DIV渲染模式
源代码视图切换

Inline Mode

内联模式

📄 Read: references/inline-mode.md

Enabling inline toolbar (
```
InlineMode
```
)
Inline toolbar display on text selection
Use cases: comment editors, in-place content editing

📄 阅读： references/inline-mode.md

启用内联工具栏（
```
InlineMode
```
）
选中文本时显示内联工具栏
使用场景：评论编辑器、原地内容编辑

Custom Tools & Exec Commands

自定义工具与Exec命令

📄 Read: references/custom-tools.md

Adding custom toolbar buttons with
```
ToolbarItemModel
```
and templates
Executing commands programmatically with
```
ExecuteCommandAsync
```
Slash commands (
```
/
```
trigger menu) configuration
Format painter advanced settings (
```
RichTextEditorFormatPainterSettings
```
)

📄 阅读： references/custom-tools.md

使用
```
ToolbarItemModel
```
和模板添加自定义工具栏按钮
通过
```
ExecuteCommandAsync
```
以编程方式执行命令
斜杠命令（
```
/
```
触发菜单）配置
格式刷高级设置（
```
RichTextEditorFormatPainterSettings
```
）

Events

事件

📄 Read: references/events.md

```
RichTextEditorEvents
```
child component usage and wiring pattern
Lifecycle events:
```
Created
```
,
```
Destroyed
```
Focus/interaction:
```
Focus
```
,
```
Blur
```
,
```
OnToolbarClick
```
,
```
SelectionChanged
```

Content events:

ValueChange

BeforePasteCleanup

AfterPasteCleanup

Toolbar lifecycle:
```
OnActionBegin
```
,
```
OnActionComplete
```

Dialog events:

OnDialogOpen

DialogOpened

OnDialogClose

DialogClosed

Quick toolbar:

OnQuickToolbarOpen

QuickToolbarOpened

QuickToolbarClosed

Image events:

OnImageSelected

BeforeUploadImage

OnImageUploadSuccess

OnImageUploadFailed

ImageUploadChange

OnImageDrop

ImageDelete

Media events:

FileSelected

FileUploading

FileUploadSuccess

FileUploadFailed

FileUploadChange

OnMediaDrop

MediaDeleted

Resize events:
```
OnResizeStart
```
,
```
OnResizeStop
```
Toolbar status:
```
UpdatedToolbarStatus
```
Export events:
```
OnExport
```
,
```
OnExportFailure
```
Slash menu:
```
SlashMenuItemSelecting
```
Complete EventArgs class reference with all properties

📄 阅读： references/events.md

```
RichTextEditorEvents
```
子组件的使用和绑定模式
生命周期事件：
```
Created
```
、
```
Destroyed
```
焦点/交互：
```
Focus
```
、
```
Blur
```
、
```
OnToolbarClick
```
、
```
SelectionChanged
```

内容事件：

ValueChange

、

BeforePasteCleanup

、

AfterPasteCleanup

工具栏生命周期：
```
OnActionBegin
```
、
```
OnActionComplete
```

对话框事件：

OnDialogOpen

、

DialogOpened

、

OnDialogClose

、

DialogClosed

快捷工具栏：

OnQuickToolbarOpen

、

QuickToolbarOpened

、

QuickToolbarClosed

图片事件：

OnImageSelected

、

BeforeUploadImage

、

OnImageUploadSuccess

、

OnImageUploadFailed

、

ImageUploadChange

、

OnImageDrop

、

ImageDelete

媒体事件：

FileSelected

、

FileUploading

、

FileUploadSuccess

、

FileUploadFailed

、

FileUploadChange

、

OnMediaDrop

、

MediaDeleted

调整大小事件：
```
OnResizeStart
```
、
```
OnResizeStop
```
工具栏状态：
```
UpdatedToolbarStatus
```
导出事件：
```
OnExport
```
、
```
OnExportFailure
```
斜杠菜单：
```
SlashMenuItemSelecting
```
包含所有属性的完整EventArgs类参考

Methods

方法

📄 Read: references/methods.md

Focus & selection:

FocusAsync

FocusOutAsync

SaveSelectionAsync

RestoreSelectionAsync

SelectAllAsync

GetSelectionAsync

Content retrieval:

GetTextAsync

GetSelectedHtmlAsync

GetCharCountAsync

GetXhtmlAsync

Command execution: all
```
ExecuteCommandAsync
```
overloads with typed args (image, link, table, video, audio, code block, format painter)

Toolbar control:

EnableToolbarItem

DisableToolbarItem

RemoveToolbarItem

Dialog & UI control:

ShowDialogAsync

CloseDialogAsync

ShowFullScreenAsync

PrintAsync

RefreshUIAsync

ShowSourceCodeAsync

Undo/redo:
```
ClearUndoRedoAsync
```
Full
```
CommandName
```
,
```
ToolbarCommand
```
, and
```
DialogType
```
enum references

📄 阅读： references/methods.md

焦点与选择：

FocusAsync

、

FocusOutAsync

、

SaveSelectionAsync

、

RestoreSelectionAsync

、

SelectAllAsync

、

GetSelectionAsync

内容检索：

GetTextAsync

、

GetSelectedHtmlAsync

、

GetCharCountAsync

、

GetXhtmlAsync

命令执行：所有带类型参数的
```
ExecuteCommandAsync
```
重载（图片、链接、表格、视频、音频、代码块、格式刷）

工具栏控制：

EnableToolbarItem

、

DisableToolbarItem

、

RemoveToolbarItem

对话框与UI控制：

ShowDialogAsync

、

CloseDialogAsync

、

ShowFullScreenAsync

、

PrintAsync

、

RefreshUIAsync

、

ShowSourceCodeAsync

撤销/重做：
```
ClearUndoRedoAsync
```
完整的
```
CommandName
```
、
```
ToolbarCommand
```
和
```
DialogType
```
枚举参考

Properties

属性

📄 Read: references/properties.md

Content & value:

Value

Placeholder

Readonly

Enabled

MaxLength

ShowCharCount

Editor behaviour:

EditorMode

EnterKey

ShiftEnterKey

EnableTabKey

EnableAutoUrl

EnableMarkdownAutoFormat

EnableClipboardCleanup

EnableXhtml

EnableHtmlEncode

EnableResize

Appearance & layout:

Height

Width

CssClass

ShowTooltip

FloatingToolbarOffset

Security & sanitization:

EnableHtmlSanitizer

AdditionalSanitizeAttributes

AdditionalSanitizeTags

DeniedSanitizeSelectors

Keyboard & shortcuts:
```
KeyConfigure
```
with full
```
ShortcutKeys
```
default bindings table

Persistence & auto-save:

EnablePersistence

SaveInterval

AutoSaveOnIdle

Undo/redo config:
```
UndoRedoSteps
```
,
```
UndoRedoTimer
```
HTTP integration:
```
HttpClientInstance
```
Full 37-property summary table

📄 阅读： references/properties.md

内容与值：

Value

、

Placeholder

、

Readonly

、

Enabled

、

MaxLength

、

ShowCharCount

编辑器行为：

EditorMode

、

EnterKey

、

ShiftEnterKey

、

EnableTabKey

、

EnableAutoUrl

、

EnableMarkdownAutoFormat

、

EnableClipboardCleanup

、

EnableXhtml

、

EnableHtmlEncode

、

EnableResize

外观与布局：

Height

、

Width

、

CssClass

、

ShowTooltip

、

FloatingToolbarOffset

安全与清理：

EnableHtmlSanitizer

、

AdditionalSanitizeAttributes

、

AdditionalSanitizeTags

、

DeniedSanitizeSelectors

键盘与快捷键：
```
KeyConfigure
```
及完整的
```
ShortcutKeys
```
默认绑定表

持久化与自动保存：

EnablePersistence

、

SaveInterval

、

AutoSaveOnIdle

撤销/重做配置：
```
UndoRedoSteps
```
、
```
UndoRedoTimer
```
HTTP集成：
```
HttpClientInstance
```
完整的37个属性汇总表

Data Binding & Value Management

数据绑定与值管理

📄 Read: references/data-binding.md

Two-way binding with
```
@bind-Value
```
One-way binding and programmatic value updates
```
ValueChange
```
event for detecting edits
Read-only mode (
```
Readonly
```
property)
Max length enforcement and character count display

📄 阅读： references/data-binding.md

通过
```
@bind-Value
```
实现双向绑定
单向绑定和编程式值更新
用于检测编辑的
```
ValueChange
```
事件
只读模式（
```
Readonly
```
属性）
最大长度限制和字符数显示

Paste Cleanup

粘贴清理

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

```
RichTextEditorPasteCleanupSettings
```
configuration
Stripping/keeping specific HTML attributes and styles on paste
Forcing plain text paste
Enter key behavior (
```
EnterKey
```
,
```
ShiftEnterKey
```
)
Undo/redo manager configuration

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

```
RichTextEditorPasteCleanupSettings
```
配置
粘贴时保留/移除特定HTML属性和样式
强制粘贴纯文本
回车键行为（
```
EnterKey
```
、
```
ShiftEnterKey
```
）
撤销/重做管理器配置

Import & Export

导入与导出

📄 Read: references/import-export.md

Importing Word documents into the editor
Exporting content to Word (.docx) and PDF
HTTP client configuration for import/export services
Mail merge with dynamic data
WebAssembly performance optimizations for large documents

📄 阅读： references/import-export.md

将Word文档导入编辑器
将内容导出到Word（.docx）和PDF
用于导入/导出服务的HTTP客户端配置
动态数据邮件合并
针对大型文档的WebAssembly性能优化

Accessibility & Globalization

常见模式

—

带字符数统计的双向绑定编辑器

📄 Read: references/accessibility-globalization.md

WCAG 2.1 compliance details
Keyboard shortcuts and navigation reference
ARIA roles and screen reader support
RTL layout (
```
EnableRtl
```
)
Localization and culture configuration
XHTML validation

razor

<SfRichTextEditor @bind-Value="@HtmlContent" ShowCharCount="true" MaxLength="2000">
</SfRichTextEditor>

@code {
    private string HtmlContent { get; set; } = string.Empty;
}

Common Patterns

只读显示

Two-way bound editor with character count

—

razor

<SfRichTextEditor @bind-Value="@HtmlContent" ShowCharCount="true" MaxLength="2000">
</SfRichTextEditor>

@code {
    private string HtmlContent { get; set; } = string.Empty;
}

razor

<SfRichTextEditor Value="@HtmlContent" Readonly="true">
    <RichTextEditorToolbarSettings Visible="false" />
</SfRichTextEditor>

Read-only display

Markdown编辑器模式

razor

<SfRichTextEditor Value="@HtmlContent" Readonly="true">
    <RichTextEditorToolbarSettings Visible="false" />
</SfRichTextEditor>

razor

<SfRichTextEditor EditorMode="EditorMode.Markdown" @bind-Value="@MarkdownContent">
</SfRichTextEditor>

@code {
    private string MarkdownContent { get; set; } = "**Hello** world!";
}

Markdown editor mode

—

razor

<SfRichTextEditor EditorMode="EditorMode.Markdown" @bind-Value="@MarkdownContent">
</SfRichTextEditor>

@code {
    private string MarkdownContent { get; set; } = "**Hello** world!";
}

—