Introduction
In 2017, I had written the "linebreak" plugin for CKEditor 4.I It allows using the <wbr> HTML element in the RTE of TYPO3 v8+, as well as the soft-hyphen ­.
Later on, the soft-hyphen was added again to the TYPO3 core itself.
On my own website I use the <wbr> element to wrap long URLs and directory paths in narrow viewports.
TYPO3 v12 now ships the new CKEditor 5. Existing plugins are not compatible with it, as the software architecture of the CKEditor has changed fundamentally.
To support the soft-hyphen, TYPO3 v12 already provides the Whitespace plugin. Therefore, I have now created a new extension specifically for the <wbr> element.
Features of the new extension
- General support of the <wbr> HTML element in CKEditor 5 and TYPO3 v12
- Editors can insert the element with a button at the current cursor position
- All <wbr> elements in the text are highlighted by an arrow on a colored background
To display the invisible <wbr> element in the text editor for editors, it is surrounded by a styled <span> wrapper.
This wrapper will not be stored in the database, but is only present in the editing view. This is an advantage of the new CKEditor architecture.
The new extension allows me to continue upgrading this website. It's also the very first (but hopefully not the last) CKEditor 5 plugin in the TYPO3 Extension Repository!
Next task: code blocks in CKEditor 5. Things certainly remain exciting.