Theme: ← Übersicht Builder Katalog-Verwaltung Tokens

Text-Editor (Eingabe)

Rich-Text-EINGABE mit Werkzeugleiste (fett, kursiv, unterstrichen, Überschrift, Listen, Zitat, Code, Link) — erzeugt genau das HTML, das der Sanitizer erlaubt; Gegenstück zur Anzeige ui.richtext

Im Builder nutzen
Components v1.0.0 Formulare AppDesktop component.editor

Nutzt: ui.icon

Beispiele

Mit Vorbelegung — Werkzeugleiste zeigt den Zustand an der Cursorposition
Produktbeschreibung

Diamond-Mesh-Set

Vierteiliges Set mit Gold-Knopf und Diamond-Mesh-Einsatz.

  • Front-Open-Bra
  • Taillengürtel mit Clips
Handwäsche empfohlen.
0 Zeichen
Leer mit Platzhalter (klein)
Notiz
0 Zeichen

Eigenschaften

PropTypDefaultBuilder-Label
labelstring""Label
htmlstring""Vorbelegung (HTML, wird sanitisiert)
placeholderstring"Text eingeben …"Platzhalter
heightstring: sm | md | lg"md"Höhe
counterbooleantrueZeichenzähler

* Pflicht-Prop

Events & Slots

Events: ⚡ change — im Surface per on: {<event>: {action, params}} verdrahtbar.

Genutzte Design-Tokens

border.hairlinecolor.action.primarycolor.border.defaultcolor.border.strongcolor.surface.defaultcolor.surface.sunkencolor.text.defaultcolor.text.linkcolor.text.mutedfocus.ring-colorfocus.ring-offsetfocus.ring-widthfont.family.defaultfont.family.monoform.backgroundform.borderform.border-focusform.placeholderleading.looseradius.controlradius.smsize.1size.2size.24size.3size.32size.4size.40size.5size.6size.8text.lgtext.mdtext.smtext.xsweight.mediumweight.semibold

LLM-Notizen

component.editor

Rich-Text-Eingabe. Gegenstück zu ui.richtext (Anzeige) — beide teilen denselben Whitelist-Sanitizer.

Wann nutzen

  • Beschreibungstexte, Notizen, E-Mail-Entwürfe in App-Fenstern.
  • Für reinen Text: ui.textarea. Für Quelltext-ANZEIGE: component.code-block.

Wichtige Props

  • html (Vorbelegung — läuft beim Rendern durch invisible_sanitize_rich), label, placeholder, height (sm|md|lg), counter.

Erzeugtes Markup

Die Werkzeugleiste ist auf die Sanitizer-Whitelist abgestimmt und erzeugt nur:

p · br · strong · em · u · h3 · blockquote · code · ul · ol · li · a[href]

Beispiel-Node


{
  "definition": "component.editor",
  "props": {"label": "Produktbeschreibung", "html": "<p>Erster Absatz</p>", "height": "md"},
  "on": {"change": {"action": "action.notify.show", "params": {"title": "Entwurf gespeichert"}}}
}

Hinweise

  • Emittiert change mit {html, text} bei jeder Änderung.
  • Einfügen übernimmt NUR Text (kein fremdes Markup).
  • Der Editor ist nie die Sicherheitsgrenze — beim Speichern serverseitig erneut sanitisieren.
  • Tastatur: Strg+B/I/U.