[5.9.19] CKEditor global config for all fields

[DenyEs]

Description

Is there ANY way I can get the v5 work the same way v4 did? I had a global config that was used across all fields - nice and easy, define my toolbar items, font colors, all other things and it just worked.

I had nothing but issues since I upgraded to v5. YAML gone, JS or JSON configs just don't apply or override the toolbar items and there's no examples from Craft team on how to use it.

Any help would be greatly appreciated as I really don't want to check every single CKEditor field one by one and make changes to it.

[linear]

PT-3098

[i-just]

Hi, thanks for getting in touch!

The standalone CKEditor configs are gone, but as of v5.3.0, you can use file-based configs across multiple CKEditor fields (more info can be found under #540).

The toolbar items can’t be modified via JSON or JS config (same as they couldn’t be when those options were located in the standalone CKEditor configs), but you should be able to use Field::EVENT_MODIFY_CONFIG for this (https://github.com/craftcms/ckeditor/blob/5.x/src/Field.php#L1481-L1486).

There’s also a lengthy discussion around some of this under #517, which might be helpful.

I hope this helps!

[DenyEs]

@i-just Thank you! After some trial and error, I managed to get this working exactly as I need to - one global config for all the fields on CKEditor 5.

use craft\ckeditor\Field;
use yii\base\Event;
        
        Event::on(
            Field::class,
            Field::EVENT_MODIFY_CONFIG,
            function(Event $event) {
                $event->toolbar = [
                    'heading', '|', 'bold', 'italic', 'link',
                    'bulletedList', 'numberedList', 'underline',
                    'fontColor', 'subscript', 'superscript'
                ];

                $event->baseConfig['heading']['options'] = [
                    ['model' => 'paragraph', 'title' => 'Paragraph', 'class' => 'ck-heading_paragraph'],
                    ['model' => 'heading2', 'view' => 'h2', 'title' => 'Heading 2', 'class' => 'ck-heading_heading2'],
                    ['model' => 'heading3', 'view' => 'h3', 'title' => 'Heading 3', 'class' => 'ck-heading_heading3'],
                    ['model' => 'heading4', 'view' => 'h4', 'title' => 'Heading 4', 'class' => 'ck-heading_heading4'],
                    ['model' => 'heading5', 'view' => 'h5', 'title' => 'Heading 5', 'class' => 'ck-heading_heading5'],
                    ['model' => 'heading6', 'view' => 'h6', 'title' => 'Heading 6', 'class' => 'ck-heading_heading6'],
                ];

                $event->baseConfig['fontColor']['colors'] = [
                    ['color' => '#009ddc', 'label' => 'Blue'],
                    ['color' => '#7CC735', 'label' => 'Green'],
                    ['color' => '#FF7B00', 'label' => 'Orange']
                ];
            }
        );