- Issue created by @druplr
Is there a straightforward way to override/disable the base theme's ckeditor5-stylesheets
? Base theme's CKEditor5 stylesheet gets loaded by _ckeditor5_theme_css()
regardless of my sub-theme's ckeditor5-stylesheets
value.
I am using bootstrap5 as base theme. It has the following lines and seems to follow the instructions in Change record: New API for adding theme-specific styles in CKEditor 5 → .
ckeditor5-stylesheets: - css/ck5style.css
This issue happens in both D10 and D11 with any base theme that has CKEditor5 stylesheets.
The change record → above does not say anything about the expected behaviour regarding the base theme's CKEditor5 stylesheets. So, I'm not sure if this should be considered a feature request or a bug.
Workaround: Here is a workaround, but it would be easier to control this through sub-theme's ckeditor5-stylesheets
value.
/**
* Implements hook_system_info_alter().
*/
function mymodule_system_info_alter(array &$info, Extension $file, $type) {
if ($type == 'theme' && $file->getName() == 'bootstrap5') {
$info['ckeditor5-stylesheets'] = FALSE;
}
}
0. Make sure ckeditor5
is installed.
1. Install a base theme that has ckeditor5-stylesheets
value, for example
bootstrap5 →
(inside D10, as bootstrap5
is not available in D11 yet).
composer require 'drupal/bootstrap5:^4.0' drush theme:install bootstrap5
2. Create a sub-theme. For bootstrap5
, you can use the following command:
drush --include="web/themes/contrib/bootstrap5/src/Drush" bootstrap5:generate-subtheme my_subtheme --subtheme-name="My sub-theme"
3. Observe that our new sub-theme has the following lines and seems to follow the instructions in the change record → above:
... ckeditor5-stylesheets: - css/ck5style.css ... base theme: bootstrap5
4. Install the sub-theme and make it the default theme. Also, turn off CSS aggregation for easier testing and clear cache.
drush theme:install my_subtheme drush config-set system.theme default my_subtheme drush config-set system.performance css.preprocess 0 drush cr
5. Test through browser/drush
:
5.a Test in browser: Go to /node/add/page
and observe that CKEditor5 stylesheets are loaded for both base theme and sub-theme (for example, the /themes/contrib/bootstrap5/css/ck5style.css
and /themes/custom/my_subtheme/css/ck5style.css
).
5.b Check _ckeditor5_theme_css()
's output by executing the following drush command:
drush eval 'echo var_dump(_ckeditor5_theme_css());'
... and observe that CKEditor5 stylesheet of base theme still shows up in the output in addition to the sub-theme's:
array(2) { [0]=> string(43) "/themes/contrib/bootstrap5/css/ck5style.css" [1]=> string(48) "/themes/custom/my_subtheme/css/ck5style.css" }
6. Now set ckeditor5-stylesheets
to false
in your sub-theme's .info.yml
file:
... ckeditor5-stylesheets: false ... base theme: bootstrap5
7. Clear cache and repeat the step 5 above for testing:
7.a Test in browser: Observe that base theme's CKEditor5 stylesheet (for example, the /themes/contrib/bootstrap5/css/ck5style.css
above) is loaded.
7.b Check _ckeditor5_theme_css()
's output using the following command:
drush eval 'echo var_dump(_ckeditor5_theme_css());'
and observe that the base theme's CKEditor5 stylesheet still shows up in the output:
array(1) { [0]=> string(43) "/themes/contrib/bootstrap5/css/ck5style.css" }
Either of the following:
ckeditor5-stylesheets
set (either false
or actual CKEditor5 stylesheets). However, it may cause issues for existing sites that are intended to use CKEditor5 stylesheets from both base theme and the sub-theme.libraries-override
.Active
11.0 🔥
Last updated