https://github.com/havran/ckeditor5-fe-color-plugin
CKEditor 5 color dropdown with classes
https://github.com/havran/ckeditor5-fe-color-plugin
ckeditor5 drupal
Last synced: 6 months ago
JSON representation
CKEditor 5 color dropdown with classes
- Host: GitHub
- URL: https://github.com/havran/ckeditor5-fe-color-plugin
- Owner: havran
- Created: 2025-09-23T05:50:53.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-10-04T13:24:56.000Z (6 months ago)
- Last Synced: 2025-10-04T14:32:58.645Z (6 months ago)
- Topics: ckeditor5, drupal
- Language: TypeScript
- Homepage:
- Size: 115 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CKEditor5 FE Color Plugin
A CKEditor 5 plugin for Drupal that provides customizable frontend color palettes, enabling content editors to use consistent brand colors across your site.
Inspired by [ucb_ckeditor_plugins](https://github.com/CuBoulder/ucb_ckeditor_plugins/tree/main).
Thank you to the original authors!
---
## 🚀 Introduction
**CKEditor5 FE Color** extends Drupal’s CKEditor 5 integration with predefined, configurable color palettes.
Content editors can easily apply branded colors, ensuring visual consistency for your organization.
---
## 📦 Requirements
- **CKEditor 5 (Core module)** must be enabled.
---
## ⚙️ Configuration
### 1. Enable the Plugin
- Install and enable this module.
- Ensure CKEditor 5 is set up for your desired text format.
- In Drupal’s text format configuration, drag the **FeColor** button into your CKEditor 5 toolbar.
### 2. Color Palette Configuration
- **Currently, all color settings are code-based** (no UI yet).
- Default palettes are set in `ckeditor5_fe_color.ckeditor5.yml` under the key
`ckeditor5_fe_color_fecolor.ckeditor5.config.fecolor.colors`.
Example YAML Color Configuration
```yml
ckeditor5_fe_color_fecolor:
ckeditor5:
plugins:
- fecolor.FeColor
config:
fecolor:
colors:
- label: Black
color: '#000000'
class: 'color-black'
- label: White
color: '#FFFFFF'
class: 'color-white'
options:
hasBorder: true
drupal:
label: Fe Font Color
library: ckeditor5_fe_color/ckeditor5.fecolor
admin_library: ckeditor5_fe_color/admin.fecolor
class: Drupal\ckeditor5_fe_color\Plugin\CKEditor5Plugin\FeColor
toolbar_items:
fecolor:
label: Fe Font Color
elements:
-
-
```
---
### 3. Customizing Colors
**Best practice:**
Override or extend palettes in a custom module, not in this module directly.
#### Hooks for Customization
Add your colors via Drupal hooks in your custom module:
```php
getPath($module);
$info = \Drupal::service('extension.list.module')->getExtensionInfo($module);
if (isset($info['ckeditor5-stylesheets']) && $info['ckeditor5-stylesheets'] !== FALSE) {
$css = $info['ckeditor5-stylesheets'];
foreach ($css as $key => $url) {
// CSS URL is external or relative to Drupal root.
if (UrlHelper::isExternal($url) || $url[0] === '/') {
$css[$key] = $url;
}
// CSS URL is relative to theme.
else {
$css[$key] = '/' . $module_path . '/' . $url;
}
}
}
$libraries['internal.drupal.ckeditor5.stylesheets'] = [
'css' => [
'theme' => array_fill_keys(array_values($css), []),
],
];
}
}
/**
* Implements hook_editor_js_settings_alter().
*/
function mymodule_editor_js_settings_alter(array &$settings) {
// CKEditor 5 FeColor plugin colors configuration.
// Add custom colors or modify existing ones for the 'basic_html' text format.
$settings['editor']['formats']['basic_html']['editorSettings']['config']['fecolor']['colors'] = __mymodule_colors();
}
/**
* Implements hook_ckeditor5_plugin_info_alter().
*/
function mymodule_ckeditor5_plugin_info_alter(array &$plugin_definitions): void {
// Add all color classes to the CKEditor 5 FeColor plugin elements configuration.
if (isset($plugin_definitions['ckeditor5_fe_color_fecolor'])) {
assert($plugin_definitions['ckeditor5_fe_color_fecolor'] instanceof CKEditor5PluginDefinition);
$fecolor_plugin_definition = $plugin_definitions['ckeditor5_fe_color_fecolor']->toArray();
$fecolor_plugin_definition['drupal']['elements'][] = '';
$plugin_definitions['ckeditor5_fe_color_fecolor'] = new CKEditor5PluginDefinition($fecolor_plugin_definition);
}
}
function __mymodule_colors(): array {
return [
[
"label" => "Black (color-black)",
"class" => "color-black",
"color" => "var(--color-black)", // #000000
],
[
"label" => "White (color-white)",
"class" => "color-white",
"color" => "var(--color-white)", // #ffffff
"options" => [
"hasBorder" => TRUE
],
],
// Add more custom colors here.
];
}
function __mymodule_colors_classes(): array {
return array_column(__mymodule_colors(), 'class');
}
```
#### Add Custom CSS
And in you `mymodule.info.yml` file provide CSS file(s):
```yml
name: My Module
type: module
description: 'Customization for CKEditor 5 font colors and CSS.'
package: My Theme
core_version_requirement: ^10 || ^11
ckeditor5-stylesheets:
- css/icons/icons.css # Optional, if you use Material Icons
- css/ckeditor5.css # Your custom styles for CKEditor 5
- //fonts.googleapis.com/icon?family=Material+Icons # Optional, if you use Material Icons
```
Example `css/ckeditor5.css` file:
```css
:root {
--color-black: #fb9116;
--color-white: #aaaaaa;
/* Add more colors here. */
}
/* Example how provide CKEditor 5 content styles */
span.color-black {
color: var(--color-black);
}
span.color-white {
color: var(--color-white);
}
.ck-content h1 {
padding-bottom: 16px;
}
```
---
## ✨ Usage
- When editing content, the CKEditor 5 color picker displays your custom palette.
- Ensure your theme provides corresponding CSS classes for colors.
- Use CSS variables (`--color-*`) for easy color management.
---
## 🛠️ Troubleshooting
- **Clear cache:** Run `drush cr` after installation or configuration changes.
- **Check text format:** Make sure CKEditor 5 is enabled for your text format.
- **Debug:** Inspect browser console for JS errors.
---
## 🛠️ Development
Requirements for JavaScript plugin development:
- NodeJS
- yarn
1. Install dependencies: `yarn install`
2. Development: `yarn watch` or `yarn w fecolor`
3. Build: `yarn build` or `yarn b fecolor`
---
## đź“ť Notes
- UI configuration for colors is not available yet—contributions welcome!
- Site builders can extend color palettes and styles via custom modules.
---
## đź“š Resources
- [CKEditor 5 Documentation](https://ckeditor.com/docs/ckeditor5/latest/)
- [Drupal CKEditor 5 Guide](https://www.drupal.org/docs/core-modules-and-themes/core-modules/ckeditor5-module)
- [ucb_ckeditor_plugins inspiration](https://github.com/CuBoulder/ucb_ckeditor_plugins/tree/main)
---
**Enjoy consistent, branded editing with CKEditor5 FE Color!**