Direkt zu den Inhalten springen

TYPO3 Visual Editor: Visuelles Frontend-Editing

TYPO3 kann mehr als Formulare im Backend. Es kann endlich so aussehen, wie Ihre Website wirklich aussieht.

Lange galt das Backend als Ort der Wahrheit – und das Frontend als Vorschau nach dem Speichern. Klicken. Speichern. Vorschau. Zurück. Wer das kennt, kennt das leise Stöhnen der Redaktion.

Der TYPO3 Visual Editor dreht das um: Sie arbeiten auf der fertigen Seite. Überschrift, Teaser, Button – dort, wo Besucher sie sehen. Und seit Version 1.8 liegen Sprachen nebeneinander im gerenderten Frontend.

Neu ist die Idee nicht. Neu ist, dass sie diesmal wirklich taugt.

Kleine Geschichte: Frontend-Editing war schon mal Teil des Core

Falls Sie das Gefühl haben, „das gab’s doch schon“: haben Sie Recht. Jahrelang steckte Frontend-Editing im TYPO3-Core, als System-Extension feedit.

Das Prinzip war schlicht: Backend-User im Frontend, Stift-Icons am Inhaltselement, Klick – und Sie landeten in der normalen Backend-Maske. Kein echtes Schreiben auf der Seite. Eher eine Abkürzung.

Mit TYPO3 v10 flog das aus dem Kern. Die Funktion hing ewig im Core, bekam aber wenig Liebe. Seitdem lebt feedit als Community-Extension weiter. 

Dann sollte der zweite Anlauf kommen: richtiges Inline-Editing mit CKEditor, Extension frontend_editing, Ziel Core. Wurde zu spät, zu unfertig – bewusst nicht ins LTS. „Wenn’s fertig ist, holen wir’s rein.“ Ist nie passiert. Die Extension blieb bei älteren Versionen stehen.

Daneben gibt’s heute leichte Varianten, die im Frontend ein Menü einblenden und wieder ins Backend-Formular springen. Praktisch. Aber immer noch: Seite ansehen, Formular ausfüllen, Seite prüfen.

Was visuelles Editieren heute heißt

Klassisch pflegen Sie Inhalte in Masken: Felder, Reiter, Sprachen-Dropdown, Speichern, Vorschau. Technisch sauber. Menschlich oft zäh.

Visuelles Frontend-Editing heißt: Sie sehen die echte Seite und fassen den Inhalt dort an.

Der Visual Editor (visual_editor, TYPO3 13 und 14) bringt:

  • Texte inline im fertigen Layout ändern
  • Elemente per Drag-and-Drop verschieben, anlegen, löschen
  • Änderungen prüfen, ohne ständig neu zu laden
  • Bedienung, die auch ohne Backend-Führerschein klappt

Kurz: Sie schreiben nicht über die Seite. Sie schreiben auf der Seite.

Eine Zeile mehr im Deutschen – und der Button rutscht unter die Falz. Im Formular merken Sie das nicht. Hier schon. Peinlich wird das dann nicht erst beim Go-live.

Technisch sitzt der Editor in einem Backend-Modul, die Seite läuft im iFrame. Nicht das alte Stiftchen auf der Live-Domain. Dafür echtes WYSIWYG, Workspaces, Context Panel für kniffligere Felder.

Backend bleibt Chef. Frontend wird Werkstatt.

Keine Sorge: TYPO3 wird dadurch kein Baukasten, der Struktur und Rechte über Bord wirft.

Sie bleiben eingeloggt als Backend-User. Rechte, Workspaces, Freigaben – das Gerüst bleibt. Der Visual Editor ist die bessere Oberfläche für den Alltag, nicht der Ersatz für das CMS.

Praktisch heißt das:

  1. Sie öffnen die Seite so, wie sie live wirkt.
  2. Bearbeitbare Bereiche sind markiert.
  3. Sie ändern Text direkt im Element.
  4. Speichern, prüfen, weiter – ohne Modultour durchs Backend.

Für Integratoren gilt: Die Extension markiert editierbare Stellen über Fluid-ViewHelper. In TYPO3 v14 klinkt sie sich in vorhandene Core-ViewHelper ein. Das Default-Theme Camino und die Standard-Templates von Fluid Styled Content spielen mit. Eigenes Theme? Dann gehören die Markierungen ins Template. Einmal sauber gemacht, hat die Redaktion Ruhe.

Das ist der Deal, den TYPO3 schon immer versprochen hat: strukturierte Inhalte und ein Arbeitsplatz, der sich nicht anfühlt wie eine Steuererklärung.

Sprachen nebeneinander: Visual Editor 1.8

Mit 1.8.0 kommt Side-by-Side-Mehrsprachigkeit im gerenderten Frontend.

Zwei Sprachen nebeneinander. Beides echt gerendert. Beides editierbar. Damit vergleichen Sie Übersetzungen im Layout, sehen Längenunterschiede sofort und kürzen Review-Schleifen. 

TYPO3 ist bei Mehrsprachigkeit stark. Sprachen, Fallbacks, getrennte Inhalte, große Sites. Das Problem war selten die Technik. Es war der Alltag.

Typischer Loop:

  • Deutsche Headline im Backend schreiben
  • Speichern
  • Frontend öffnen
  • Sprache umschalten
  • Englische Version prüfen
  • Feststellen, dass der CTA zwei Zeilen braucht
  • Zurück ins Formular
  • Kaffee nachschenken

Zwischen Headline und Layout liegen drei Klicks und ein Kontextverlust. Genau da verlieren Teams Zeit – und Qualität. Eine Übersetzung kann inhaltlich sitzen und trotzdem das Design zerlegen. Das sieht man nur, wenn beide Versionen wie Seiten nebeneinander stehen. Nicht als zwei Feldgruppen.

Bock auf Visuals? Schluss mit Backend-Yoga – einfach hinklicken, wo’s wehtut.

Zum Kontaktformular     E-Mail schreiben

Was Sie vor dem Einschalten klären sollten

Ein bisschen Ernüchterung gehört dazu. Sonst klingt das nach Magie, und Magie hat in Projekten selten Bestand.

  • Templates: Ohne markierte Bereiche im Template passiert wenig. Bei uns ist das erledigt – ChiWauWau-Themes spielen mit. Fremdes oder stark verbautes Fluid? Kurz prüfen, nicht raten.
  • Inhaltstypen: Standard-Elemente: Sweet Spot. Spezielle Extensions, knifflige Container, hart verdrahtetes HTML brauchen manchmal eine Nacharbeit. Lieber einmal ehrlich als hinterher ratlos auf eine nicht editierbare Box starren.
  • Erwartungen: Der Editor übersetzt nicht für Sie und schreibt keine Briefings. Er zeigt, was die Übersetzung mit dem Layout macht. Schlechte Texte sehen nur schneller peinlich aus. Das ist ein Feature.
  • Schulung: 30 Minuten an einer echten Seite schlagen jedes Handbuch. Zeigen Sie den Side-by-Side-Modus an einer Landingpage, nicht an der Datenschutzerklärung.

Danach ist die Frage meist nicht mehr „Brauchen wir das?“, sondern „Warum haben wir so lange im Formular rumgeklickt?“