How to enable the custom color option for Drupal CKEditor
Does CKEditor have a custom text color option?
In Drupal CKEditor, there isn't a built-in option to add text color. Therefore, it is necessary to install additional modules for CKEditor.
Make sure you have the Color Button and Color Dialog modules installed. If not, download and install them.
Color Button Module:
If you wish to add text color, install the Color Button module for CKEditor. You can download the module from the following links.
- Module link: https://www.drupal.org/project/colorbutton
After installing the module, you need to place its folder in the "modules/contrib/" directory. - Plugin link: https://ckeditor.com/cke4/addon/colorbutton
After installing the plugin, you need to place its folder in the "libraries/" directory.
Color Dialog Module:
If you wish to add more color and hex code options to the Color Button, you need to install the Color Dialog module.
📌 Note: Before installing you have to enable more color options in colorbutton.php file
Apply this patch in colorbutton module before installing the color dialog module
patch Link: https://www.drupal.org/files/issues/2021-08-24/colorbutton-implement_color_dialog-2785311-17.patch
You can download the module from following links
- Module link: https://www.drupal.org/project/colordialog
- Plugin link: https://ckeditor.com/cke4/addon/colordialog
After installing the Color Dialog module, enable additional options in your backend by navigating to: Configuration > Content authoring > Text formats and editors > Full HTML > CKEditor Color Button.
Check the "Enable more" checkbox, save the settings, and then go to your CKEditor. You can now see the additional color options. 😍
Now, you can enter the hex color code, and you also have the ability to select multiple colors from the expanded color options.