In Drupal 8, how can you have CKEditor load additional stylesheets when using a configured filter format? In Drupal 7, you could give the WYSIWYG module paths to CSS sheets to load, which made the editor text reflect the theme as much as possible. I am not seeing this option.
Here is one way to do it... not sure if there are others (admin based):
/**
* Implements hook_ckeditor_css_alter().
*
* Injects our CSS sheets anytime CKEditor has loaded.
*
* @param array $css
* @param Drupal\editor\Entity\Editor $editor
*/
function mymodule_ckeditor_css_alter(array &$css, Editor $editor) {
if (!$editor->hasAssociatedFilterFormat()) {
return;
}
$known_formats = [
'basic_html',
'full_html'
];
if (in_array($editor->getFilterFormat()->id(), $known_formats)) {
$css[] = drupal_get_path('theme', 'mytheme') . '/build/css/style.css';
}
}
-
4
Unless you want to load styles for specific formats, you can easily add CSS within your MODULE.info.yml
file, like so:
ckeditor_stylesheets:
- css/application.css
- css/ckeditor.css
Use @import
statements inside one of the stylesheets to pull in external stylesheets not in your theme:
/* in css/ckeditor.css */
@import url('//mycdn.com/myfonts.css');
@import url('/path/to/drupal/module/styles.css');
-
2I discovered a workaround to include external stylesheets using an
@import
statement. – JamesWilson Mar 22 '18 at 17:18 -
1Yes, you can use standard CSS import
@import url("http://example.com/file.css");
– Steven Sep 18 '18 at 22:33
Here is a simple solution for this in Drupal 8, when you are using a custom theme or custom admin theme.
Open your custom theme info file *.info.yml and add the line above
libraries
or belowbase_theme
.ckeditor_stylesheets: - css/ckeditor.css
Create a file ckeditor.css in the
css/
directory.- Write your CSS in that file and the styles will be applied to CKEditor.