MudExRichTextEditor
Blazor component · .NET 8, 9 & 10

A rich text editor
that feels like MudBlazor

MudExRichTextEditor wraps Quill 2 in a Blazor component that respects your MudBlazor theme, binds like any other input and ships with tables, mentions, image resizing, file attachments and speech-to-text. Works in WebAssembly and Server — and without MudBlazor too.

Read the docs Live demo GitHub

NuGet version NuGet downloads MIT license

Screenshot of the editor with its toolbar

Everything the editor already does

No wrapper gymnastics: parameters, two-way binding and form validation behave the way you expect from a Blazor input.

Real two-way binding

@bind-Value works like on any input — including Required validation inside a MudForm.

MudBlazor theming

Toolbar and editor surface follow your palette: light, dark and custom colors included.

Image resizing

Click any image to get resize handles. Pasted and dropped images can be compressed automatically.

Tables

Full table editing via QuillTableBetterModule — insert, merge, style and delete cells.

Mentions

Typed QuillMentionModule<T> with async suggestion lookup and click/hover callbacks.

Speech to text

A built-in microphone tool dictates straight into the document, using the component culture.

File attachments

Drop in a file dialog with upload hooks — return your own URL or let the editor inline a data URL.

Pluggable modules

Add any Quill module by implementing IQuillModule: JS, CSS and config in one class.

Three steps to a running editor

  1. Install the package

    dotnet add package MudExRichTextEditor

  2. Add the using to _Imports.razor

    @using MudExRichTextEditor

  3. Drop the component on a page

    @page "/"

<MudExRichTextEdit @bind-Value="_html" Height="320" />

@code {
    private string _html = "<p>Hello <b>MudBlazor</b>!</p>";
}

Start from a preset, not from scratch

QuillPresets bundles a matching toolbar and module set. Minimal is plain text formatting, Standard adds lists, links and images with compression, Full turns on colors, alignment, video and tables.

Preset reference →

Fully self-hostable

Every script and stylesheet is served from _content/MudExRichTextEditor. Since 9.5.1 the table module is bundled too, so no request ever leaves your host — air-gapped and locked-down environments work out of the box.

@using MudExRichTextEditor.Types

<MudExRichTextEdit @bind-Value="_html"
                   Tools="@QuillPresets.Standard.Tools"
                   Modules="@QuillPresets.Standard.Modules"
                   Height="360"
                   Immediate="true" />

Modules you can switch on

QuillBlotFormatterModule

Click-to-resize handles for images and embeds.

QuillImageCompressorModule

Downscales pasted and dropped images before they hit your storage.

QuillTableBetterModule

Tables with a context menu for rows, columns, merging and cell styling.

QuillMentionModule<T>

Async mention lookup over your own type, with several denotation chars.

@using MudExRichTextEditor.Extensibility

<MudExRichTextEdit @bind-Value="_html" Modules="@_modules" />

@code {
    private IQuillModule[] _modules = [
        new QuillBlotFormatterModule(),   // resize images by clicking them
        new QuillImageCompressorModule(), // shrink pasted/dropped images
        new QuillTableBetterModule(),     // tables (needs QuillTools.TableButton())
    ];
}

Ready to try it?

Install from NuGet, or open the live demo and poke at every toolbar button first.

NuGet Read the docs