syncfusion-blazor-rich-text-editor

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:

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

2. Register in Program.cs:

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

3. Add to _Imports.razor:

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

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

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

<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

• Enabling or disabling the toolbar with RichTextEditorToolbarSettings.Enable
• 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, EnableChunkMessages
• 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

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

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

Read-only display

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

Markdown editor mode

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

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