{"id":31642161,"url":"https://github.com/havran/ckeditor5-fe-color-plugin","last_synced_at":"2026-04-18T11:32:07.205Z","repository":{"id":316193798,"uuid":"1062329500","full_name":"havran/ckeditor5-fe-color-plugin","owner":"havran","description":"CKEditor 5 color dropdown with classes","archived":false,"fork":false,"pushed_at":"2025-10-04T13:24:56.000Z","size":118,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-04T14:32:58.645Z","etag":null,"topics":["ckeditor5","drupal"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/havran.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-23T05:50:53.000Z","updated_at":"2025-10-04T13:25:00.000Z","dependencies_parsed_at":null,"dependency_job_id":"77388811-65f4-4b57-bbf0-fe96489f3328","html_url":"https://github.com/havran/ckeditor5-fe-color-plugin","commit_stats":null,"previous_names":["havran/ckeditor5-fe-color-plugin"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/havran/ckeditor5-fe-color-plugin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/havran%2Fckeditor5-fe-color-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/havran%2Fckeditor5-fe-color-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/havran%2Fckeditor5-fe-color-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/havran%2Fckeditor5-fe-color-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/havran","download_url":"https://codeload.github.com/havran/ckeditor5-fe-color-plugin/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/havran%2Fckeditor5-fe-color-plugin/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31966946,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T00:39:45.007Z","status":"online","status_checked_at":"2026-04-18T02:00:07.018Z","response_time":103,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ckeditor5","drupal"],"created_at":"2025-10-07T03:56:55.030Z","updated_at":"2026-04-18T11:32:07.174Z","avatar_url":"https://github.com/havran.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CKEditor5 FE Color Plugin\n\nA CKEditor 5 plugin for Drupal that provides customizable frontend color palettes, enabling content editors to use consistent brand colors across your site.\n\nInspired by [ucb_ckeditor_plugins](https://github.com/CuBoulder/ucb_ckeditor_plugins/tree/main).  \nThank you to the original authors!\n\n---\n\n## 🚀 Introduction\n\n**CKEditor5 FE Color** extends Drupal’s CKEditor 5 integration with predefined, configurable color palettes.  \nContent editors can easily apply branded colors, ensuring visual consistency for your organization.\n\n---\n\n## 📦 Requirements\n\n- **CKEditor 5 (Core module)** must be enabled.\n\n---\n\n## ⚙️ Configuration\n\n### 1. Enable the Plugin\n\n- Install and enable this module.\n- Ensure CKEditor 5 is set up for your desired text format.\n- In Drupal’s text format configuration, drag the **FeColor** button into your CKEditor 5 toolbar.\n\n### 2. Color Palette Configuration\n\n- **Currently, all color settings are code-based** (no UI yet).\n- Default palettes are set in `ckeditor5_fe_color.ckeditor5.yml` under the key  \n  `ckeditor5_fe_color_fecolor.ckeditor5.config.fecolor.colors`.\n\n\u003cdetails\u003e\n\u003csummary\u003eExample YAML Color Configuration\u003c/summary\u003e\n\n```yml\nckeditor5_fe_color_fecolor:\n  ckeditor5:\n    plugins:\n      - fecolor.FeColor\n    config:\n      fecolor:\n        colors:\n          - label: Black\n            color: '#000000'\n            class: 'color-black'\n          - label: White\n            color: '#FFFFFF'\n            class: 'color-white'\n            options:\n              hasBorder: true\n  drupal:\n    label: Fe Font Color\n    library: ckeditor5_fe_color/ckeditor5.fecolor\n    admin_library: ckeditor5_fe_color/admin.fecolor\n    class: Drupal\\ckeditor5_fe_color\\Plugin\\CKEditor5Plugin\\FeColor\n    toolbar_items:\n      fecolor:\n        label: Fe Font Color\n    elements:\n      - \u003cspan\u003e\n      - \u003cspan class=\"color-black color-white\"\u003e\n```\n\u003c/details\u003e\n\n---\n\n### 3. Customizing Colors\n\n**Best practice:**  \nOverride or extend palettes in a custom module, not in this module directly.\n\n#### Hooks for Customization\n\nAdd your colors via Drupal hooks in your custom module:\n\n```php\n\u003c?php\n\nuse Drupal\\ckeditor5\\Plugin\\CKEditor5PluginDefinition;\n\n/**\n * Implements hook_library_info_alter().\n *\n * This add CKEditor 5 stylesheets CSS files to the editor. You can simply\n * add your custom CSS file(s) to your module and provide path(s) in\n * your `mymodule.info.yml` file in `ckeditor5-stylesheets` property.\n */\nfunction mymodule_library_info_alter(\u0026$libraries, $extension) {\n  $module = 'mymodule';\n  if ($extension === 'ckeditor5') {\n    // Add paths to stylesheets specified by a modules's ckeditor5-stylesheets\n    // config property.\n    $module_path = \\Drupal::service('extension.list.module')-\u003egetPath($module);\n    $info = \\Drupal::service('extension.list.module')-\u003egetExtensionInfo($module);\n    if (isset($info['ckeditor5-stylesheets']) \u0026\u0026 $info['ckeditor5-stylesheets'] !== FALSE) {\n      $css = $info['ckeditor5-stylesheets'];\n      foreach ($css as $key =\u003e $url) {\n        // CSS URL is external or relative to Drupal root.\n        if (UrlHelper::isExternal($url) || $url[0] === '/') {\n          $css[$key] = $url;\n        }\n        // CSS URL is relative to theme.\n        else {\n          $css[$key] = '/' . $module_path . '/' . $url;\n        }\n      }\n    }\n    $libraries['internal.drupal.ckeditor5.stylesheets'] = [\n      'css' =\u003e [\n        'theme' =\u003e array_fill_keys(array_values($css), []),\n      ],\n    ];\n  }\n}\n\n/**\n * Implements hook_editor_js_settings_alter().\n */\nfunction mymodule_editor_js_settings_alter(array \u0026$settings) {\n  // CKEditor 5 FeColor plugin colors configuration.\n  // Add custom colors or modify existing ones for the 'basic_html' text format.\n  $settings['editor']['formats']['basic_html']['editorSettings']['config']['fecolor']['colors'] = __mymodule_colors();\n}\n\n/**\n * Implements hook_ckeditor5_plugin_info_alter().\n */\nfunction mymodule_ckeditor5_plugin_info_alter(array \u0026$plugin_definitions): void {\n  // Add all color classes to the CKEditor 5 FeColor plugin elements configuration.\n  if (isset($plugin_definitions['ckeditor5_fe_color_fecolor'])) {\n    assert($plugin_definitions['ckeditor5_fe_color_fecolor'] instanceof CKEditor5PluginDefinition);\n    $fecolor_plugin_definition = $plugin_definitions['ckeditor5_fe_color_fecolor']-\u003etoArray();\n    $fecolor_plugin_definition['drupal']['elements'][] = '\u003cspan class=\"' . join(' ', __mymodule_colors_classes()) . '\"\u003e';\n    $plugin_definitions['ckeditor5_fe_color_fecolor'] = new CKEditor5PluginDefinition($fecolor_plugin_definition);\n  }\n}\n\nfunction __mymodule_colors(): array {\n  return [\n    [\n      \"label\" =\u003e \"Black (color-black)\",\n      \"class\" =\u003e \"color-black\",\n      \"color\" =\u003e \"var(--color-black)\",        // #000000\n    ],\n    [\n      \"label\" =\u003e \"White (color-white)\",\n      \"class\" =\u003e \"color-white\",\n      \"color\" =\u003e \"var(--color-white)\",        // #ffffff\n      \"options\" =\u003e [\n        \"hasBorder\" =\u003e TRUE\n      ],\n    ],\n    // Add more custom colors here.\n  ];\n}\n\nfunction __mymodule_colors_classes(): array {\n  return array_column(__mymodule_colors(), 'class');\n}\n```\n\n#### Add Custom CSS\n\nAnd in you `mymodule.info.yml` file provide CSS file(s):\n\n```yml\nname: My Module\ntype: module\ndescription: 'Customization for CKEditor 5 font colors and CSS.'\npackage: My Theme\ncore_version_requirement: ^10 || ^11\nckeditor5-stylesheets:\n  - css/icons/icons.css                                 # Optional, if you use Material Icons\n  - css/ckeditor5.css                                   # Your custom styles for CKEditor 5\n  - //fonts.googleapis.com/icon?family=Material+Icons   # Optional, if you use Material Icons\n```\n\nExample `css/ckeditor5.css` file:\n\n```css\n:root {\n  --color-black: #fb9116;\n  --color-white: #aaaaaa;\n  /* Add more colors here. */\n}\n\n/* Example how provide CKEditor 5 content styles */\n\nspan.color-black {\n  color: var(--color-black);\n}\n\nspan.color-white {\n  color: var(--color-white);\n}\n\n.ck-content h1 {\n  padding-bottom: 16px;\n}\n```\n\n---\n\n## ✨ Usage\n\n- When editing content, the CKEditor 5 color picker displays your custom palette.\n- Ensure your theme provides corresponding CSS classes for colors.\n- Use CSS variables (`--color-*`) for easy color management.\n\n---\n\n## 🛠️ Troubleshooting\n\n- **Clear cache:** Run `drush cr` after installation or configuration changes.\n- **Check text format:** Make sure CKEditor 5 is enabled for your text format.\n- **Debug:** Inspect browser console for JS errors.\n\n---\n\n## 🛠️ Development\n\nRequirements for JavaScript plugin development:\n\n- NodeJS\n- yarn\n\n1. Install dependencies: `yarn install`\n2. Development: `yarn watch` or `yarn w fecolor`\n3. Build: `yarn build` or `yarn b fecolor`\n\n---\n\n## 📝 Notes\n\n- UI configuration for colors is not available yet—contributions welcome!\n- Site builders can extend color palettes and styles via custom modules.\n\n---\n\n## 📚 Resources\n\n- [CKEditor 5 Documentation](https://ckeditor.com/docs/ckeditor5/latest/)\n- [Drupal CKEditor 5 Guide](https://www.drupal.org/docs/core-modules-and-themes/core-modules/ckeditor5-module)\n- [ucb_ckeditor_plugins inspiration](https://github.com/CuBoulder/ucb_ckeditor_plugins/tree/main)\n\n---\n\n**Enjoy consistent, branded editing with CKEditor5 FE Color!**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhavran%2Fckeditor5-fe-color-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhavran%2Fckeditor5-fe-color-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhavran%2Fckeditor5-fe-color-plugin/lists"}