How to load theme style(s) in CKEditor?

Question

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.

Answer 1

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';
  }
}

Answer 2

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');

Answer 3

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.