PHPackages in2code/in2tiptap - 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. [Utility & Helpers](/categories/utility) 4. / 5. in2code/in2tiptap Abandoned → [in2code/typo3-tiptap](/?search=in2code%2Ftypo3-tiptap)Typo3-cms-extension[Utility & Helpers](/categories/utility) in2code/in2tiptap ================= 0.0.18(2mo ago)1073[6 issues](https://github.com/in2code-de/typo3-tiptap/issues)GPL-2.0-or-laterJavaScriptPHP >=8.3.0 Since Oct 1Pushed 2mo ago1 watchersCompare [ Source](https://github.com/in2code-de/typo3-tiptap)[ Packagist](https://packagist.org/packages/in2code/in2tiptap)[ RSS](/packages/in2code-in2tiptap/feed)WikiDiscussions main Synced today READMEChangelogDependencies (72)Versions (22)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/superscript.js' - path: '@typo3-tiptap/tiptap/plugins/subscript.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: alignments: left: 'text-left' center: 'text-center' right: 'text-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 }), }) return 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 40 — FairBetter than 86% of packages Maintenance76 Regular maintenance activity Popularity12 Limited adoption so far Community16 Small or concentrated contributor base Maturity50 Maturing project, gaining track record Bus Factor1 Top contributor holds 77.1% 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 ~12 days Recently: every ~40 days Total 18 Last Release 60d 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 (168 commits)")[![BastiLu](https://avatars.githubusercontent.com/u/89908559?v=4)](https://github.com/BastiLu "BastiLu (36 commits)")[![faulancr](https://avatars.githubusercontent.com/u/2682162?v=4)](https://github.com/faulancr "faulancr (6 commits)")[![peterkraume](https://avatars.githubusercontent.com/u/4234704?v=4)](https://github.com/peterkraume "peterkraume (5 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-in2tiptap/health.svg) ``` [![Health](https://phpackages.com/badges/in2code-in2tiptap/health.svg)](https://phpackages.com/packages/in2code-in2tiptap) ``` ### Alternatives [friendsoftypo3/content-blocks TYPO3 CMS Content Blocks - Content Types API | Define reusable components via YAML 103519.9k53](/packages/friendsoftypo3-content-blocks)[derhansen/sf_event_mgt Event management and registration - Configurable event management and registration extension based on ExtBase and Fluid 66338.4k10](/packages/derhansen-sf-event-mgt)[brotkrueml/schema Embedding schema.org vocabulary - API and view helpers for schema.org markup 34653.7k16](/packages/brotkrueml-schema)[yoast-seo-for-typo3/yoast_seo Yoast SEO for TYPO3 511.7M9](/packages/yoast-seo-for-typo3-yoast-seo)[jweiland/events2 Events 2 - Create single and recurring events 2166.7k3](/packages/jweiland-events2)[t3sbs/t3sbootstrap Startup extension to use bootstrap 5 classes, components and more out of the box. Example and info: \[www.t3sbootstrap.de\](https://www.t3sbootstrap.de) 2416.4k](/packages/t3sbs-t3sbootstrap) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)