Syncfusion Blazor Rich Text Editor

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.

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

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

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

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)

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

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)

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

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)

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

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

Custom Tools & Exec Commands

📄 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
```
)

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

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

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

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

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

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

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

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

Read-only display

razor

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

Markdown editor mode

razor

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

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

syncfusion-blazor-rich-text-editor

NPX Install

Tags

SKILL.md Content

Syncfusion Blazor Rich Text Editor

When to Use This Skill

Quick Start

Navigation Guide

Getting Started & Setup

Toolbar Configuration

Built-in Toolbar Tools Reference

Text Formatting

Images, Video & Audio

Tables

Editor Modes

Inline Mode

Custom Tools & Exec Commands

Events

Methods

Properties

Data Binding & Value Management

Paste Cleanup

Import & Export

Accessibility & Globalization

Common Patterns

Two-way bound editor with character count

Read-only display

Markdown editor mode