Editor

Überblick

mmm-editor ist ein einfacher Rich-Text-Editor mit Toolbar für Basisformatierungen wie Fett, Kursiv, Unterstreichen, Listen und Blockformate.

Varianten und Subkomponenten

Die Komponente hat aktuell keine visuellen Varianten und keine öffentlichen Subkomponenten.

Inputs

Input	Typ	Beschreibung
`placeholder`	`string \| null`	Platzhaltertext für den Editor
`toolbarAriaLabel`	`string`	A11y-Label der Toolbar
`editorAriaLabel`	`string`	A11y-Label der Editorfläche
`helpText`	`string \| null`	Hilfetext unterhalb des Editors
`required`	`boolean`	Aktiviert eine einfache Pflichtfeldvalidierung

Outputs

Output	Typ	Beschreibung
`htmlChange`	`EventEmitter<string>`	Gibt den aktuellen HTML-Inhalt aus

Zusätzlich arbeitet die Komponente als ControlValueAccessor und Validator.

SCSS-Variablen

Wichtige Variablen:

--mmm-editor-background
--mmm-editor-border-color
--mmm-editor-border-radius
--mmm-editor-toolbar-gap
--mmm-editor-toolbar-padding
--mmm-editor-button-padding
--mmm-editor-button-border-radius
--mmm-editor-content-min-height
--mmm-editor-content-padding
--mmm-editor-help-font-size

Hinweise

Der Editor verwendet document.execCommand und ist bewusst kompakt gehalten.
Die Komponente gibt HTML aus; Sanitizing für spätere Darstellung muss im konsumierenden Kontext betrachtet werden.
Für Formulare ist die Forms-API der bevorzugte Integrationsweg.

Beispiel

<mmm-editor
  placeholder="Text eingeben..."
  helpText="Formatierungen sind über die Toolbar verfügbar."
  (htmlChange)="content = $event"
></mmm-editor>

<mmm-editor placeholder="Text eingeben..."></mmm-editor>