15/10/2026 Marc CMS

TYPO3 Frontend Editing: Inhalte mit visual_editor direkt bearbeiten

Eine Überschrift ändern, ein Inhaltselement verschieben oder einen Text anpassen, ohne ständig zwischen TYPO3-Backend und Website zu wechseln? Mit der Extension visual_editor wird Frontend Editing in TYPO3 möglich. Du bearbeitest Inhalte direkt dort, wo sie später auch angezeigt werden.

Frontend Editing ist ein lang gehegter Wunsch der TYPO3-Community. Frühere Lösungen konnten sich nicht dauerhaft als fester Bestandteil des CMS etablieren. Mit visual_editor gibt es jetzt einen neuen Ansatz, der sich eng in TYPO3 integriert und langfristig sogar Teil des TYPO3-Cores werden könnte.

Wir zeigen dir, was der Visual Editor für Redakteure bietet und wie Entwickler ihre Templates dafür vorbereiten.

Was ist Frontend Editing in TYPO3?

Normalerweise bearbeitest du Inhalte in TYPO3 über das Backend. Du suchst die passende Seite im Seitenbaum, öffnest ein Inhaltselement und änderst beispielsweise eine Überschrift oder einen Text. Erst in der Vorschau siehst du, wie die Änderung auf deiner Website aussieht.

Mit Frontend Editing geht das einfacher: Du öffnest die Seite im Visual Editor, klickst auf einen bearbeitbaren Text und passt ihn direkt im Layout an. Das Ergebnis siehst du sofort.

Der Visual Editor berücksichtigt dabei das tatsächliche Frontend-Design. Du erkennst also unmittelbar, ob eine Überschrift zu lang ist oder der neue Text gut zum Layout passt.

Ein lang gehegter Wunsch der TYPO3-Community

Die Idee, Inhalte direkt im Frontend zu bearbeiten, ist in TYPO3 nicht neu. Bereits 2016 haben wir in unserem Beitrag TYPO3 Frontend Editing: Eine exklusive Vorschau über eine neue Extension berichtet. Damals wurde die Entwicklung über Crowdfunding finanziert. Geplant waren unter anderem die direkte Textbearbeitung und das Verschieben von Inhaltselementen per Drag-and-drop.

Die damalige Extension frontend_editing wurde zwar umgesetzt, konnte sich aber nicht dauerhaft als Standard etablieren.

Im März 2026 wurde mit visual_editor ein neuer Ansatz vorgestellt. Die Extension wird unter dem Dach von FriendsOfTYPO3 entwickelt und integriert sich enger in die technischen Grundlagen von TYPO3.

Auch die TYPO3 Association unterstützt die Weiterentwicklung. Im August 2026 wurde ein Community-Budget-Projekt abgeschlossen, das unter anderem die mehrsprachige Bearbeitung, Barrierefreiheit und Zuverlässigkeit verbessert hat.

Langfristig ist sogar eine Integration in den TYPO3-Core geplant. TYPO3 v15 wird dabei als mögliches Ziel genannt. Eine verbindliche Zusage gibt es dafür allerdings noch nicht.

Frontend Editing für Redakteure: So funktioniert visual_editor

Nach der Installation steht dir im TYPO3-Backend der Visual Editor als eigenes Modul zur Verfügung. Hier siehst du die Website so, wie sie auch deine Besucher sehen.

Der Unterschied zum klassischen Layout-Modul: Statt Inhaltselemente hauptsächlich über Eingabeformulare zu bearbeiten, arbeitest du direkt in der gerenderten Seite.

Dieses Video wird über eine externe Plattform (YouTube) gehostet. Das Laden bedarf der Zustimmung unserer Datenschutzbestimmungen.

Einstellung vornehmen

Video: TYPO3-Backend mit geöffnetem Visual Editor. Sichtbar sind die gerenderte Website, die Bearbeitungsoberfläche und die verfügbaren Funktionen.

Texte direkt bearbeiten

Klickst du auf einen bearbeitbaren Text, kannst du ihn unmittelbar ändern. Das funktioniert sowohl bei einfachen Textfeldern als auch bei Rich-Text-Inhalten, sofern sie entsprechend eingebunden wurden.

Die Formatierung orientiert sich am Frontend. Änderungen werden direkt angezeigt, ohne dass du die gesamte Seite neu laden musst.

Besonders bei kleinen Korrekturen sparst du dir so mehrere Arbeitsschritte.

Eine ausgewählte Überschrift im Visual Editor, die gerade direkt auf der Website bearbeitet wird.

Inhaltselemente verschieben, hinzufügen und löschen

