Although Drupal is designed to be styled using css files and configuration in the *.libraries.yml files, the CKEditor 5 module defines some styles in a Java Script file which:
- Is included at the end of the page in Drupal so it overrides all styles defined in css files which are included in header.
- Uses css variables to define various properties for styling purposes.
These variables are supposed to be modified as described in the CKEditor 5 Theme customization documentation. However, when a css file with custom values is included in Drupal, it's placed in the header which means the js overrides the custom values and not vice-versa.
So, the question is: as the CKEditor 5 is part of the Drupal core, what's the proper Drupal-way to override its css variables to customize the editor? Is there a Drupal documentation addressing this which I missed?
Example
The JS defines following style for the background of edited CKE field:
.ck.ck-editor__main>.ck-editor__editable {
background: var(--ck-color-base-background);
border-radius: 0;
}
So in order to change the background, the --ck-color-base-background variable should be modified.
What I Tried
Created the css/components/ckeditor.css file:
:root {
--ck-color-base-background: green;
}
This attempts to modify the variable as described in the CKEditor 5 Theme customization documentation.
#app .ck-content {
--ck-color-base-background: red;
}
This attempts to modify the variable a way I found on some page, regrettably lost the link and cannot find it again.
.ck.ck-editor__main > .ck-editor__editable {
background: blue;
}
And this attempts to override the style directly.
Attempt #1
Include the custom css file in the my_theme.info.yml file as described in New API for adding theme-specific styles in CKEditor 5 and How to style custom content in CKEditor 5 Drupal documents:
ckeditor5-stylesheets:
- css/components/ckeditor.css
Result:
- The file is included in the middle of header.
- The variable is unchanged and the custom style is overridden by default CKEditor style (from the CKE js.)
Attempt #2
Increase weight of the css file in the my_theme.info.yml file:
ckeditor5-stylesheets:
- css/components/ckeditor.css: { weight: 100000 }
Result:
- Failed with PHP error TypeError: strpos(): Argument #1 ($haystack) must be of type string, array given in strpos() (line 257 of core/lib/Drupal/Component/Utility/UrlHelper.php).
Attempt #3
Extend the core/ckeditor5 library.
In my_theme.info.yml file:
libraries-extend:
core/ckeditor5:
- my_theme/ckeditor5
In the my_theme.libraries.yml file:
ckeditor5:
css:
component:
css/components/ckeditor.css: { weight: 100000 }
Result:
- The custom css file is included last in the header.
- The variable is unchanged and the custom style is overridden by default CKEditor style (from the CKE js.)
Attempt #4
The CKEditor 5 Theme customization documentation says that the css file can be imported in Java Script.
In the my_theme.libraries.yml file:
ckeditor5:
css:
component:
css/components/ckeditor.css: { weight: 100000 }
js:
js/components/ckeditor.js: { attributes: { type: module } }
The custom ckeditor.js file:
/**
* @module my_theme/ckeditor
*/
import '../../css/components/ckeditor.css';
Result:
- The js file is included after the core/ckeditor5 libraries.
- The js file fails with the Loading module from “.../css/components/ckeditor.css” was blocked because of a disallowed MIME type (“text/css”) error.
Attempt #5
In the Adding assets (CSS, JS) to a Drupal theme via *.libraries.yml Drupal documentation, there's mentioned header property. It's meant for Java Script, but let's try whether it works also for CSS.
In the my_theme.libraries.yml file:
ckeditor5:
header: false
css:
component:
css/components/ckeditor.css: { weight: 100000 }
js:
js/components/ckeditor.js: { attributes: { type: module } }
Result:
- The custom css file is still in header.
Attempt #6
An answer to the How to make CSS and JS both load in the footer question mentions scope option.
In the my_theme.libraries.yml file:
ckeditor5:
header: false
css:
component:
css/components/ckeditor.css: { weight: 50, scope: footer }
Result:
- The custom css file is still in header.
Technical Details
The style with variables I mentioned above is defined in the core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js file. It's already minified, so it's hard to read and figure out how it works, but it's the only place found by text search which sets it.
Other Links
- CKEditor 5 background-color ignored in Olivero subtheme? Drupal issue - related to this, closed as "works as designed," but doesn't provide actual solution to changing CKE css variables, it just suggests:
- To use different, more specific css selector. This goes against the CKE documentation and doesn't answer to how generally modify these variables. Also, this is prone to errors as variables can be used by multiple styles, so one needs to be really careful to override them all.
- To override the relevant library. Are we really supposed to provide custom version of the ckeditor5-dll.js file?
- Move styles down with weight. As demonstrated above, this cannot work unless there's a way to move it between js files in the footer.
- how can I style ckeditor5?( background-color and stuff ) question - basically same problem, but outside Drupal. The answer is to override the --ck-color-base-background which is what I'm trying to do, but can't figure how to do that in Drupal.
- New API for adding theme-specific styles in CKEditor 5 Drupal page - at the end, there's a question asking similar thing, ignored.
Notes
- I use updated Drupal 10 (via PHP Composer if that matters.)
- During testing, I disabled merging css/js files.
- After each attempt, I cleared cache and confirmed that the css/js file are actually included.
