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):

use Drupal\editor\Entity\Editor;

/**
 * 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.

Answer 4

You can add custom CSS with something like this. You can add your custom CSS to editor.css.

use Drupal\editor\Entity\Editor;

function MYMODULE_ckeditor_css_alter(array &$css, Editor $editor) {
  $css[] = drupal_get_path('module', 'MYMODULE') . '/ckeditor/moono_dark/editor.css';
}

This page was one of the top hits for theming a Drupal CKEditor skin too

I was able to change the skin with this code from Drupal.org. You can load Moono Dark with something like this. You can put it in your custom module's .module file.

You will have to change the URL below based on where you download the skin, but you get the idea.

function MYMODULE_editor_js_settings_alter(array &$settings) {
  foreach (array_keys($settings['editor']['formats']) as $text_format_id) {
    if ($settings['editor']['formats'][$text_format_id]['editor'] === 'ckeditor') {
      $settings['editor']['formats'][$text_format_id]['editorSettings']['skin'] = 'Moono Dark,https://www.example.com/modules/custom/MYMODULE/ckeditor/moono_dark/editor.css';
    }
  }
}

https://www.drupal.org/docs/8/api/ckeditor-api/overview