Auch die Anordnung deiner Inhalte kannst du visuell verändern. Per Drag-and-drop verschiebst du Inhaltselemente an die gewünschte Position.

Über die Bedienelemente lassen sich außerdem neue Inhaltselemente hinzufügen und bestehende löschen. Hältst du beim Ablegen die Strg-Taste gedrückt, wird ein Inhaltselement kopiert, statt verschoben. Die Kopie ist zunächst deaktiviert und deshalb nicht direkt sichtbar.

Gerade bei längeren Seiten mit vielen Inhaltselementen ist das deutlich anschaulicher als das Sortieren über die klassische Backend-Ansicht.

Bearbeitbare Bereiche mit Spotlight erkennen

Nicht jeder Bereich einer Website ist automatisch bearbeitbar. Mit der Funktion Spotlight kannst du dir anzeigen lassen, wo Änderungen möglich sind.

Der Visual Editor hebt bearbeitbare Texte, Rich-Text-Felder, Bilder und Inhaltselemente hervor.

Ohne Spotlight

Mit Spotlight

Mit Leere anzeigen werden zusätzlich leere, aber bearbeitbare Felder sichtbar. Das ist besonders hilfreich, wenn ein Inhaltselement optionale Überschriften oder andere Felder enthält, die bisher nicht ausgefüllt wurden.

Mehrere Sprachen nebeneinander bearbeiten

Mit TYPO3 v14 unterstützt visual_editor auch eine mehrsprachige Ansicht.

Du kannst verschiedene Sprachversionen einer Seite nebeneinander öffnen und die Inhalte direkt in der jeweiligen Ansicht bearbeiten.

Das ist beispielsweise hilfreich, wenn du eine deutsche und eine englische Seite vergleichen möchtest. Du erkennst sofort, ob die Übersetzungen vollständig sind und wie sich unterschiedlich lange Texte auf das Layout auswirken.

Anstehende Änderungen kannst du anschließend gemeinsam speichern.

Änderungen speichern

Über die Speichern-Funktion übernimmst du deine Änderungen. Wenn Autosave aktiviert wurde, können Änderungen auch automatisch gespeichert werden.

Je nach Konfiguration und verwendeten Workspaces unterscheidet sich der weitere Veröffentlichungsprozess. Die üblichen TYPO3-Berechtigungen und Freigabeabläufe bleiben deshalb wichtig.

Noch ein praktischer Hinweis: Möchtest du einen Link öffnen, dessen Text bearbeitbar ist, verwendest du Strg beziehungsweise Cmd und Klick oder die mittlere Maustaste. Ein normaler Linksklick startet die Bearbeitung des Textes.

visual_editor installieren

Die Extension unterstützt in Version 1.x TYPO3 13 und TYPO3 14 sowie PHP 8.2 bis 8.5.

In Composer-basierten TYPO3-Projekten installierst du sie mit:

composer require friendsoftypo3/visual-editor

Anschließend müssen die benötigten Stellen in den Fluid-Templates für das visuelle Bearbeiten vorbereitet werden.

Bei TYPO3 v14 bringen das Theme Camino und die Standard-Templates von fluid_styled_content bereits eine entsprechende Integration mit.

Bei individuellen Site Packages oder eigenen Inhaltselementen sind zusätzliche Anpassungen notwendig.

Fluid-Templates für Frontend Editing vorbereiten

Damit visual_editor weiß, welche Inhalte bearbeitet werden dürfen, müssen die entsprechenden Felder und Inhaltsbereiche in den Templates erkennbar sein.

Dafür stehen in TYPO3 insbesondere die beiden Fluid-ViewHelper f:render.text und f:render.contentArea zur Verfügung.

Texte mit f:render.text direkt bearbeitbar machen

Der ViewHelper f:render.text ist eine wichtige Grundlage für das Inline Editing. Er stellt Textfelder so dar, dass visual_editor sie direkt bearbeiten kann.

Bisher wurde eine Überschrift beispielsweise so ausgegeben:

<h1>{record.header}</h1>

Mit dem neuen ViewHelper sieht das so aus:

<h1>{record -> f:render.text(field: 'header')}</h1>

Dabei passiert mehr als nur die Ausgabe des Textes. TYPO3 kennt das zugehörige Datenbankfeld und dessen Konfiguration. visual_editor kann diese Informationen nutzen, um das Feld zur direkten Bearbeitung anzubieten.

Ein weiterer Vorteil: Die bisherige Unterscheidung zwischen einfachem Text, mehrzeiligem Text und Rich Text entfällt im Fluid-Template.

Statt beispielsweise:

<f:format.nl2br>{record.description}</f:format.nl2br> 
<f:format.html>{record.bodytext}</f:format.html>

verwendest du:

