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

Here is a simple solution for this in Drupal 8, when you are using a custom theme or custom admin theme.

1. Open your custom theme info file *.info.yml and add the line above libraries or below base_theme.

   ckeditor_stylesheets:
     - css/ckeditor.css
   

2. Create a file ckeditor.css in the css/ directory.

3. Write your CSS in that file and the styles will be applied to CKEditor.