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.

Toolbar Presets

Choose from preset toolbar configurations to match your needs.

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.

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.

Usage Notes

Setup Requirements

Add Quill.js CSS to your <head>: 

<link href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.core.css" rel="stylesheet" />

Add Quill.js script before the closing </body> tag: 

<script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>

Toolbar Presets

  • None - No toolbar, plain editing area
  • Simple - Bold, italic, underline, and lists
  • Standard - Headers, basic formatting, lists, links (default)
  • Full - All formatting options including blockquote and code blocks
  • Custom - Use ToolbarContent to provide your own toolbar

Key Features

  • WYSIWYG editing powered by Quill.js v2
  • Toolbar presets for different use cases
  • Keyboard shortcuts for bold, italic, and underline
  • Two-way data binding with @bind-Value
  • Delta (JSON) binding available via @bind-DeltaValue
  • Outputs clean HTML for storage and display
  • Height control via MinHeight, MaxHeight, and Height
  • Disabled and ReadOnly states

Accessibility

  • Supports ARIA labels and descriptions
  • Keyboard shortcuts for common formatting
  • Associate with Label component using Id parameter
  • Supports disabled and read-only states
  • Focus and blur event callbacks
An unhandled error has occurred. Reload 🗙