Version v3 Documentation
You are viewing documentation for an older version.
View latest (v4) documentation →
Rich Text Editor
A WYSIWYG editor built on Quill.js v2 in headless mode with a custom Blazor toolbar using BlazorBlueprint components. Use it to capture formatted text content in forms, CMS pages, comment fields, and anywhere rich text input is needed.
Default
A basic
RichTextEditor with the default ToolbarPreset.Standard toolbar, which includes headings, bold, italic, underline, strikethrough, lists, and links.
Use @bind-Value for two-way binding to an HTML string and Placeholder for empty-state guidance.
The editor automatically sanitizes HTML content to prevent XSS attacks.
Loading example…
Toolbar Presets
The
Toolbar parameter accepts a ToolbarPreset enum to control which formatting options are available.
Use ToolbarPreset.Simple for basic formatting (bold, italic, underline, lists), or ToolbarPreset.Full to include blockquotes and code blocks.
Set ToolbarPreset.None to hide the toolbar entirely for a plain rich-text area.
Loading example…
No Toolbar
Set
Toolbar to ToolbarPreset.None to render the editor without any toolbar.
This is useful for inline editing scenarios or when you provide your own external formatting controls.
Keyboard shortcuts for bold, italic, and underline still work even without a visible toolbar.
Loading example…
Height Configuration
Control the editor dimensions with
MinHeight, MaxHeight, or Height parameters.
Use MaxHeight to create a scrollable editor that grows until it reaches the limit, or Height for a fixed-size editing area.
The default MinHeight is "150px", which can be overridden for compact or expanded layouts.
Loading example…
Pre-populated Content
Initialize the editor with existing HTML content by setting the
Value parameter or binding with @bind-Value.
This is essential for edit forms where users need to modify previously saved content.
The editor preserves all formatting including headings, bold, italic, and list structures.
Loading example…
Disabled & Read-Only
Set
Disabled to true to fully disable the editor including the toolbar, applying a reduced-opacity appearance and preventing all interaction.
Set ReadOnly to true to make content visible and selectable but not editable, which is useful for previewing formatted content.
Both states prevent content modification while keeping the editor visually present in the layout.
Loading example…
Event Handling
Track content changes in real time using the
OnTextChange callback, which provides a TextChangeEventArgs object with the current Html, plain Text, content Length, and Delta information.
Additional events include OnSelectionChange for tracking cursor position and formatting, and OnFocus / OnBlur for focus management.
These events enable scenarios like character counting, auto-save, and real-time collaboration indicators.
Loading example…
Delta Format
Work with the native Quill Delta format for precise document manipulation and lossless storage.
Use
GetDeltaAsync() to retrieve content as Delta JSON and SetDeltaAsync() to restore content from a Delta JSON string.
Delta format preserves all formatting metadata and is ideal for storing rich text in databases or transmitting between clients.
Loading example…
Custom Styling
Use the
Class parameter to apply custom Tailwind CSS classes to the editor container for project-specific styling.
This lets you customize borders, backgrounds, and ring colors to match your design system or create themed editor variants.
The editor's focus ring and border colors can be overridden to integrate seamlessly with your application's visual language.
Loading example…
Comment Editor
A real-world composition pattern showing a compact comment editor with a simple toolbar, character limit feedback, and a submit button.
The
ToolbarPreset.Simple keeps the interface lightweight while still enabling essential formatting.
Combine OnTextChange with MaxHeight to create a contained, user-friendly comment input.
Loading example…
Form with Validation
A real-world pattern demonstrating the editor within a form context with a label, helper text, and ARIA attributes for validation state.
Set
AriaLabel to provide an accessible name, AriaDescribedBy to link to helper text, and AriaInvalid to indicate validation errors.
When AriaInvalid is true, the editor displays a destructive red border and ring to signal the error visually.
Loading example…
Toolbar Presets
The Toolbar parameter accepts a ToolbarPreset enum value that determines which formatting buttons appear.
Each preset is a superset of the previous one, making it easy to choose the right level of functionality for your use case.
| Preset | Contents |
|---|---|
| None | Plain editor, no toolbar |
| Simple | Bold, italic, underline, bullet/numbered lists |
| Standard | Simple + headers, strikethrough, links |
| Full | Standard + blockquote, code blocks |
| Custom | User-defined via ToolbarContent |
Public Methods
Use a component reference (@ref) to access these methods programmatically.
All methods are async and return Task or Task<T>.
| Method | Returns | Description |
|---|---|---|
| FocusAsync() | Task | Programmatically focus the editor |
| BlurAsync() | Task | Remove focus from the editor |
| GetHtmlAsync() | Task<string> | Get current content as sanitized HTML |
| SetHtmlAsync(string?) | Task | Set content from HTML (auto-sanitized for XSS prevention) |
| GetTextAsync() | Task<string> | Get plain text content without formatting |
| GetLengthAsync() | Task<int> | Get the character count of editor content |
| FormatAsync(string, object?) | Task | Apply formatting to the current selection |
| GetSelectionAsync() | Task<EditorRange?> | Get the current selection range (index and length) |
| SetSelectionAsync(int, int) | Task | Set the selection range by index and length |
| GetDeltaAsync() | Task<string> | Get content as Quill Delta JSON for lossless storage |
| SetDeltaAsync(string?) | Task | Set content from Quill Delta JSON |