Rich Text Editor

A WYSIWYG rich text editor built on Quill.js with toolbar formatting. Text is formatted directly as you type.

Basic Usage

A simple rich text editor with two-way data binding. Formatting appears directly as you type.

With Label

Associate a label with the editor for better accessibility.

Description

Toolbar Presets

Choose from preset toolbar configurations to match your needs.

Simple Toolbar

Standard Toolbar (Default)

Full Toolbar

No Toolbar

Toolbar Features

The toolbar provides quick access to formatting options. You can also use keyboard shortcuts.

Available Formatting (Full Toolbar)

Bold - Select text and click B or press Ctrl+B
Italic - Select text and click I or press Ctrl+I
Underline - Select text and click U or press Ctrl+U
~~Strikethrough~~ - Select text and click the strikethrough button
Headers - H1, H2, H3 heading levels via dropdown
Bullet List - Click the bullet list icon
Numbered List - Click the numbered list icon
Link - Select text and click link icon to add URL
Blockquote - Add quoted text blocks
Code Block - Add code snippets

Pre-populated Content

The editor can be initialized with existing HTML content.

HTML Output

<h2>Welcome to the Rich Text Editor</h2>
<p>This is a <strong>bold</strong> statement and this is <em>italic</em> text.</p>
<h3>Features</h3>
<ul>
<li>Write with visual formatting</li>
<li>See your changes immediately</li>
<li>Use keyboard shortcuts for quick formatting</li>
</ul>
<p>Enjoy writing!</p>

Height Control

Control the editor height with MaxHeight or fixed Height properties.

MaxHeight="200px" (scrollbar appears after 200px)

Height="150px" (fixed height, always shows scrollbar when needed)

Disabled State

The editor can be disabled to prevent user input.

Form Integration

Use the editor within forms for content submission.

Submit Feedback

Share your thoughts with us using rich text formatting.

Your Feedback

Usage Notes

Setup requirements, key features, and accessibility information.

API Reference

Component parameters and their types.

Prop	Type	Default	Description
Value	string?	—	HTML content. Use @bind-Value for two-way binding.
Toolbar	ToolbarPreset	Standard	Preset toolbar configuration: None, Simple, Standard, Full, Custom.
Placeholder	string?	—	Placeholder text shown when the editor is empty.
Id	string?	—	HTML id for associating with a Label component.
MinHeight	string?	—	Minimum height of the editor area.
MaxHeight	string?	—	Maximum height; a scrollbar appears when content exceeds this.
Height	string?	—	Fixed height for the editor area.
Disabled	bool	false	When true, prevents editing.
ReadOnly	bool	false	When true, content is read-only but still selectable.
Class	string?	—	Additional CSS classes for the root element.

Previous Responsive Nav Next Scroll Area