michaelstaatz/tiptap-editor-abbreviation

Add abbreviations information through the TipTap Editor

v1.0.0 2026-06-19 14:39 UTC

Requires

• in2code/typo3-tiptap: >=0.0.1
• typo3/cms-core: ^13.4

GPL-2.0-or-later

• Michael

README

TYPO3 extension that adds <abbr title="Long form">Short form</abbr> support to the in2code TipTap RTE.

Requirements: TYPO3 ^13.4 · PHP ^8.3 · in2code/typo3-tiptap

Installation

composer require michaelstaatz/tiptap-editor-abbreviation

File structure

tiptap_editor_abbreviation/
├── ext_emconf.php
├── ext_localconf.php
├── composer.json
├── Classes/
│   └── Hooks/
│       └── PageRendererHook.php       ← Registers language labels in TYPO3.lang
├── Configuration/
│   ├── JavaScriptModules.php          ← Import map registration (tags: backend.form)
│   └── RTE/
│       └── TipTap.yaml                ← RTE preset including contentCss
└── Resources/
    ├── Private/
    │   └── Language/
    │       ├── locallang.xlf          ← English base labels
    │       └── de.locallang.xlf       ← German translation
    └── Public/
        ├── Css/
        │   ├── Abbr.css               ← Abbreviation styling in the RTE editor
        │   └── AbbreviationTooltip.css ← Frontend tooltip for visitors
        └── JavaScript/
            └── Plugins/
                └── abbr.js            ← TipTap mark + TYPO3 modal dialog

Configuration

1. Register the preset

In config/system/additional.php:

$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['tiptap']
    = 'EXT:tiptap_editor_abbreviation/Configuration/RTE/TipTap.yaml';

2. Activate TipTap in Page TSconfig

RTE.default.preset = tiptap

3. Include frontend tooltip CSS

In your TypoScript setup:

page.includeCSS.abbr-tooltip = EXT:tiptap_editor_abbreviation/Resources/Public/Css/AbbreviationTooltip.css

Usage

1. Select text in the RTE
2. Click the Abbreviation (abbr) button in the toolbar
3. Enter the long form in the dialog → Save

When the cursor is already inside an <abbr>:

• The dialog shows the current value for editing
• The Remove button deletes the markup

Languages

The editor dialog is translated via TYPO3's XLF system. Currently supported: English, German.

Additional languages can be added by creating Resources/Private/Language/{locale}.locallang.xlf.

Note: Modal API

The plugin uses @typo3/backend/modal.js. Should the dialog fail to close in a future TYPO3 version, replace modal.hideModal() with:

modal.dispatchEvent(new CustomEvent('typo3-modal-dismiss'));