How do I activate the font functions in CKEditor 5 in TYPO3 12?

Question

TYPO3 12 is coming with CKEditor 5, which has a different configuration compared to the previous version 4.

What is the way to use the font functions in TYPO3 12 with CKEditor 5?

I want to use these functions: https://ckeditor.com/docs/ckeditor5/latest/features/font.html

However, I don't get anything to show up in the toolbar of CKEditor. The buttons do not appear. The console logs this error:

toolbarview-item-unavailable Object { item: "fontColor" }

Seems like the necessary plugin is not present.

What configuration is needed to make that work again?

Answer 1

Like you said, the error indicates that the plugin is not loaded. There are at least 2 ways to include the plugin.

First Solution

You can use a JavaScript module bundler like webpack to generate an ES6 module of the CKEditor plugin. The generated module can be included like a custom plugin to your project.

There are some pitfalls and webpack has to be configured to generate an output that can be used by TYPO3. CKEditor5-Plugin-Converter is a small project on Github that converts the fonts plugin for TYPO3 12.4.2.

Second Solution

You can install CKEditor5 plugins, by adding them to the build process of the CKEditor bundle. With following steps you can customize the CKEditor bundle used by typo3:

• clone the typo3 project from github

• change your working directory to typo3/build

• make sure node is installed and run following npm commands:

  npm install
  npm install @ckeditor/ckeditor5-font
  

• edit following file by importing the font plugin and adding it to the exports typo3/Build/Sources/JavaScript/rte_ckeditor/contrib/ckeditor5-bundle.js

• generate the CKEditor bundle

  npx grunt update
  

• copy the file typo3/typo3/sysext/rte_ckeditor/Resources/Public/Contrib/ckeditor5-bundle.js to your extension

• update or add the file JavaScriptModules.php in your extension so that it contains following import

  return [
    'dependencies' => [ 'backend' ],
    'tags' => [ 'backend.form' ],
    'imports' => [
      '@typo3/ckeditor5-bundle.js' => 'EXT:your-extension/path/to/file/ckeditor5-bundle.js',
    ],
  ];
  

• configure the RTE yaml configuration in you project

  editor:
      toolbar:
        items:
          - fontSize
          - fontFamily
          - fontColor
          - fontBackgroundColor
          - ...