Nitro CMS JavaScript Bridge verbessert Editing im Vorschau-Modus

Neues Update: Headless CMS JavaScript Bridge mit highlightAndClick()

Wir freuen uns, ein wichtiges Update in Flyo vorzustellen, das die Bearbeitungserfahrung im CMS Preview Frame deutlich verbessert.

Mit der neuen Version der CMS JavaScript Bridge stehen ab sofort zentrale Funktionen zur Verfügung, die über NPM oder per CDN eingebunden werden können:

• Seiten neu laden direkt aus der Bridge heraus
• Inhalte öffnen und automatisch in den Block-Editor laden
• highlightAndClick() – das neue visuelle Feedback für editierbare Elemente

highlightAndClick() – Intuitives Editieren

Die neue Funktion highlightAndClick() sorgt dafür, dass editierbare Inhalte im Vorschau-Modus direkt erkennbar und leichter zugänglich sind.

So funktioniert es

• Beim Überfahren eines editierbaren Elements mit der Maus erscheint ein gelber Edit-Button.
• Ein Klick auf diesen Button öffnet den entsprechenden Block automatisch im Block-Editor.
• Der Mauszeiger wechselt beim Hover in eine Hand, sodass sofort klar ist: Hier kann editiert werden.
• Diese Effekte erscheinen nur, wenn die Webseite im Flyo-Vorschau-iframe eingebettet ist.

Das Ergebnis: Eine flüssige, intuitive und visuell ansprechende Editing-Experience für Redakteure.

Einfache Integration für Entwickler

Für Entwickler, die bereits eines der von Flyo bereitgestellten Framework-Integrationen nutzen, genügt es, einfach auf die neueste Version zu aktualisieren. Danach können editierbare Blöcke wie gewohnt implementiert werden:

• Astro: Verwende die editable funktion, Beispiel: <div {...editable(block)}>
• Laravel: Verwende die @editable direktive, Beispiel: <div @editable($block)
• Yii 2: Verwende das Editable widget, Beispiel: <div <?= Editable::attr($block) ?>>

Mit der CMS JavaScript Bridge und der neuen Funktion highlightAndClick() wird die Bearbeitung von Inhalten in Flyo noch einfacher, schneller und intuitiver. Entwickler profitieren von einer zentralen, updatefähigen Integration via NPM oder CDN, während Redakteure ein verbessertes visuelles Feedback im Vorschau-Modus erleben.

👉 Jetzt aktualisieren und die neuen Möglichkeiten direkt in euren Projekten testen!