Text-Editor (Eingabe) — UI-Kit-Galerie

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

Prop	Typ	Default	Builder-Label
label	string	""	Label
html	string	""	Vorbelegung (HTML, wird sanitisiert)
placeholder	string	"Text eingeben …"	Platzhalter
height	string: sm \| md \| lg	"md"	Höhe
counter	boolean	true	Zeichenzähler

* Pflicht-Prop

Events & Slots

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

Stellschrauben (Komponenten-Tokens)

Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.

Token	Default
`--editor-action-primary`	`var(--color-action-primary)`
`--editor-border-default`	`var(--color-border-default)`
`--editor-border-strong`	`var(--color-border-strong)`
`--editor-focus-ring-color`	`var(--focus-ring-color)`
`--editor-focus-ring-offset`	`var(--focus-ring-offset)`
`--editor-focus-ring-width`	`var(--focus-ring-width)`
`--editor-form-background`	`var(--form-background)`
`--editor-form-border`	`var(--form-border)`
`--editor-form-border-focus`	`var(--form-border-focus)`
`--editor-form-placeholder`	`var(--form-placeholder)`
`--editor-radius-control`	`var(--radius-control)`
`--editor-radius-sm`	`var(--radius-sm)`
`--editor-surface-default`	`var(--color-surface-default)`
`--editor-surface-sunken`	`var(--color-surface-sunken)`
`--editor-text-default`	`var(--color-text-default)`
`--editor-text-link`	`var(--color-text-link)`
`--editor-text-muted`	`var(--color-text-muted)`

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.