Professional Content Management

Free and open source, TYPO3 CMS is the most widely used enterprise-level CMS.

Test TYPO3 now:

TYPO3 live demo

Inspire people to share

Offer your skills and contribute to the project. The community is growing and does more than just coding. 

A Community Effort

TYPO3 CMS is an Open Source project managed by the TYPO3 Association.

The Project

Do you have a question?

Ask the community or a professional partner.

Community Budget Report: A Modern Rich Text Editor (RTE) Experience With TipTap

Categories: Budget idea, Development, Community Created by Florian Langer
In this report, Florian Langer shares the story behind his community budget idea and presents the first results of the new TipTap rich-text editor integration.

After the approval of my community budget idea for Q3/2025 three months ago, I’m excited to share the initial outcome of our work: a prototype and beta version of a powerful new alternative to the CKEditor 5 in TYPO3. This integration, based on the modern TipTap RTE framework, is an initiative from the developers at in2code, spearheaded by Felix Ranesberger, Bastien Lutz, Andreas Nedbal, and me. It was created to address the community's feedback and enhance one of the most fundamental aspects of content management: the editorial experience itself.

Background and The Problem We Are Solving

Back in August 2023, I published a blog post on my personal website called TYPO3 v12 and the CKEditor 5 Dilemma. In it, I outlined the significant challenges the transition to CKEditor 5 has presented. The feedback was significant, and it became clear that many developers agreed with the struggle. At that point, I decided that I didn't want to just criticize the TYPO3 Core for this decision, but instead be part of a solution. This motivation is what drove me to initiate this community budget idea.

I believe a high-quality, intuitive RTE is a cornerstone for every modern CMS. Our goal is to provide TYPO3 with a powerful, modern, and more manageable alternative. By developing a TipTap RTE extension, we aim to reduce development friction, enhance the editor experience, and a more sustainable solution for this vital CMS component.

A text editor displays formatting options and a dropdown menu for heading styles. Heading 1 is selected in the menu, and a sample document is shown with formatted heading and body text.
Screenshot of the TipTap rich text editor in TYPO3.

Introducing the TipTap Extension

This new extension provides a TipTap RTE integration for TYPO3. For developers, the transition will feel familiar. Like the current CKEditor integration, TipTap is configured using simple YAML files. You can place your custom configuration in your site package at Configuration/RTE/Full.yaml.

The project is currently in a prototype stage. We have a solid foundation, and we are now at a point where community feedback is vital to guide the future of its development.

Key Features and Current Limitations

The current beta version already supports a range of essential features:

  • Headlines: Choose from different heading levels.
  • Block Quotes: Emphasize text with block quotes.
  • Standard Text Styles: All the basics are covered, including bold, italics, underline, and strike-through.
  • Lists: Create both bullet and numbered lists.
  • Text Alignment: Easily align your text left, right, center, or justified.
  • Custom CSS Classes: Similar to CKEditor, you can apply predefined CSS classes to your content.
  • TYPO3 Link-Wizard: Full integration with the familiar TYPO3 link wizard for creating internal and external links.
  • Source Code View: Source view is available to directly edit the HTML.
  • Undo/Redo: Standard undo and redo functionality is available.
  • Bubble Menu: A contextual menu appears when you select text, providing quick access to formatting options.
  • Drag-and-Drop Text Blocks: A feature unique to this new integration — you can now mark and move entire blocks of text with a simple drag and drop, something not possible in CkEditor.

It's also important to note what is not part of the prototype:

  • Tables: Table support is not yet implemented, but it would be a good next step.
  • Special Characters: A picker for special characters is not yet included.
  • Image Uploads: Direct image upload is not possible. We don't consider this a high priority, as we recommend using TYPO3's standard Text-Media content element for this purpose.
Screenshot of a web-based text editor within the TYPO3 backend displaying an article titled Understanding TYPO3: A Powerful Enterprise CMS.
The contextual bubble menu with quick access to formatting options.

A Side Note on Custom Plugins

While it's already possible to integrate custom plugins, we want to work to enhance this process. Our goal is to make it seamless for developers to integrate larger, more complex custom plugins in the future.

Technical Details

We chose Vue.js for the technical integration of TipTap. As TipTap is a headless RTE, it gives us complete freedom over the frontend implementation. Using Vue.js allowed us to more easily leverage TipTap's powerful native features while building a custom user interface from the ground up. The styling was carefully crafted to ensure the editor integrates with the TYPO3 backend. Our goal was to make it feel like a native part of the system and not a foreign object as CKEditor can sometimes feel.

A Big Thank You to the Development Team

I want to thank the developers who have poured their expertise and hard work into bringing this prototype to life. This initiative would not have been possible without the dedication of:

Their commitment and skill have been instrumental in reaching this milestone!

How to Get Involved

We encourage you to test the extension and share your thoughts. For installation, please follow the README and installation guide in the typo3-tiptap GitHub repository. After following the guide, the default CKEditor RTE will be replaced with the TipTap editor in your TYPO3 backend.

Your feedback is invaluable for shaping the future of this extension. Please report any issues or start a conversation on our GitHub Issues page.

Future Outlook

By providing a modern alternative for rich text editing, we align with the strategic goal of improving the user experience for TYPO3 v14 and beyond. Let's work together to build a stronger, more flexible editing experience for the entire TYPO3 community!

We want to continue the development of this extension and help from the community is very much appreciated. Our vision is to create something that feels like a natural part of TYPO3, so it can hopefully be added to the core someday. We're in touch with the Core team to help us get there. Until then, it will remain a third-party extension.

Try the TYPO3 TipTap Extension

Additional contributors for this article

Related News

Latest news

Show more