Rich-Text-Editor
Schreibfeld auf TipTap 3 mit Werkzeugleiste, Tastenkürzeln, Link-Eingabe und Zeichenzähler. Eingefügtes HTML aus Word oder Google Docs wird auf die erlaubten Marks und Knoten reduziert; toSafeHtml liefert die Ausgabe ohne Inline-Styles.
Live-Ausgabe
Jede Änderung meldet JSON und sanitisiertes HTML. Der Zeichenzähler bleibt bei 280 Zeichen; darüber markiert der Rahmen das Feld als ungültig.
Sanitisiertes HTML
Die Ausgabe erscheint nach der ersten Änderung.
Werkzeugleisten
full zeigt alle Formatierungen, minimal nur Fett, Kursiv und Link. Mit toolbar={false} bleibt der Rahmen ohne Leiste; readOnly blendet sie ebenfalls aus.
Zustände
Invalid färbt den Rahmen in der Danger-Farbe und setzt aria-invalid. ReadOnly zeigt Inhalte ohne Bearbeitung; maxLength zählt Zeichen und markiert Überschreitungen.
Playground
Werkzeugleiste, Zustände und Zeichenlimit frei kombinieren.
Barrierefreiheit
Der Schreibbereich ist ein mehrzeiliges Textfeld mit sichtbarem Fokusring am Rahmen. Jede Werkzeugleisten-Schaltfläche hat einen Namen und einen Tooltip mit Tastenkürzel; Strg+B, Strg+I, Strg+E und Strg+Shift+B funktionieren direkt im Text.
Eingefügtes HTML wird vor dem Einfügen bereinigt: Skripte, Styles, Event-Handler und fremde Attribute entfallen. Der Zeichenzähler ist über aria-describedby mit dem Feld verbunden und meldet Überschreitungen über aria-invalid.