How to create a custom CKEditor 5 plugin for TYPO3 12.4
CKEditor is a popular WYSIWYG (What You See Is What You Get) editor used for creating rich-text content on the web. For many years, CKEditor 4 has been the go-to solution for content editors and developers alike. However, with the ever-evolving web technologies, CKEditor 4 has now been deprecated and replaced with the newer version, CKEditor 5.
Many content management systems (CMS) have already started to adopt CKEditor 5, and TYPO3 is no exception. With TYPO3 12.4 LTS, CKEditor 4 has been replaced with CKEditor 5, providing TYPO3 users with a better editing experience and access to new features and improvements. In this way, TYPO3 stays ahead of the curve by incorporating the latest technology into its core.
One of the great advantages of TYPO3 is its extensibility. In case of CKEditor in TYPO3, it is possible to dynamically include custom plugins, allowing you to extend the functionality of the editor to meet your specific needs.
In this article, I will show how to add a custom timestamp plugin (as shown in the TYPO3 documentation) to TYPO3 12.4 LTS
First of all, a custom sitepackage is required, where the configuration for CKEditor is stored. In my example,
sitepackage as extension key for the sitepackage.
ext_localconf.php, the path to the custom CKEditor configuration is defined.
Configuration/RTE/Default.yaml contains the default CKEditor 5 configuration for TYPO3, which has been
1. Create the CKEditor 5 plugin
The TYPO3 documentation
contains an example for a custom timestamp plugin. It is important to know, that the shown code is TypeScript
readonly attribute for
pluginName constant or
: void as return type for the
init() function). The code
will not directly run as CKEditor 5 plugin and either needs to be compiled or adapted. For simplicity
reasons, the code in this example is just adapted as shown below.
It is highly recommended to read ES6 in the TYPO3 Backend in order to understand how ES6 is used in TYPO3 and how to migrate from RequireJS.
In this example, the file
In this file, an importmap for
CKEditor plugin is referenced.
3. Extend TYPO3 CKEditor configuration
Finally the TYPO3 CKEditor configuration needs to be extended, so the new plugin is registered using
and the plugin button is added to the
toolbar items. The following extract from the CKEditor configuration
shows the important parts.
4. Using the plugin
After the plugin has been added to the CKEditor configuration, the TYPO3 cache must be cleared. After reloading the TYPO3 backend, the CKEditor now contains the new plugin as shown below.
When the “Timestamp” button is clicked, the current date is inserted into the editor content.