<f:render.text record="{record}" field="description" /> 
<f:render.text record="{record}" field="bodytext" />

Der ViewHelper ermittelt anhand der TCA-Konfiguration, wie das jeweilige Feld ausgegeben werden muss. Bei einem Rich-Text-Feld berücksichtigt er beispielsweise die entsprechende Verarbeitung für HTML-Inhalte.

Das spart zusätzliche Formatierungs-ViewHelper und sorgt für eine einheitliche Ausgabe.

Wichtig ist, dass record als TYPO3-Record-Objekt vorliegt. Falls du noch mit klassischen Datenarrays arbeitest, kannst du den DataProcessor record-transformation nutzen:

lib.contentElement.dataProcessing.1768551979 = record-transformation

Anschließend steht das aufbereitete Record-Objekt im Fluid-Template zur Verfügung.

f:render.text auch mit Extbase-Datensätzen verwenden

Du kannst f:render.text nicht nur für Inhaltselemente verwenden, sondern auch für eigene Extbase-Datensätze.

Angenommen, deine Extension enthält ein Extbase-Model Event mit dem Feld description. Dann kannst du den Text direkt über das Model ausgeben:

<f:render.text record="{event}" field="description" />

TYPO3 wandelt das Extbase-Objekt intern in ein Record-Objekt um und verwendet die TCA-Konfiguration des Feldes für die Ausgabe.

Du benötigst dafür also keinen zusätzlichen record-transformation-DataProcessor.

Achte darauf, den Datenbank- beziehungsweise TCA-Feldnamen anzugeben, nicht den PHP-Property-Namen.

Wird beispielsweise die Extbase-Property $teaserText auf das Datenbankfeld teaser_text abgebildet, lautet die Ausgabe:

<f:render.text record="{event}" field="teaser_text" />

Die benötigten Datenbankfelder müssen im Model vorhanden beziehungsweise korrekt zugeordnet sein. Falls im TCA ein Datensatztyp definiert ist, muss auch dieses Feld im Model berücksichtigt werden.

So kannst du auch selbst entwickelte TYPO3-Extensions mit vergleichsweise wenig Aufwand auf die neue Textausgabe umstellen und für die visuelle Bearbeitung vorbereiten.

Bedingte Ausgaben berücksichtigen

Eine Besonderheit gibt es, wenn Felder nur ausgegeben werden sollen, wenn sie einen Wert besitzen.

Statt den ursprünglichen Feldwert zu prüfen, kannst du das Ergebnis von f:render.text in einer Variablen speichern:

<f:variable 
  name="header" 
  value="{record -> f:render.text(field: 'header')}" /> 

<f:if condition="{header}"> 
  <h2>{header}</h2> 
</f:if>

Das ist insbesondere dann relevant, wenn die Ausgabe vom Visual Editor um zusätzliche Informationen für das Inline Editing erweitert wird.

Möchtest du auf ein möglicherweise nicht vorhandenes Feld zugreifen, kannst du außerdem optional: true verwenden. Ohne diese Option führt ein fehlendes Feld zu einem Fehler.

Content Areas mit f:render.contentArea ausgeben

Neben der Bearbeitung einzelner Texte soll visual_editor auch das Verschieben und Einfügen von Inhaltselementen ermöglichen.

Dafür müssen die Bereiche, in denen sich Inhaltselemente befinden, entsprechend ausgegeben werden.

Mit TYPO3 v14.2 wurde dafür der ViewHelper f:render.contentArea eingeführt.

Eine bisherige Ausgabe könnte beispielsweise so aussehen:

<f:cObject 
  typoscriptObjectPath="lib.dynamicContent" 
  data="{colPos: '0'}" />

Mit PAGEVIEW und dem neuen ViewHelper genügt:

<f:render.contentArea contentArea="{content.main}" />

content.main enthält dabei die Inhaltselemente der Spalte mit dem Identifier main.

Der ViewHelper übernimmt die Ausgabe der Content Area und ermöglicht Erweiterungen wie visual_editor, die Inhalte entsprechend zu kennzeichnen.

PAGEVIEW und Backend-Layouts richtig konfigurieren

Damit TYPO3 die Content Areas anhand ihrer Namen bereitstellen kann, benötigst du eine passende Konfiguration des Backend-Layouts.

Besonders wichtig sind dabei zwei Eigenschaften im Page TSconfig:

• identifier gibt der Inhaltsspalte einen eindeutigen Namen, beispielsweise main, sidebar oder stage.
• slideMode legt fest, ob und wie Inhalte von übergeordneten Seiten übernommen werden.

Während identifier für die Zuordnung der Content Areas wichtig ist, benötigst du slideMode nur, wenn Inhalte von übergeordneten Seiten übernommen werden sollen.

