6

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.

9

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';
  }
}
  • before function, use Drupal\editor\Entity\Editor; is needed. – user780 Nov 3 '18 at 19:51
7

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');
  • 1
    I discovered a workaround to include external stylesheets using an @import statement. – JamesWilson Mar 22 '18 at 17:18
  • Yes, you can use standard CSS import @import url("http://example.com/file.css"); – Steven Sep 18 '18 at 22:33
-1

See the excellent article:

http://www.drupalthemer.org/blog/drupal-8-how-to-ckeditor-custom-styles

It gives step by step instructions on this topic. Basically, you need to have the styles you want to use in your theme, then used ckeditor configuration to stick them, with a recognizable label, in the style drop down in the ckeditor toolbar.

I don't particularly like that you have to modify a theme css file so be sure to back your modifications up unless you are using a custom theme.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.