MudExRichTextEditor
Blazor-Komponente · .NET 8, 9 & 10

Ein Rich-Text-Editor
der sich nach MudBlazor anfühlt

MudExRichTextEditor verpackt Quill 2 in eine Blazor-Komponente, die dein MudBlazor-Theme respektiert, sich wie jedes andere Eingabefeld binden lässt und Tabellen, Mentions, Bildgrößenänderung, Dateianhänge und Spracheingabe mitbringt. Läuft unter WebAssembly und Server — und auch ohne MudBlazor.

Zur Dokumentation Live-Demo GitHub

NuGet version NuGet downloads MIT license

Screenshot des Editors mit Werkzeugleiste

Was der Editor schon mitbringt

Keine Wrapper-Verrenkungen: Parameter, Zwei-Wege-Bindung und Formularvalidierung verhalten sich so, wie man es von einem Blazor-Input erwartet.

Echte Zwei-Wege-Bindung

@bind-Value funktioniert wie bei jedem Input — inklusive Required-Validierung in einem MudForm.

MudBlazor-Theming

Toolbar und Editorfläche folgen deiner Palette: hell, dunkel und eigene Farben inklusive.

Bildgrößenänderung

Bild anklicken, Anfasser ziehen. Eingefügte und per Drag & Drop abgelegte Bilder lassen sich automatisch komprimieren.

Tabellen

Vollständige Tabellenbearbeitung über QuillTableBetterModule — Zellen einfügen, verbinden, formatieren und löschen.

Mentions

Typisiertes QuillMentionModule<T> mit asynchroner Vorschlagssuche und Klick-/Hover-Callbacks.

Spracheingabe

Ein eingebautes Mikrofon-Werkzeug diktiert direkt ins Dokument — in der Kultur der Komponente.

Dateianhänge

Datei-Dialog mit Upload-Hooks: eigene URL zurückgeben oder den Editor eine Data-URL einbetten lassen.

Erweiterbare Module

Beliebige Quill-Module über IQuillModule einbinden: JS, CSS und Konfiguration in einer Klasse.

In drei Schritten zum laufenden Editor

  1. Paket installieren

    dotnet add package MudExRichTextEditor

  2. Using in _Imports.razor ergänzen

    @using MudExRichTextEditor

  3. Komponente auf einer Seite platzieren

    @page "/"

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

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

Mit einem Preset starten statt bei null

QuillPresets bündelt passende Toolbar und Module. Minimal ist reine Textformatierung, Standard ergänzt Listen, Links und Bilder mit Komprimierung, Full schaltet Farben, Ausrichtung, Video und Tabellen frei.

Preset-Referenz →

Vollständig selbst hostbar

Alle Skripte und Stylesheets kommen aus _content/MudExRichTextEditor. Seit 9.5.1 ist auch das Tabellen-Modul mit dabei, damit keine Anfrage mehr deinen Host verlässt — abgeschottete Umgebungen laufen ohne Zusatzarbeit.

@using MudExRichTextEditor.Types

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

Module zum Zuschalten

QuillBlotFormatterModule

Anfasser zum Skalieren von Bildern und Embeds.

QuillImageCompressorModule

Verkleinert eingefügte und abgelegte Bilder, bevor sie in deinem Speicher landen.

QuillTableBetterModule

Tabellen mit Kontextmenü für Zeilen, Spalten, Verbinden und Zellformatierung.

QuillMentionModule<T>

Asynchrone Mention-Suche über deinen eigenen Typ, mit mehreren Auslösezeichen.

@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())
    ];
}

Lust es auszuprobieren?

Über NuGet installieren — oder erst in der Live-Demo jeden Toolbar-Button durchklicken.

NuGet Zur Dokumentation