- Issue created by @Nelo_Drup
- 🇬🇧United Kingdom scott_euser
If someone would want to attempt adding this feature, the docs here → explain how to modify the configuration for a CKE5 plugin.
Then here you can see the configuration options that the highlight plugin offers (and yes it supports custom colours), but prior to load. So it would allow the site builder to set further colours but not let the content editor choose whatever colour they want.
Hi!
Just to contribute some help if someone needs. I modified the default behavior in a custom module, following the #2 comment.
function my_module_ckeditor5_plugin_info_alter(array &$plugin_definitions): void { assert($plugin_definitions['ckeditor5_highlight_highlight'] instanceof CKEditor5PluginDefinition); $plugin_definition = $plugin_definitions['ckeditor5_highlight_highlight'] ->toArray(); $plugin_definition['ckeditor5']['config']['highlight']['options'][] = [ 'model' => 'redPen', 'class' => 'pen-red', 'title' => t('Red pen'), 'color' => 'var(--ck-highlight-pen-red)', 'type' => 'pen' ]; $plugin_definitions[$value] = new CKEditor5PluginDefinition($plugin_definition); }
This code customize the toolbar highlight, only render 1 "pen red" option and "erase" option. You can add your own CSS in order to override the color 'var(--ck-highlight-pen-red)' or override the class pen-red. Also you can add another buttons or options, following the given structure on documentation:https://ckeditor.com/docs/ckeditor5/latest/features/highlight.html
- Merge request !6Create ckeditor5 plugin configuration with form configuration color picker and new dynamic css file → (Open) created by tobas1996
Hi! I create a MR where I contribute with this functionality and form configuration.
It needs work, and documentation.
I'm using the exactly same form as https://www.drupal.org/project/ckeditor5_font → , as a color picker. It works like a charm with form implementation, and also js/css.
I implemented new configuration plugin where the form inputs are set and saved. Also, on a submit I added a new process where we create dynamically a css file where we store our custom variable colors. We keep the old file, because its useful if we don't want to configure any color.
If we configure our colours, we will limit the editor on that colors, and it will work automatically with new colors because of this process that I mentioned.
Also I change the "elements" allowed, because it should be dynamically so I used : - <$any-html5-element class> and I added a function inside the plugin where we set the allowed tags based on colors selected (if you configure some color).
Hope it helps, I think its good workaround.
Thanks in advance.