Der CKEditor hat jahrelang gute Dienste geleistet – doch mit TYPO3 v14 entsteht Raum für einen modernen Ansatz. Das typo3-tiptap-Projekt integriert den TipTap-Editor, der auf der bewährten ProseMirror-Engine aufbaut, als vollwertiges FormEngine-Element. Das Projekt wurde vom Community Ideas Program Q3 2025 der TYPO3 Association gefördert.
Dieser Fork ergänzt die TYPO3-v14-Kompatibilität, Workspace-Unterstützung und dokumentierte Eigenheiten rund um die Rendering-Boundary – damit die Extension in v14-Projekten produktiv einsetzbar ist.
Inhaltsverzeichnis
Überblick
Was wurde gemacht
Funktionen im Detail
Installation
Überblick
typo3-tiptap ist eine TYPO3-Extension, die den TipTap-Editor als eigenes FormEngine-Element bereitstellt. TipTap baut auf ProseMirror auf und bietet ein sauberes Plugin-System, das sich über YAML-Konfiguration in TYPO3 abbilden lässt – Toolbar-Buttons, Bubble-Menu und Custom-Plugins lassen sich je Textfeld granular steuern.
Das Upstream-Projekt stammt von in2code GmbH und wurde durch das Community Ideas Program Q3 2025 der TYPO3 Association gefördert. Es handelt sich damit nicht um ein privates Experiment, sondern um ein community-getragenes Vorhaben mit offizieller Förderung.
Dieses Paket erfordert TYPO3 ^14.0 und PHP >=8.3.0. EXT:workspaces ist optional, aber empfohlen, wenn Draft-Records über den Link-Browser verknüpft werden. rte_ckeditor ist nicht erforderlich und sollte nicht als Abhängigkeit eingetragen werden. TYPO3 v13 und frühere Versionen werden nicht unterstützt.
Was wurde gemacht
Dieser Fork setzt auf dem Upstream-Projekt von in2code auf und erweitert es gezielt für den Einsatz in TYPO3-v14-Projekten. Der wichtigste Schritt war das Upgrade auf TYPO3 v14 inklusive Workspaces-Unterstützung: Der TYPO3-Link-Browser wird nun mit Workspace-Kontext aufgerufen, sodass Draft-Records korrekt verknüpft werden und kein Datenverlust bei unveröffentlichten Entwürfen entsteht.
Ergänzt wurde außerdem ein Balloon-UI-Modus (schwebende Toolbar direkt am selektierten Text), der neben dem klassischen fixen Toolbar-Modus genutzt werden kann. Die Rendering-Boundary wurde dokumentiert: f:render.contentArea funktioniert innerhalb des Editors nicht; eine klare Sitepackage-Trennung ist erforderlich. Darüber hinaus wurden die Abbreviation- und Language-Plugins dokumentiert, ein Bugfix für isolierte Editor-Konfiguration bei mehreren TipTap-Instanzen auf einer Seite eingespielt und die Abhängigkeit auf rte_ckeditor vollständig entfernt.
Funktionen im Detail
Die Extension registriert ein eigenes FormEngine-Render-Element (tiptap), das per TCA-Konfiguration für beliebige Text-Felder aktiviert werden kann. Die gesamte Plugin-Auswahl und -Konfiguration erfolgt in YAML – keine PHP-Registrierungen, keine Fluid-Overrides.
| Funktion | Nutzen für Redakteur:innen und Entwickler:innen |
|---|---|
| Toolbar-Konfiguration (YAML) | Buttons granular je Textfeld aktivieren oder deaktivieren – keine Overrides nötig. |
| Bubble-Menu-Modus | Kontextsensitive Toolbar erscheint am markierten Text; weniger Ablenkung beim Schreiben. |
| Link-Browser-Integration | Workspace-Kontext mitgeliefert – Draft-Records werden korrekt verknüpft, kein Datenverlust. |
| Abbreviation-Plugin | Erzeugt semantisches <abbr title="…"> mit optionalem data-tooltip-Attribut. |
| Language-Plugin | Erzeugt <span lang> mit xml:lang – sauber für mehrsprachige Textpassagen. |
| Custom-Plugin-API | defineTipTapPlugin + Zod-Validation für eigene Erweiterungen ohne Extension-Fork. |
| contentCss-Option | Projektspezifisches CSS in den Editor-Iframe laden – WYSIWYG näher am Frontend-Aussehen. |
| Tabellen, Justify, Styles | Gängige Formatierungen und CSS-Klassen je Element – konfigurierbar per YAML. |
Die semantische Ausgabe trennt sich klar vom früheren CKEditor-Verhalten: Das Abbreviation-Plugin schreibt <abbr> mit title- und data-tooltip-Attribut, das Language-Plugin nutzt <span lang> mit xml:lang – beides ist direkt barrierefreiheitsrelevant.
Installation
composer config repositories.typo3-tiptap vcs https://github.com/dirnbauer/typo3-tiptap.git
composer require in2code/typo3-tiptap:^14.0Nach der Installation das TCA des gewünschten Feldes auf renderType = tiptap umstellen und die gewünschten Plugins in der YAML-Konfiguration aktivieren. Für Workspace-Projekte empfiehlt sich die Aktivierung von EXT:workspaces als suggest-Abhängigkeit – die Extension funktioniert ohne sie, der Link-Browser-Kontext fehlt dann jedoch.
Häufige Fragen
Fazit
TipTap ist eine ausgereifte Grundlage für einen modernen Rich-Text-Editor in TYPO3: ProseMirror-basiert, plugin-offen, semantisch sauber in der Ausgabe. Dieser Fork macht die Extension im TYPO3-v14-Alltag produktiv einsetzbar – mit Workspace-Unterstützung, dokumentierten Grenzen und einem Bugfix für Mehrfachinstanzen.
typo3-tiptap ist ein Fork des Upstream-Projekts von in2code GmbH, gefördert durch das Community Ideas Program Q3 2025 der TYPO3 Association. Die Extension steht unter GPL-2.0-or-later.