Add option to put more colors

Created on 22 January 2024, 10 months ago
Updated 16 May 2024, 6 months ago

Problem/Motivation

Hello, the module works very well but it has the problem that you cannot add more colors from the same ckeditor, something like what the color dialog had in ckeditor 4.

Feature request
Status

Active

Version

1.1

Component

Code

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • 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

  • Pipeline finished with Failed
    6 months ago
    #166609
  • 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.

  • Pipeline finished with Failed
    6 months ago
    Total: 148s
    #166624
  • Pipeline finished with Failed
    6 months ago
    Total: 149s
    #166633
  • Pipeline finished with Failed
    6 months ago
    Total: 145s
    #166910
  • Pipeline finished with Failed
    6 months ago
    Total: 150s
    #166923
  • Pipeline finished with Failed
    6 months ago
    Total: 208s
    #167323
Production build 0.71.5 2024