AddOn
Live Preview für Artikel
Beschreibung
Live Preview ermöglicht eine direkte Vorschau von Frontend-Seiten im REDAXO-Backend – ohne Tab-Wechsel, ohne Browser-Reload-Raten, ohne Ablenkung vom Redaktionsalltag.Code of conduct
MIT license
Live Preview for REDAXO
Live Preview ermöglicht eine direkte Vorschau von Frontend-Seiten im REDAXO-Backend – ohne Tab-Wechsel, ohne Browser-Reload-Raten, ohne Ablenkung vom Redaktionsalltag.
Features
Geräte-Simulation
Desktop-Vollbild – Seite nimmt die gesamte Vorschaufläche ein, 1:1-Darstellung
Desktop mit Rahmen – realistischer Monitor-Bezel inkl. Monitor-Ständer, skaliert automatisch passend auf die verfügbare Fläche
Tablet – klassisches iPad-Design: breite Bezels, runder Home Button, Kamera-Dot
Mobile – modernes Smartphone-Design: Dynamic Island Pill, Home Indicator
github.com/FriendsOfREDAXO/live_preview
Umsetzung
Versionen
1.0.9
- Rechteprüfung für Zielartikel ergänzt:
LivePreviewUrlApiprüft nun zusätzlich zur Backend-Authentifizierung auch die Berechtigungen für den angefragten Artikel und die Sprache:clang-Recht des Nutzers- Struktur-Kategorie-Recht des Zielartikels
- Sidebar-Rendering gehärtet: Das Live-Preview-Panel wird nur gerendert, wenn der aktuelle Backend-Nutzer den Zielartikel in der gewählten Sprache auch wirklich sehen darf.
- Auth-Härtung: APIs verwenden nun eine valide User-Erzeugung über
rex_backend_login::createUser()statt einer reinen Session-Präsenzprüfung. - CSRF-Schutz für Toggle-API: Der Statuswechsel (aktiv/inaktiv) ist jetzt serverseitig mit CSRF-Token abgesichert.
1.0.7
responsive style fix
1.0.6
Fixes #1\n\n### Fixed\n\nWenn die vorgeschaute Frontend-Seite einen Hash-Anker in der URL hatte (z.B. https://example.com/#kontakt), scrollte das REDAXO-Backend durch einen Browser-Quirk zum gleichnamigen Element. Der Hash wird jetzt vor dem Setzen von iframe.src entfernt.
1.0.5
Removed\n\n- Slice-Scroll entfernt: Das automatische Scrollen zur bearbeiteten Slice-Position war nicht zuverlässig und wird in einer späteren Version neu umgesetzt\n\n### Fixed\n\n- load_frontend: true aus package.yml entfernt (war nur für Slice-Scroll benötigt)
1.0.3
Fixes in 1.0.3
- Darstellung nach Reload: Flex-Kette vervollständigt – iframe-Höhe füllt das floating Panel korrekt aus
- Header als Drag-Zone: Im Float-Modus kann der gesamte Panel-Header zum Verschieben genutzt werden (außer Toggle-Switch und X-Button)
- Bootstrap-Collapse blockiert: Verhindert ungewolltes Einklappen beim Klick auf den Header im Float-Modus
- Expand-Button deaktiviert: Im Float-Modus ausgegraut und ohne Funktion
1.0.2
Neu in 1.0.2
Draggable Panel
- Panel lässt sich per Drag-Handle (✥-Icon in der Toolbar) aus der Sidebar lösen und frei im Viewport positionieren
- Position und Breite werden in
localStoragegespeichert und nach Seitenreload wiederhergestellt - Platzhalter (gestrichelter Rahmen) markiert die ursprüngliche Stelle in der Sidebar
- X-Button im floating Panel-Heading bringt das Panel zurück an seinen Platz
1.0.1
Für Falko 🎉
What's Changed
- Toggle ohne Reload: iframe ist jetzt immer im DOM via
data-src. Beim Einschalten wirdsrc = data-srcdirekt per JS gesetzt – kein Seiten-Reload, kein PJAX nötig - Beim Ausschalten wird
src = about:blankgesetzt, der iframe lädt sofort ab - Panel-Body wird immer vollständig gerendert
1.0.0
Live Preview for REDAXO
Live Preview ermöglicht eine direkte Vorschau von Frontend-Seiten im REDAXO-Backend – ohne Tab-Wechsel, ohne Browser-Reload-Raten, ohne Ablenkung vom Redaktionsalltag.
Features
Geräte-Simulation
- Desktop-Vollbild – Seite nimmt die gesamte Vorschaufläche ein, 1:1-Darstellung
- Desktop mit Rahmen – realistischer Monitor-Bezel inkl. Monitor-Ständer, skaliert automatisch passend auf die verfügbare Fläche
- Tablet – klassisches iPad-Design: breite Bezels, runder Home Button, Kamera-Dot
- Mobile – modernes Smartphone-Design: Dynamic Island Pill, Home Indicator