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

Für REDAXO
^5.17
Veröffentlicht am
08.08.2026
Require / PHP
^8.1
  • Rechteprüfung für Zielartikel ergänzt: LivePreviewUrlApi prü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

Für REDAXO
^5.17
Veröffentlicht am
15.03.2026
Require / PHP
^8.1

responsive style fix

1.0.6

Für REDAXO
^5.17
Veröffentlicht am
13.03.2026
Require / PHP
^8.1

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

Für REDAXO
^5.17
Veröffentlicht am
13.03.2026
Require / PHP
^8.1

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

Für REDAXO
^5.17
Veröffentlicht am
12.03.2026
Require / PHP
^8.1

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

Für REDAXO
^5.17
Veröffentlicht am
12.03.2026
Require / PHP
^8.1

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 localStorage gespeichert 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 REDAXO
^5.17
Veröffentlicht am
12.03.2026
Require / PHP
^8.1

Für Falko 🎉

What's Changed

  • Toggle ohne Reload: iframe ist jetzt immer im DOM via data-src. Beim Einschalten wird src = data-src direkt per JS gesetzt – kein Seiten-Reload, kein PJAX nötig
  • Beim Ausschalten wird src = about:blank gesetzt, der iframe lädt sofort ab
  • Panel-Body wird immer vollständig gerendert

1.0.0

Für REDAXO
^5.17
Veröffentlicht am
12.03.2026
Require / PHP
^8.1

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