Kontakt
How-To

Visuell bearbeiten mit visual_editor

Die TYPO3-Extension visual_editor macht Inhalte direkt im späteren Frontend-Layout bearbeitbar – per Klick, mit Drag & Drop und mit Echtzeit-Vorschau, ganz ohne klassische Backend-Formulare.

Letzte Änderung: 12.09.2026

So funktioniert die visuelle Bearbeitung mit visual_editor im TYPO3-Backend

Was ist visual_editor?

visual_editor ist eine freie TYPO3-Extension, die es Redakteurinnen und Redakteuren ermöglicht, Inhalte direkt im Layout der späteren Website zu bearbeiten – statt über klassische Backend-Formulare. Texte, Rich-Text-Felder, Bilder und ganze Inhaltselemente lassen sich per Klick bearbeiten, verschieben oder neu anordnen, während die Seite dabei genauso aussieht wie im Frontend.

Die Extension wird von der TYPO3-Community unter dem Dach von FriendsOfTYPO3 entwickelt und ist per Composer installierbar (friendsoftypo3/visual-editor). Unterstützt werden TYPO3 13 und 14 sowie PHP 8.2 bis 8.5.

Funktionen im Überblick

  • Inline-WYSIWYG-Bearbeitung, die exakt dem späteren Frontend entspricht

  • Drag & Drop zum Verschieben, Hinzufügen und Löschen von Inhaltselementen

  • Echtzeit-Vorschau von Änderungen, ganz ohne Seiten-Reload

  • Barrierefreiheit nach WCAG 2.2 AA, getestet mit NVDA und VoiceOver

  • Mehrsprachige Bearbeitung mit Sprachvergleich nebeneinander (seit Version 1.8.0)

  • Workspace-Unterstützung und optionales automatisches Speichern

So bedienen Redakteure den visual_editor

Die Bedienung orientiert sich bewusst am Frontend: Mit einem Linksklick öffnet sich die Bearbeitung eines Textfelds, ein Mittelklick oder Strg+Klick folgt stattdessen einem Link. Über die integrierte Spotlight-Funktion lassen sich alle bearbeitbaren Bereiche einer Seite auf einen Blick hervorheben, und die Option „Leere anzeigen" macht sichtbar, welche Felder noch nicht befüllt sind.

  1. Bearbeitbare Bereiche über die Spotlight-Funktion hervorheben lassen

  2. Textfelder und Rich-Text-Inhalte per Linksklick direkt bearbeiten

  3. Links mit Mittelklick oder Strg+Klick öffnen, statt sie zu bearbeiten

  4. Inhaltselemente über die Drag-Handles verschieben

  5. Beim Ablegen die Strg-Taste gedrückt halten, um ein Element zu kopieren statt zu verschieben

  6. Mit „Leere anzeigen" gezielt noch unausgefüllte Felder finden

Aktueller Entwicklungsstand

Im August 2026 wurde ein von der TYPO3-Community finanziertes Budget-Projekt abgeschlossen, das Barrierefreiheit, mehrsprachige Bearbeitung und die Qualitätssicherung der Extension deutlich vorangebracht hat – unter anderem durch PHP- und Node.js-Unit-Tests, PHP-Funktionstests, ESLint- und PHPStan-Prüfungen sowie Rector-basierte Codequalitäts-Tools.

Der visual_editor gilt damit inzwischen als produktionsreif und wird bereits in großen, komplexen TYPO3-Projekten eingesetzt – bewusst jedoch ohne den Anspruch, ein vollständiger Page-Builder zu sein. Langfristiges Ziel ist eine engere Integration in den TYPO3 Core; im besten Fall könnte visuelle Bearbeitung Teil von TYPO3 v15 werden. Das ist derzeit allerdings eine Zielrichtung, noch keine bestätigte Core-Funktion.

Voraussetzungen und Installation

Die Installation erfolgt wie bei den meisten TYPO3-Extensions über Composer:

  • composer require friendsoftypo3/visual-editor
  • Die passenden ViewHelper (f:render.text, f:mark.contentArea) im Fluid-Template einbinden
  • Caches leeren

Anschließend steht die visuelle Bearbeitung im Backend zur Verfügung.

Bekannte Einschränkungen

Inhaltselemente, die über den recordAs-Parameter eingebunden sind, unterstützen aktuell kein Drag & Drop. Headless-Setups werden nur eingeschränkt unterstützt, bei Cross-Domain-Konfigurationen kann es zu Problemen bei der Kommunikation zwischen den Domains kommen. Bei Multi-Site-Setups müssen sich Redakteure außerdem auf jeder Domain einzeln anmelden.

Sollen Ihre Redakteure auch visuell bearbeiten können?

Wir richten den visual_editor für Ihre TYPO3-Website ein und binden ihn passend in Ihr Sitepackage ein.

Kostenlose Beratung