9

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.

11

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

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

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.
| improve this answer | |

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.