How to use CKEditor in a TYPO3 backend module

In TYPO3 backend modules, it can be useful to provide a CKEditor instance, for example when creating content like dynamic HTML emails. The user then has the possibility to enrich the email content with basic formatting like making text appear in bold, italic or underline or even add links.

I sometimes use this possibility on websites, where my TYPO3 extension sf_event_mgt is installed and where the editor requires more flexibility for email notifications sent through the backend module of the extension.

Adding a CKEditor instance to a TYPO3 backend module is however different depending on which TYPO3 version is used. The examples below show, how this works with TYPO3 12.4 and CKEditor 5 and with TYPO3 <= 11.5 and CKEditor 4.

Adding a CKEditor 5 instance to a textfield

For TYPO3 12.4, it is required to add a custom ES6 module in order to enable CKEditor 5 for a textfield in a backend module.

First it is required to import required modules in the file Configuration/JavaScriptModules.php as shown below:

<?php

return [
    'dependencies' => ['backend', 'rte_ckeditor'],
    'imports' => [
        '@mynamespace/my-extension-key/' => 'EXT:my_extension-key/Resources/Public/JavaScript/Backend/',
    ],
];

By adding a dependency to rte_ckeditor, the CKEditor 5 dependencies are automatically imported.

Next, a custom ES6 module with a very basic CKEditor 5 configuration is added to Resources/Public/JavaScript/Backend/my-module.js as shown below:

import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
import { List } from '@ckeditor/ckeditor5-list';
import { Link } from '@ckeditor/ckeditor5-link';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
import { SourceEditing } from '@ckeditor/ckeditor5-source-editing';

class MyModule {
  constructor() {
    let target = document.getElementById('myTextfieldId');
    const config = {
      toolbar: [ 'bold', 'italic', '|', 'bulletedList', 'numberedList', '|', 'link', '|', 'sourceEditing' ],
    }
    ClassicEditor.builtinPlugins = [
      Essentials,
      Bold,
      Italic,
      List,
      Link,
      Paragraph,
      SourceEditing
    ];
    ClassicEditor.create(target, config);
  }
}

export default new MyModule;

Finally, the module needs to be loaded for the backend view, where the textfield is present. This can either be done in the controller or simply by using the f:be.pageRenderer ViewHelper in the view Template as shown below:

<f:be.pageRenderer includeJavaScriptModules="{0: '@mynamespace/my-extension-key/my-module.js'}" />

For CKEditor 5, it is not possible to define the hight of the editor instance through configuration. Therefore it is recommended to include a custom CSS file, which defines the height of the editor field.

Screenshot

Adding a CKEditor 4 instance to a textfield

For TYPO3 11.5 or less, it is required to add a custom Require JS module in Resources/Public/JavaScript/Backend/my-module.js to enable CKEditor 4 for a textfield in a backend module as shown in the example below:

define(['TYPO3/CMS/RteCkeditor/Contrib/Ckeditor'], function($) {
    'use strict';

    // Initialize CKEditor for field additionalMessage
    var config = {
        stylesSet: [],
        contentsCss: [],
        customConfig: '',
        height: 150,
        toolbarGroups: [
            {
                'name': 'basicstyles',
                'groups': ['basicstyles']
            },
            {
                'name': 'paragraph',
                'groups': ['list', 'blocks']
            },
            {
                'name': 'document',
                'groups': ['mode']
            },
            {
                'name': 'links',
                'groups': ['links']
            }
        ],
        removeButtons: 'Underline,Strike,Subscript,Superscript,Anchor,Styles,Specialchar,Blockquote',
        linkShowTargetTab: false
    }

    CKEDITOR.replace('myTextfieldId', config)
});

This module defines a very basic CKEditor 4 for the field myTextfieldId. The module is then either included through the backend module controller or simply using a Fluid ViewHelper in the view template as shown below:

<f:be.pageRenderer includeRequireJsModules="{0: 'TYPO3/CMS/MyExtensionKey/Backend/MyRequireJsModule'}" />

Screenshot