Skip to main content

Enabling Colorbutton and Colordialog Plugins in CKEditor

Updated

Issue


The users are unable to enable the 'colorbutton' and 'colordialog' plugins in CKEditor. Other plugins such as 'font' and 'emoji' work correctly when added to the configuration of the rich text editor.

 

 

Symptom:

  • The 'colorbutton' and 'colordialog' plugins do not appear in the CKEditor toolbar.
  • Other plugins such as 'font' and 'emoji' work correctly when added to the configuration.

Possible Reasons:

  • The issue was identified as a configuration problem in the ckeditor.config.appended.json field.
  • Incorrect paths or missing configurations can prevent the plugins from loading properly.

Alternative Solution:

Check if  the plugins are added to the ckeditor.config.appended.json file, this should have the plugins functioning as expected. If you still see an issue then please follow the following steps to resolve it.

 

Possible Solution:

  1. Update the Configuration File:

     

    • Ensure that the ckeditor.config.appended.json field includes the correct plugin names and paths.

    • Example configuration:
      Add the below configuration under ckeditor.config.appended.json
       

      {plugins: 'colorbutton,colordialog,font,emoji' , toolbarGroups : [{ name: 'colors', groups: [ 'colors' ] }]}

      Add the below configuration under ckeditor.config.overlayed.json

      {extraPlugins: 'colorbutton', colorButton_enableAutomatic:false,colorButton_enableMore:true,colorButton_colors:'f60,999,000,CF5D4E,454545,FFF,DDD,CCEAEE,66AB16'}





       

    • Note: The colorButton_colors property can be customized with different color codes as needed.

     

  2. Use Absolute Paths for External Files:
     

    • If using external styles or scripts, ensure that absolute paths are provided.

    • Example: JSON

      {"stylesSet": "styleGuide:https://xxxxx.bloomreach.io/delivery/resources/content/assets/javascript/styles.js"}

  3. Test the Changes:

    • After updating the configuration, test the CKEditor to ensure that the 'colorbutton' and 'colordialog' plugins are now available in the toolbar.

    • Verify that the color options are functioning correctly.
       

       

Related articles