Editable Editierbar
Einführung
Ein Inline-Textfeld, das als einfacher Text angezeigt wird, bis es aktiviert wird (durch Fokus, Klick oder Doppelklick), und dann in ein vollständig bearbeitbares Texteingabefeld mit Übermittlungs- und Abbruchauslösern wechselt. Perfekt für Inline-Detaileditoren, Dokument-Umbenennungen und Einstellungslisten.
Die Editable-Komponente ist vollständig als interaktiver editable-Block in den Page Builder integriert und ermöglicht es Content-Autoren und Entwicklern, beschreibende Labels, Platzhalter, Größen, Auslösemodi und Übermittlungsregeln direkt innerhalb des CMS zu konfigurieren.
Verwendung über den CMS Page Builder (JSON)
Diese Beispiele veranschaulichen, wie Content-Editoren interaktive editierbare Felder innerhalb von JSON-Seitenschemata (content/pages/*.json) binden und strukturieren.
1. Standard-Fokusaktivierung
Das Feld wird sofort aktiviert, wenn es fokussiert (per Tab) oder angeklickt wird, was ein reibungsloses und schnelles Tabben über mehrere Zeilen von Präferenzkonfigurationen ermöglicht.
{
"type": "editable",
"label": "Project Name",
"defaultValue": "Artefact UI Suite",
"placeholder": "Enter project name...",
"size": "md",
"activationMode": "focus",
"submitMode": "both",
"interactive": true
}
2. Doppelklick-Titel-Anpasser
Repliziert das Standardverhalten von Dateisystemen. Das Label wird als statischer Fettdruck angezeigt und wechselt erst bei Doppelklick in ein Eingabefeld. Ideal für Seitenüberschriften oder Dokumentdateititel.
{
"type": "editable",
"label": "Document Title",
"defaultValue": "Annual_Report_2025",
"placeholder": "Untitled document",
"size": "lg",
"activationMode": "dblclick",
"submitMode": "enter",
"interactive": true
}
3. Dichtes Layout-Wertfeld (Extra-kleine Skala)
Zeigt eine sehr kompakte Größenskala, die für dichte Tabellendatenraster, Sidebar-Metadatenauflistungen oder sekundäre Attribute konzipiert ist.
{
"type": "editable",
"label": "Port Config",
"defaultValue": "8080",
"placeholder": "Set port...",
"size": "xs",
"activationMode": "click",
"submitMode": "blur",
"interactive": true
}
CMS-Konfigurationsreferenz
Diese Felder ordnen sich direkt den Sveltia-CMS-Blockeigenschaften unter dem editable-Objektschema zu, das in public/admin/config.yml deklariert ist.
| Eigenschaft | CMS-Feldtyp | Standard | Beschreibung / Unterstützte Optionen |
|---|---|---|---|
Beschriftungstext (label) | string | - | Beschreibendes visuelles Label, das über der editierbaren Wertvorschau gerendert wird. |
Standardwert (defaultValue) | string | - | Der anfängliche Textinhalt, der im Feld geladen wird. |
Platzhalter (placeholder) | string | - | Leichter Platzhaltertext, der in der Vorschau angezeigt wird, wenn der Wert leer gelassen wird. |
Größenskala (size) | select | "md" | Gesamthöhe, Polsterung und Textgrößen-Skalierung. • Optionen: "2xs", "xs", "sm", "md", "lg". |
Aktivierungsauslöser (activationMode) | select | "focus" | Legt fest, wie der Benutzer die Inline-Vorschau in den Bearbeitungsmodus aktiviert. • Optionen: "focus" (bei Fokus/Klick), "click" (Einfachklick), "dblclick" (Doppelklick), "none" (benötigt Trigger-Klick). |
Übermittlungshandler (submitMode) | select | "both" | Legt fest, welche Interaktion die Änderungen zurück in den Zustand übergibt. • Optionen: "enter" (Enter-Taste), "blur" (Fokus verlieren), "both" (sowohl Enter als auch Blur), "none" (benötigt manuelle Übermittlung per Klick). |
Entwicklerhinweise & Barrierefreiheit
- Intelligente Interaktive Hydration: Da das Umschalten von Layout-Zuständen dynamisches Element-Swapping und Keydown-Abfangung erfordert, hydriert die Editable-Komponente standardmäßig als Preact-Insel auf Client-Maschinen.
- Barrierefreie Eingaben: Das Vorschauelement fungiert im inaktiven Zustand als semantisches Button (
role="button",tabIndex={0}) und ermöglicht es Bildschirmlesegeräten, den Bearbeitungsmodus über die Tastatur zu fokussieren und zu aktivieren. - Formularbereite Übermittlungen: Um die Integration mit Post-Formularen zu erleichtern, synchronisiert die Komponente ihre aktiven Werte mit einem nativen verborgenen Formular-Eingabefeld und stellt sicher, dass native Formularübermittlungen die committeten Bearbeitungen korrekt erfassen.