syncfusion-blazor-rich-text-editor

What this skill does

# 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](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](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](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](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](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](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](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](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](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](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](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](refe