Live-Editor verstehen#

Der Live-Editor ist neu in easyWebsite 3.0.0. Er bringt die Bearbeitung auf Git-Basis in den Browser, ohne das Repository als einzige Quelle aufzugeben. Die Einrichtung beschreibt Live-Editor einrichten.

Das Repository bleibt die Quelle#

Nach der Anmeldung klont der Editor den konfigurierten Branch in den Browser und hält ihn lokal im Speicher (IndexedDB). Alles, was du tippst, landet zuerst in dieser lokalen Kopie.

• Save fasst alle offenen Änderungen in einem Commit zusammen und pusht ihn. Autor:in ist dein openCode-Konto.
• Discard verwirft alle offenen Änderungen.
• Sync holt neue Commits aus dem Repository.

Veröffentlicht wird wie gewohnt über die Pipeline. Ohne Schreibrecht auf den Branch zeigt der Editor einen Lesemodus. Du kannst einen eigenen Branch anlegen und daraus direkt einen Merge Request erstellen.

Was du bearbeiten kannst#

• Seiten (.md, .mdx) visuell mit Blöcken: Überschrift, Absatz, Listen, Zitat, Bild, Code, Tabelle, Hinweis, FAQ, Call-to-Action und Trennlinie
• Seiteneinstellungen, die ins Frontmatter geschrieben werden: Titel, Beschreibung, Sprache, Layout, Inhaltsverzeichnis, SEO und Open Graph
• Navigation in _meta.yaml per Drag-and-drop, inklusive Menütitel und Sichtbarkeit
• Abkürzungen in der abbreviations.yaml über „Begriff erklären“
• Projekteinstellungen wie Theme, Logo, Dachmarke und Copyright, gespeichert in der .gitlab-ci.yml

Die Vorschau zeigt jede Seite im echten Layout deiner Webseite. Zu jeder Datei gibt es eine Versionshistorie, aus der du ältere Stände wiederherstellen kannst.

Barrierefreiheit vor dem Commit#

Vor jedem Speichern prüft der Editor die geänderten Seiten auf eine Auswahl von Regeln, die sich an WCAG-Kriterien orientieren. Dazu gehören Dokumentsprache, Alt-Texte von Bildern, leere Überschriften und Links, die Reihenfolge der Überschriftenebenen, Linktexte und Kopfzeilen von Tabellen.

• Fehler blockieren das Speichern, zum Beispiel „Dokumentsprache fehlt in Frontmatter/Metadaten“ oder „Bild benötigt Alt-Text oder eine explizite Dekorativ-Markierung“.
• Hinweise musst du bestätigen, zum Beispiel „Überschriftenebene 3 folgt direkt auf Ebene 1“.

Auch eine fehlerhafte _meta.yaml blockiert das Speichern.

Die Prüfung deckt bisher nur einen Teil der Anforderungen ab und ersetzt keine vollständige Prüfung deiner Webseite. Wir bauen den Regelsatz weiter aus. Für eine Prüfung der fertigen Webseite in der Pipeline siehe Barrierefreiheitsprüfung einrichten.

Grenzen#

• Der Editor unterstützt nur Repositories auf gitlab.opencode.de.
• Eigene MDX-Komponenten, import/export und Ausdrücke kann der visuelle Editor nicht darstellen. Öffnest du eine solche Seite visuell, können diese Teile verloren gehen.
• Bilder, die du in eine Seite einfügst, werden direkt in die Seite eingebettet statt als eigene Datei abgelegt.
• Projekteinstellungen funktionieren nur im Easy Mode, weil sie in der .gitlab-ci.yml gespeichert werden.
• Die Navigation lässt sich nur in _meta.yaml umsortieren, nicht in _meta.ts oder _meta.json.

Sicherheit#

• Das Anmelde-Token hat Zugriff auf die GitLab-API und liegt nur für die Dauer der Browser-Sitzung im Session Storage.
• Clone und Push laufen über einen CORS-Proxy, solange gitlab.opencode.de für Git keine CORS-Header sendet. Der Proxy leitet dabei auch dein Anmelde-Token weiter.
• Die lokale Kopie des Repositorys bleibt nach dem Abmelden im Browser. Entferne sie bei Bedarf über Reset editor im Hilfemenü.
• Der KI-Assistent ist ein Alpha-Feature. Er schickt den Inhalt der geöffneten Seite an den gewählten Anbieter (Ollama oder Mistral) und speichert einen API-Schlüssel unverschlüsselt im Local Storage. Er ändert nur die geöffnete Seite und committet nie selbst.