Community Budget Report: Ein modernes Rich-Text-Erlebnis mit TipTap

Ein neuer Ansatz für den TYPO3-Editor der Zukunft

Mit Unterstützung des Community Budget Q3/2025 wurde ein bedeutender Meilenstein erreicht: Ein Prototyp und eine Beta-Version eines modernen, leistungsfähigen Rich-Text-Editors (RTE) auf Basis von TipTap sind fertiggestellt. Ziel des Projekts war es, den bisherigen CKEditor 5 durch eine moderne, flexible und benutzerfreundlichere Alternative zu ergänzen – entwickelt von in2code, unter der Leitung von Florian Langer, Felix Ranesberger, Bastien Lutz und Andreas Nedbal.

Der neue Ansatz verfolgt ein klares Ziel: Die Redaktionsarbeit im TYPO3-Backend soll wieder intuitiv, effizient und angenehm werden – ohne technische Hürden, aber mit vollem Funktionsumfang.


Hintergrund: Das Problem mit CKEditor 5

Bereits 2023 hatte Florian Langer in einem vielbeachteten Blogbeitrag das sogenannte „CKEditor 5 Dilemma“ beschrieben: Die Migration brachte zahlreiche Herausforderungen mit sich – von eingeschränkter Erweiterbarkeit bis zu komplexen Konfigurationsstrukturen.

Viele Entwickler:innen teilten dieses Feedback. Statt Kritik zu üben, entschied sich das Projektteam, selbst aktiv zu werden – mit einer eigenen, zukunftsorientierten Alternative auf Basis von TipTap, einem modernen, modularen RTE-Framework.

Ein leistungsfähiger, intuitiver Editor ist das Herzstück jedes CMS. Genau dort setzt das Projekt an: mit einer modernen, erweiterbaren und nachhaltigen Lösung für die kommenden TYPO3-Versionen.

Einführung: Die neue TipTap-Extension

Die neue TipTap-Erweiterung integriert das RTE-Framework nahtlos in TYPO3. Die Konfiguration erfolgt – wie gewohnt – über einfache YAML-Dateien im Site Package, z. B. unter Configuration/RTE/Full.yaml.

Der aktuelle Stand ist ein funktionsfähiger Prototyp, der jetzt in die Test- und Feedbackphase der Community übergeht.

Funktionsübersicht der Beta-Version

Bereits jetzt unterstützt der TipTap-RTE viele Kernfunktionen, die für die tägliche Arbeit entscheidend sind:

  • Überschriften: Verschiedene Hierarchieebenen für strukturierte Inhalte
  • Blockzitate: Für Hervorhebungen und Zitate
  • Standard-Formatierungen: Fett, Kursiv, Unterstrichen, Durchgestrichen
  • Listen: Geordnete und ungeordnete Aufzählungen
  • Textausrichtung: Links, rechts, zentriert, Blocksatz
  • CSS-Klassen: Zuweisung vordefinierter Klassen wie im CKEditor
  • TYPO3-Link-Wizard: Vollständige Integration für interne und externe Links
  • HTML-Quellcode-Ansicht: Direkter Zugriff auf den HTML-Code
  • Undo/Redo: Klassische Rückgängig-/Wiederholen-Funktion
  • Bubble-Menü: Kontextmenü für schnelle Formatierungen beim Markieren von Text
  • Drag-and-Drop-Blöcke: Textelemente können per Drag & Drop verschoben werden – ein Komfort, den CKEditor bislang nicht bietet.

Geplante Erweiterungen

Einige Funktionen sind noch in Entwicklung oder für spätere Versionen vorgesehen:

  • Tabellen-Unterstützung
  • Sonderzeichen-Auswahl
  • Direkter Bild-Upload (nicht priorisiert, da TYPO3 bereits ein starkes „Text-Media“-Element bietet)

Auch die Integration eigener Custom Plugins soll künftig einfacher werden – Ziel ist eine unkomplizierte Einbindung komplexerer Erweiterungen.

Technische Umsetzung

Die Integration basiert auf Vue.js, wodurch sich die Vorteile von TipTap als „headless“ RTE optimal nutzen lassen. Das Team hat die Benutzeroberfläche komplett neu entwickelt, um sie optisch und funktional perfekt ins TYPO3-Backend einzubetten. Das Ergebnis ist ein Editor, der sich nativ anfühlt – nicht wie ein Fremdkörper, sondern wie ein Teil des TYPO3-Kerns.

Das Team hinter dem Projekt

Ein besonderer Dank gilt dem Entwicklungsteam von in2code, das den Prototyp in Rekordzeit realisiert hat:

  • Felix Ranesberger – Frontend
  • Bastien Lutz – Backend
  • Andreas Nedbal – Core Contributor & Backend
  • Florian Langer – Projektinitiator und Koordination

Ihr gemeinsames Ziel: TYPO3 um einen modernen, flexiblen und wartungsfreundlichen Editor zu bereichern.

Mitmachen und Feedback geben

Die Beta-Version steht zur Verfügung – wer sie testen möchte, findet alle Informationen im GitHub-Repository typo3-tiptap. Nach der Installation ersetzt TipTap den CKEditor im TYPO3-Backend automatisch.

Community-Feedback ist ausdrücklich erwünscht: Ob Bug-Report, Verbesserungsvorschlag oder Funktionswunsch – jede Rückmeldung hilft, den Editor weiter zu optimieren.

Diskussionen und Rückmeldungen können direkt über GitHub Issues oder im TYPO3-Slack-Channel eingereicht werden.

Ausblick: Ein Schritt in Richtung TYPO3 v14

Der TipTap-RTE ist mehr als ein Experiment – er ist Teil der strategischen UX-Weiterentwicklung von TYPO3. Ziel ist es, die Redaktionsarbeit zu vereinfachen, die Erweiterbarkeit zu verbessern und langfristig eine Lösung zu schaffen, die ihren Weg in den TYPO3 Core finden könnte.

Bis dahin bleibt die Extension frei verfügbar und wird kontinuierlich weiterentwickelt – mit tatkräftiger Unterstützung der Community.

Der neue TipTap-Editor ist ein mutiger Schritt in Richtung Zukunft. Er verbindet moderne Technologie mit der TYPO3-Philosophie: Offenheit, Erweiterbarkeit und Qualität. Ein großes Dankeschön an das Projektteam – und an alle Community-Mitglieder, die durch das Community Budget Innovation im TYPO3-Ökosystem möglich machen.