CKEditor CSS and JS Libraries

CKEditor CSS and JS Libraries allows Drupal site administrators to attach custom CSS stylesheets and JavaScript files to CKEditor 5 instances.

The module provides a configuration form where administrators can specify the paths to custom CSS and JavaScript files. These assets are automatically added to the CKEditor 5 libraries used by Drupal, making it possible to customize the editor without modifying Drupal core or theme files.

Features

• Attach a custom CSS stylesheet to CKEditor 5.
• Attach a custom JavaScript file to CKEditor 5.
• Use paths relative to the Drupal root directory.
• Use Drupal stream wrappers such as public:// and private://.
• Validate that configured files exist before saving the configuration.
• Automatically clear library discovery caches when the configuration is saved.
• Apply the configured assets to CKEditor 5 instances across the site.
• Support Drupal 10 and Drupal 11.
• Avoid modifications to Drupal core and contributed modules.

This module is useful when a site needs to customize the CKEditor 5 editing experience. Typical use cases include:

• Applying editor-specific styles to content while it is being edited.
• Loading custom JavaScript behavior for a CKEditor 5 integration.
• Adding styles required by custom CKEditor 5 plugins.
• Sharing editor assets across multiple text formats.
• Managing CKEditor 5 assets from the Drupal administration interface.

Post-Installation

After installing and enabling the module:

1. Go to Administration > Configuration > Content > CKEditor CSS and JS Libraries (/admin/config/content/ckeditor-css-js-libraries).
2. Enter the path to a custom CSS file in the Style sheet path field.
3. Enter the path to a custom JavaScript file in the JavaScript path field.
4. Save the configuration.

Example paths:

themes/custom/my_theme/css/ckeditor.css
themes/custom/my_theme/js/ckeditor.js

Stream wrapper paths are also supported:

public://ckeditor/ckeditor.css
public://ckeditor/ckeditor.js

The module verifies that each configured file exists before saving. Empty fields are allowed when only one type of asset is required.

When the configuration is saved, the module clears Drupal's library discovery cache so that the new CSS and JavaScript assets can be detected.

The configured CSS file is attached to CKEditor 5's stylesheet library, while the configured JavaScript file is attached to the CKEditor 5 JavaScript library.

Only trusted administrators should be allowed to configure these paths, especially JavaScript files. Custom JavaScript is executed in the CKEditor 5 context and should be reviewed before being added to a production site.

Additional Requirements

This module requires:

• Drupal 10 or Drupal 11.
• The Drupal core CKEditor 5 module.

No external PHP, JavaScript, or CSS libraries are required.

Community Documentation

Community documentation, demonstrations, and usage examples are welcome.

For configuration details, refer to the project documentation and the Drupal.org issue queue.