PHPackages in2code/typo3-tiptap - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. in2code/typo3-tiptap ActiveTypo3-cms-extension in2code/typo3-tiptap ==================== 0.0.17(1mo ago)99692[9 issues](https://github.com/in2code-de/typo3-tiptap/issues)GPL-2.0-or-laterJavaScriptPHP >=8.3.0 Since Oct 1Pushed 3mo ago1 watchersCompare [ Source](https://github.com/in2code-de/typo3-tiptap)[ Packagist](https://packagist.org/packages/in2code/typo3-tiptap)[ RSS](/packages/in2code-typo3-tiptap/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependencies (48)Versions (21)Used By (0) TYPO3 TipTap Editor (Beta) ========================== [](#typo3-tiptap-editor-beta) This extension provides a modern TipTap rich text editor integration for TYPO3 CMS. The development of this extension was funded by the [TYPO3 Association](https://typo3.org) through the [Community Ideas program](https://typo3.org/article/members-have-selected-five-ideas-to-be-funded-in-quarter-3-2025). [![Screenshot of the TipTap Editor Integration in TYPO3](docs/images/example-1.webp)](docs/images/example-1.webp) --- Quick Start Guide ----------------- [](#quick-start-guide) Install the extension via Composer: ``` composer require in2code/typo3-tiptap ``` You don't have to remove the CkEditor extension; both editors can coexist. The editor comes with a **default configuration** that works out of the box. You can start using it immediately without any additional setup. If you want to use the default configuration, make sure to not overwrite the preset in your Page TSconfig. ### Optional: Customize the Configuration [](#optional-customize-the-configuration) If you want to customize the editor to your specific needs, you can overwrite the default configuration: 1. Copy the [example YAML configuration file](Configuration/RTE/Full.yaml) to your site package 2. Customize it according to your requirements 3. Register your custom preset in TYPO3: ``` // Setup custom editor configuration $GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['my_custom_preset'] = 'EXT:sitepackage/Configuration/RTE/TipTap.yaml'; ``` 4. Activate the custom preset in your Page TSconfig: ``` RTE.default.preset = my_custom_preset ``` See also the documentation [How do I use a different preset?](https://docs.typo3.org/c/typo3/cms-rte-ckeditor/main/en-us/Configuration/Examples.html#how-do-i-use-a-different-preset) --- Configuration ------------- [](#configuration) ### Understanding the Architecture [](#understanding-the-architecture) TipTap uses a plugin-based architecture where functionality is added through plugins. Like CKEditor, TipTap is configured using YAML files placed in your site package at `Configuration/RTE/`. The extension ships with a default configuration that includes commonly used features. You only need to create a custom configuration if you want to modify the toolbar, add custom plugins, or adjust the editor behavior. ### Configuring the Toolbar [](#configuring-the-toolbar) Each plugin can have its own configuration options that are validated in the frontend. Below is a complete example showing all available plugins. You can enable or disable any plugin by adding or removing its entry: ``` editor: tiptap: config: plugins: - path: '@typo3-tiptap/tiptap/plugins/headings.js' config: { levels: [1, 2, 3, 4, 5, 6] } - path: '@typo3-tiptap/tiptap/plugins/history.js' config: { types: [ 'undo', 'redo' ] } - path: '@typo3-tiptap/tiptap/plugins/bold.js' - path: '@typo3-tiptap/tiptap/plugins/underline.js' - path: '@typo3-tiptap/tiptap/plugins/italic.js' - path: '@typo3-tiptap/tiptap/plugins/strikethrough.js' - path: '@typo3-tiptap/tiptap/plugins/link.js' - path: '@typo3-tiptap/tiptap/plugins/list.js' config: types: [ 'ordered', 'bullet' ] - path: '@typo3-tiptap/tiptap/plugins/blockquote.js' - path: '@typo3-tiptap/tiptap/plugins/justify.js' config: types: [ 'justify-left', 'justify-center', 'justify-right' ] - path: '@typo3-tiptap/tiptap/plugins/source.js' - path: '@typo3-tiptap/tiptap/plugins/styles.js' config: styles: - { name: 'Orange Title H2', element: 'h2', classes: 'orange' } - { name: 'Orange Title H3', element: 'h3', classes: 'orange' } - { name: 'Paragraph Blue', element: 'p', classes: 'paragraph-blue' } - { name: 'Link Green', element: 'a', classes: 'link-green' } ``` ### Loading Custom CSS [](#loading-custom-css) You can load additional CSS files for the editor content using the `contentCss` option: ``` editor: tiptap: config: contentCss: - 'EXT:sitepackage/Resources/Public/Css/content.css' ``` --- Creating Custom Plugins ----------------------- [](#creating-custom-plugins) You can extend TipTap with custom plugins by creating JavaScript files in your site package and referencing them in your RTE configuration. ### Step 1: Register Your Plugin [](#step-1-register-your-plugin) Add your plugin to the RTE YAML configuration: ``` editor: tiptap: config: plugins: - path: '@example/in2code/Plugins/example.js' config: # Optional plugin configuration additionalClass: 'my-example-class' ``` ### Step 2: Create the Plugin File [](#step-2-create-the-plugin-file) Create your plugin JavaScript file. Configuration is optional—if you don't need it, simply remove the `unsafeConfig` and `parseTipTapPluginYamlConfiguration` parts. ``` import { defineTipTapPlugin, parseTipTapPluginYamlConfiguration, } from '@typo3-tiptap/tiptap/index.js' export default function (unsafeConfig) { // Parse plugin configuration from YAML to ensure it matches expectations // Configuration parsing uses Zod validation. Learn more: https://zod.dev/ const config = parseTipTapPluginYamlConfiguration({ pluginId: 'cookie', config: unsafeConfig, getValidationSchema: z => z.object({ additionalClass: z.string(), // requires additionalClass to be provided and be a string }), }) defineTipTapPlugin({ // Optional: Add custom TipTap extensions here if needed extensions: [], // Commands define buttons added to the toolbar or bubble menu commands: [ { id: 'cookie', label: 'Add cookie', iconIdentifier: 'icon-cookie', position: { // Valid toolbar group IDs: history, styles, heading, general, formatting, developer toolbarGroupId: 'general', // Valid bubble menu group IDs: formatting, heading, styles // Set to false to disable button in bubble menu or toolbar bubbleMenuGroupId: false, }, // Optional status functions to control button state status: { isActive: ({ editor }) => editor.isActive({ textAlign: 'right' }), isDisabled: ({ editor }) => !editor.can().setTextAlign('right'), }, // This function executes when the button is clicked // Add your TipTap logic here onExecute: ({ editor }) => { editor.commands.setCookieButton({ text: 'Accept Cookies', class: config.additionalClass }) }, }, ], }) } ``` ### Learning by Example [](#learning-by-example) The plugin structure may seem abstract at first. We recommend reviewing the [existing plugins](frontend/src/plugins) in the source code and using them as templates for your own implementations. --- FAQ --- [](#faq) ### \#1755159351 MissingEditorConfigurationException: Missing editor configuration for tiptap [](#1755159351-missingeditorconfigurationexception-missing-editor-configuration-for-tiptap) Most probably you have already customized your CKEditor presets. Search e.g. your site package for `$GLOBALS ['TYPO3_CONF_VARS']['RTE']['Presets']` and change it to the TipTap YAML file with one of the following configurations: ``` // Use the shipped configuration file $GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['my_custom_preset'] = 'EXT:typo3_tiptap/Configuration/RTE/Full.yaml'; ``` ``` // Setup custom editor configuration $GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['my_custom_preset'] = 'EXT:sitepackage/Configuration/RTE/TipTap.yaml'; ``` --- Local Development ----------------- [](#local-development) For instructions on setting up the project for local development, please refer to the [Local Setup Documentation](docs/local-setup.md). ### Health Score 41 — FairBetter than 89% of packages Maintenance66 Regular maintenance activity Popularity26 Limited adoption so far Community15 Small or concentrated contributor base Maturity49 Maturing project, gaining track record Bus Factor1 Top contributor holds 75.3% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~11 days Recently: every ~31 days Total 17 Last Release 45d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/c7b0e95a86a09cd1d3f7a0089ae701ccbe840ae9d794def4ef1829ceae48d061?d=identicon)[in2code](/maintainers/in2code) --- Top Contributors [![felixranesberger](https://avatars.githubusercontent.com/u/52704891?v=4)](https://github.com/felixranesberger "felixranesberger (143 commits)")[![BastiLu](https://avatars.githubusercontent.com/u/89908559?v=4)](https://github.com/BastiLu "BastiLu (36 commits)")[![peterkraume](https://avatars.githubusercontent.com/u/4234704?v=4)](https://github.com/peterkraume "peterkraume (5 commits)")[![faulancr](https://avatars.githubusercontent.com/u/2682162?v=4)](https://github.com/faulancr "faulancr (3 commits)")[![flolanger](https://avatars.githubusercontent.com/u/21835310?v=4)](https://github.com/flolanger "flolanger (1 commits)")[![ischmittis](https://avatars.githubusercontent.com/u/904789?v=4)](https://github.com/ischmittis "ischmittis (1 commits)")[![pixeldesu](https://avatars.githubusercontent.com/u/1774242?v=4)](https://github.com/pixeldesu "pixeldesu (1 commits)") --- Tags TYPO3 CMS ### Embed Badge ![Health badge](/badges/in2code-typo3-tiptap/health.svg) ``` [![Health](https://phpackages.com/badges/in2code-typo3-tiptap/health.svg)](https://phpackages.com/packages/in2code-typo3-tiptap) ``` ### Alternatives [fluidtypo3/vhs This is a collection of ViewHelpers for performing rendering tasks that are not natively provided by TYPO3's Fluid templating engine. 1954.1M48](/packages/fluidtypo3-vhs)[derhansen/sf_event_mgt Configurable event management and registration extension based on ExtBase and Fluid 64313.9k6](/packages/derhansen-sf-event-mgt)[brotkrueml/schema Embedding schema.org vocabulary - API and view helpers for schema.org markup 33584.6k13](/packages/brotkrueml-schema)[in2code/in2publish_core Content publishing extension to connect stage and production server 40135.8k](/packages/in2code-in2publish-core)[causal/image_autoresize Simplify the way your editors may upload their images: no complex local procedure needed, let TYPO3 automatically resize down their huge images/pictures on-the-fly during upload (or using a command for batch processing) and according to your own business rules (directory/groups). This will highly reduce the footprint on your server and speed-up response time if lots of images are rendered (e.g., in a gallery). Features an EXIF/IPTC extractor to ensure metadata may be used by the FAL indexer even if not preserved upon resizing. 19455.6k](/packages/causal-image-autoresize)[causal/extractor This extension detects and extracts metadata (EXIF / IPTC / XMP / ...) from potentially thousand different file types (such as MS Word/Powerpoint/Excel documents, PDF and images) and bring them automatically and natively to TYPO3 when uploading assets. Works with built-in PHP functions but takes advantage of Apache Tika and other external tools for enhanced metadata extraction. 16244.5k](/packages/causal-extractor) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)