Suggestion for improvement/adding an example to this documentation: https://doc.ibexa.co/en/latest/content_management/rich_text/extend_online_editor/#add-ckeditor-plugins

I want to add the special characters plugin to the CKEditor. Maybe the doc is missing a few steps - which might be logical if you already know the topic, but for me they were not clear. An Example would have been helpfull for me.

I have documented my solution in slack, but maybee some parts of this can be added to the official documentation?

The following steps were necessary to use the editor plugin Special Chars:
1.

yarn add @ckeditor/ckeditor5-special-characters

2. encore/ibexa.richtext.config.manage.js as described in the doc with link to my .js file

const path = require('path');
module.exports = (ibexaConfig, ibexaConfigManager) => {
    ibexaConfigManager.add({
        ibexaConfig,
        entryName: 'ibexa-richtext-onlineeditor-js',
        newItems: [path.resolve(__dirname, '../assets/richtexteditor.js')],
    });
};
 

3. the new file for the extraPlugins (in my case /assets/richtexteditor.js)

import SpecialCharacters from '../node_modules/@ckeditor/ckeditor5-special-characters/src/specialcharacters';
import SpecialCharactersEssentials from '../node_modules/@ckeditor/ckeditor5-special-characters/src/specialcharactersessentials';
window.ibexa.addConfig('richText.CKEditor.extraPlugins', [ SpecialCharacters, SpecialCharactersEssentials, /* ... */ ], true);
 

It is important not to import from '@ckeditor/ckeditor5-special-characters'. This will result in an encore build failure, because of this line
'@ckeditor': path.resolve('./public/bundles/ibexaadminuiassets/vendors/@ckeditor'),
The editor path is set to the ibexaadminuiassets vendor directory - but i add the new plugin to my local node-modules. Thats why I need to adjust the importdirectory in my .js file accordingly.

4. add it to toolbar in the /config/packages/ibexa_admin_ui.yaml with this code:

ibexa.system.admin_group.fieldtypes.ezrichtext.toolbar.group1:
    buttons:
         undo:
             priority: 40
         redo:
             priority: 40
         specialCharacters:
             priority: 10
 

The Example also shows undo and redo buttons - these are available without installing an new package.