Ein einfaches Backend-Layout kann beispielsweise so aussehen:

mod.web_layout.BackendLayouts.default {
    title = Standard
    config.backend_layout {
        colCount = 1
        rowCount = 2
        rows {
            1.columns.1 {
                name = Bühne
                colPos = 1
                identifier = stage
                slideMode = slide
            }
            2.columns.1 {
                name = Hauptinhalt
                colPos = 0
                identifier = main
            }
        }
    }
}

Die Spalte main enthält die normalen Seiteninhalte. Der Bereich stage kann dagegen Inhalte von einer übergeordneten Seite übernehmen, wenn auf der aktuellen Seite keine eigenen Elemente vorhanden sind.

Neben slide stehen auch collect und collectReverse zur Verfügung. Damit lassen sich Inhalte mehrerer Ebenen zusammenfassen.

Damit die Spalten im Fluid-Template über ihren Identifier angesprochen werden können, wird der page-content-DataProcessor verwendet. In Kombination mit PAGEVIEW sieht das TypoScript beispielsweise so aus:

page = PAGE
page.10 = PAGEVIEW
page.10 {
    paths.100 = EXT:my_sitepackage/Resources/Private/PageView/
    dataProcessing.10 = page-content
}

Anschließend kannst du die beiden Bereiche direkt ausgeben:

<f:render.contentArea contentArea="{content.stage}" /> 
<f:render.contentArea contentArea="{content.main}" />

Die Kombination aus PAGEVIEW, benannten Content Areas und f:render.contentArea vereinfacht die Pflege deiner Seitentemplates. Gleichzeitig schafft sie eine gute Grundlage für visuelles Bearbeiten.

Mehr zu PAGEVIEW: In unserem Beitrag PAGEVIEW in TYPO3 v13: FLUIDTEMPLATE nur einfacher zeigen wir dir ausführlich, wie das neue ContentObject funktioniert und wie du deine Seitentemplates darauf umstellst.

Verwendest du noch TYPO3 v13, kannst du Inhaltsbereiche stattdessen mit f:mark.contentArea kennzeichnen. Für TYPO3 v14 empfehlen wir f:render.contentArea.

Bekannte Einschränkungen und Besonderheiten

Bei der Integration solltest du einige Punkte beachten.

Individuelle Templates: Nur entsprechend vorbereitete Felder und Content Areas können visuell bearbeitet werden. Eigene Inhaltselemente müssen deshalb geprüft und gegebenenfalls angepasst werden.

Rich-Text-Formatierung: visual_editor verwendet die regulären CSS-Dateien deiner Website. Styles, die ausschließlich über contentsCss im TYPO3-RTE definiert wurden, stehen im Visual Editor nicht automatisch zur Verfügung.

Drag-and-drop: Bei bestimmten Konstruktionen mit f:render.contentArea und recordAs können die Anfasser zum Verschieben von Inhaltselementen fehlen.

Mehrere Domains: Bei Websites mit mehreren Domains musst du für die Bearbeitung auf den jeweiligen Domains angemeldet sein. Domainübergreifende und Headless-Setups sind nur eingeschränkt unterstützt. Der Einsatz der Extension multisite_belogin kann hier sinnvoll sein.

Barrierefreiheit: Die Oberfläche orientiert sich an WCAG 2.2 AA und berücksichtigt beispielsweise Tastaturbedienbarkeit und zugängliche Beschriftungen. Die Barrierefreiheit der gesamten Website hängt weiterhin von den verwendeten Templates und Inhalten ab.

Teste deshalb nach der Integration nicht nur die normale Textbearbeitung, sondern auch das Verschieben von Inhaltselementen, die Mehrsprachigkeit und die vorhandenen Berechtigungen.

Fazit: Frontend Editing macht TYPO3 noch redakteursfreundlicher

Mit visual_editor wird die Bearbeitung von TYPO3-Inhalten deutlich anschaulicher. Texte lassen sich direkt im Seitenlayout ändern, Inhaltselemente per Drag-and-drop verschieben und Übersetzungen nebeneinander vergleichen.

Auch für Entwickler bringt die Integration Vorteile. Mit f:render.text und f:render.contentArea stehen ViewHelper zur Verfügung, die nicht nur Frontend Editing ermöglichen, sondern auch die Ausgabe von Texten und Inhaltsbereichen vereinfachen.

Gerade in Verbindung mit PAGEVIEW ergibt sich ein moderner Ansatz für die Entwicklung von TYPO3-Templates.

Hast du visual_editor bereits ausprobiert? Hinterlasse uns gerne einen Kommentar.