---
name: RichTextEditor
description: Onesown Blazor Komponente RichTextEditor (Inputs). Verwende diesen Skill wenn du die RichTextEditor-Komponente verwenden, konfigurieren oder debuggen moechtest.
---

# RichTextEditor

**Namespace:** `Onesown.Blazor.Components`  
**Kategorie:** Inputs  
**Basisklasse:** `FormControlBase`  

Rich-Text-Editor auf Basis von Jodit mit konfigurierbarer Toolbar, MaxLength-Anzeige, Readonly-Modus und DataAnnotations-Validierung. Unterstützt verschiedene Toolbar-Presets (Textarea, Standard, Erweitert) und optional serverseitige Template-/Todo-Plugins.

**Live-Demo:** https://components.schini.com/demo/richtexteditor  

## Parameter

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``Value`` | ``string`` |  | Aktuell gebundener HTML-Wert des Editors. |
| ``ValueChanged`` | ``EventCallback<string>`` |  | EventCallback für Two-Way-Binding mit @bind-Value. Wird nach jeder Inhaltsänderung ausgelöst. |
| ``ValueExpression`` | ``Expression<Func<object>>`` |  | LINQ-Expression auf die gebundene Model-Property. Wird benötigt für DataAnnotations-Validierung und Label. |
| ``Required`` | ``bool`` |  | Markiert das Feld als Pflichtfeld für Validierungszwecke. Standard: false. |
| ``Readonly`` | ``bool`` | ``false`` | Setzt den Editor in den Nur-Lesen-Modus: keine Eingabe, Toolbar deaktiviert. Standard: false. |
| ``Toolbar`` | ``ToolbarEnum`` | ``ToolbarEnum.Textarea`` | Toolbar-Preset des Editors. Mögliche Werte: Textarea (minimal), Standard, Erweitert (viele Funktionen). |
| ``EnterElement`` | ``string`` |  | HTML-Element das beim Drücken von Enter eingefügt wird (z.B. "p" (Standard), "br", "div"). |
| ``MaxLength`` | ``int`` |  | Maximale Zeichenanzahl (ohne HTML-Tags). 0 = kein Limit. |
| ``MaxHeight`` | ``int?`` |  | Maximale Höhe des Editors in Pixeln. Danach wird der Inhalt scrollbar. 0 = keine Begrenzung. |
| ``JsonData`` | ``string`` |  | JSON-String der an JS-Plugins übergeben wird (z.B. Template-Liste für das Template-Plugin). |
| ``Snippets`` | ``List<SnippetEntry>`` |  | Liste von Textbausteinen für das insertSnippet-Plugin. Jeder Eintrag hat Label (Anzeigename) und Text (einzufügender HTML-Inhalt). |
| ``AutosaveMinutes`` | ``double`` | ``0`` | Autosave-Intervall in Minuten. 0 = deaktiviert. Bei aktiviertem Autosave wird der Inhalt automatisch im localStorage gesichert. |
| ``AutosaveKey`` | ``string`` |  | Stabiler Schlüssel für den localStorage-Autosave (z.B. "notiz-seite1"). Muss pro Editor eindeutig sein. Ohne diesen Parameter wird die zufällige Editor-ID verwendet – Einträge gehen beim Seiten-Reload verloren. |

## Geerbte Parameter (FormControlBase)

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``Size`` | ``string`` | ``OoSize.Md`` | Größe der Komponente. Mögliche Werte: OoSize.Xs, OoSize.Sm, OoSize.Md, OoSize.Lg, OoSize.Xl. Wird als CSS-Klasse am Root-Element gesetzt. |
| ``Id`` | ``string`` | ``Generator.GenerateRandomHtmlTagID()`` | Eindeutige HTML-ID des Input-Elements. Wird automatisch generiert und kann überschrieben werden (z. B. für Labels mit for-Attribut). |
| ``ShowLabel`` | ``bool`` | ``true`` | Blendet das Label über dem Eingabefeld ein oder aus. Standard: true. |
| ``IsFloatingLabel`` | ``bool`` | ``true`` | Aktiviert das schwebende Label (Floating Label), das beim Fokus oder bei Eingabe nach oben animiert. Standard: true. |
| ``Label`` | ``string`` |  | Beschriftung des Eingabefelds. Wird auch als Accessible-Name für Screenreader verwendet. |
| ``Placeholder`` | ``string`` | ``" "`` | Platzhaltertext im leeren Eingabefeld. Standard: Leerzeichen (verhindert Floating-Label-Sprung in Chrome). |
| ``AutoSaveCallback`` | ``EventCallback`` |  | Wird nach jeder Wertänderung ausgelöst und signalisiert der Seite, dass gespeichert werden soll. Kombinierbar mit TriggerAutoSaveCallbackOnlyIfValid. |
| ``TriggerAutoSaveCallbackOnlyIfValid`` | ``bool`` | ``true`` | Steuert ob AutoSaveCallback nur bei gültigem Wert ausgelöst wird. Standard: true. |
| ``AfterValueChanged`` | ``EventCallback`` |  | Wird nach jeder Wertänderung ausgelöst, unabhängig von der Gültigkeit des Werts. Geeignet für Live-Vorschau oder Seiteneffekte. |
| ``ShowValidationTooltip`` | ``bool`` | ``false`` | Zeigt Validierungsmeldungen als Tooltip neben dem Feld statt als Text darunter. Standard: false. |

## Hinweise

- Immer @bind-Value für Two-Way-Binding verwenden
- Für Formular-Validierung ValueExpression="() => _model.Property" setzen
- Komponente muss innerhalb eines &lt;Form&gt;- oder &lt;EditForm&gt;-Containers liegen, damit der EditContext greift
- AutoSaveCallback wird nach jeder gültigen Änderung ausgelöst, wenn TriggerAutoSaveCallbackOnlyIfValid=true (Standard)
- AfterValueChanged wird nach jeder Änderung ausgelöst, unabhängig von der Gültigkeit
- ShowValidationTooltip=true zeigt Validierungsmeldungen als Tooltip statt unter dem Feld
- Toolbar: Toolbar="ToolbarEnum.Textarea" für minimale Toolbar; ToolbarEnum.Standard oder ToolbarEnum.Erweitert für mehr Optionen
- MaxLength: MaxLength=500 begrenzt die Zeichenanzahl (HTML-Tags werden nicht mitgezählt)
- Readonly: Readonly="true" deaktiviert alle Eingaben und Toolbar-Buttons
- Enter-Element: EnterElement="br" steuert das beim Enter eingefügte HTML-Element (Standard: p)
- Max-Höhe: MaxHeight=400 begrenzt die Editorhöhe in Pixeln und aktiviert das Scrollen
- JSON-Daten: JsonData übergibt strukturierte Daten an JS-Plugins (z.B. Template-Liste)