1 ckeditor5.api.php hook_ckeditor5_css_alter(array &$css)

Modify the list of CSS files that will be added to a CKEditor 5 instance.

Modules may use this hook to provide their own custom CSS file without providing a CKEditor plugin.

Because this hook is only called for modules and the active theme, front-end themes will not be able to use this hook to add their own CSS files if a different admin theme is active. Instead, front-end themes and base themes may specify CSS files to be added to the page with CKEditor 5 instances through an entry in their .info file:

ckeditor5_stylesheets[] = css/ckeditor5-styles.css

Note that unlike CKEditor 4 that used an iframe, CKEditor 5 includes the editor directly on the page. Styles added through this hook may affect other parts of the page. To limit the effect of the CSS to just the CKEditor instance, all CSS selectors within this file should be prefixed with ".ck-content". For example:

 .ck-content blockquote {
   border-left: 5px solid #ccc;
 }

Parameters

array $css: An array of CSS files, passed by reference. This is a flat list of file paths relative to the Backdrop root.

See also

_ckeditor5_theme_css()

Related topics

Hooks Allow modules to interact with the Backdrop core.

File

core/modules/ckeditor5/ckeditor5.api.php, line 141
Documentation for CKEditor module APIs.

Code

function hook_ckeditor5_css_alter(array &$css) {
  $css[] = backdrop_get_path('module', 'my_module') . '/css/my_module-ckeditor5.css';
}