Skip to main content Home Creators syncfusion blazor-ui-components-skills syncfusion-blazor-rich-text-editor
syncfusion-blazor-rich-text-editor Implements the Syncfusion Blazor Rich Text Editor (SfRichTextEditor) from Syncfusion.Blazor.RichTextEditor. Supports HTML, Markdown, and IFrame editor modes. Use this skills for toolbar configuration, image/video/audio insertion, table management, paste cleanup, import/export Word/PDF, accessibility, globalization, RTL, and inline or custom toolbar tool scenarios in Blazor applications.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/syncfusion/blazor-ui-components-skills --skill syncfusion-blazor-rich-text-editorThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository
name syncfusion-blazor-rich-text-editor description Implements the Syncfusion Blazor Rich Text Editor (SfRichTextEditor) from Syncfusion.Blazor.RichTextEditor. Supports HTML, Markdown, and IFrame editor modes. Use this skills for toolbar configuration, image/video/audio insertion, table management, paste cleanup, import/export Word/PDF, accessibility, globalization, RTL, and inline or custom toolbar tool scenarios in Blazor applications. metadata {"author":"Syncfusion Inc","version":"34.1.29","category":"File Viewers & Editors"}
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
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 >
<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
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
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
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
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
Image insertion from local machine or URL
RichTextEditorImageSettings: SaveUrl, Path, AllowedTypes, EnableResizeBase64 vs server-side upload
Image quick toolbar configuration
Video and audio insertion and settings
Tables
Creating tables with CreateTable toolbar item
RichTextEditorTableSettings: width, resize, custom stylesTable quick toolbar: add/remove rows & columns, merge cells, properties
Advanced table manipulation (cell selection, split, custom borders)
Editor Modes
HTML editor mode (default WYSIWYG)
Markdown editor mode (EditorMode.Markdown)
IFrame vs DIV rendering mode
Source code view toggling
Inline Mode
Enabling inline toolbar (InlineMode)
Inline toolbar display on text selection
Use cases: comment editors, in-place content editing
Custom Tools & Exec Commands
Adding custom toolbar buttons with ToolbarItemModel and templates
Executing commands programmatically with ExecuteCommandAsync
Slash commands (/ trigger menu) configuration
Format painter advanced settings (RichTextEditorFormatPainterSettings)
Events
RichTextEditorEvents child component usage and wiring patternLifecycle 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
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
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
Two-way binding with @bind-Value
One-way binding and programmatic value updates
ValueChange event for detecting editsRead-only mode (Readonly property)
Max length enforcement and character count display
Paste Cleanup
RichTextEditorPasteCleanupSettings configurationStripping/keeping specific HTML attributes and styles on paste
Forcing plain text paste
Enter key behavior (EnterKey, ShiftEnterKey)
Undo/redo manager configuration
Import & Export
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
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!";
}
syncfusion-blazor-diagram Build and troubleshoot Syncfusion Blazor diagrams using SfDiagramComponent. Trigger for flowcharts, org charts, mind maps, BPMN, UML sequence, swimlanes, symbol palettes, nodes/connectors/ports/annotations, layouts, data binding, serialization (load/save), export/print, and collaborative editing questions. Provide Blazor + Syncfusion setup steps, configuration patterns, and sample snippets.
syncfusion-blazor-pivot-table Use this skill when users ask how to implement Syncfusion Pivot Table/PivotView in Blazor. Trigger for Blazor components, data binding, OLAP analysis, aggregation, drill-down/drill-through, grouping, filtering, conditional formatting, exports (Excel/PDF/CSV), or pivot charts. Blazor-only, not React/Angular/Vue/JS.
Related occupations SOC
Based on SOC occupation classification
