"And it's been right there, under my nose, the whole time!" This is you after I've revealed to you the solution to your current "problem" (and this was my reaction, as well): "How do I alter the out-of-the-box styling of myWYSIWYG editor in Drupal 8?"

How do you apply your own CSS styling without modifying the CKEditor plugin settings (and without providing classes in the "Styles" menu)?

It looks like the simplest solutions are both the most effective and the most difficult ones to notice.

And where do you add that for this “changing the styling of the content editor in the backend” type of challenge you're being offered not 1, but 2 simple solutions.

Thanks to Karen Stevenson, from Lullabot, to her "enlightening" blog post on styling the WYSIWYG editor in Drupal 8, we can all stop viewing the default styling that comes with our editor iframe, CKEditor, as being... unchangeable.

And replace it with our own CSS styles instead. 

Here's how:

 

The Scenario

So here you are now, long time after being so grateful to Drupal 8's contributors for having been as empathic as to deliver you a built-in WYSIWYG editor: the CKEditor! 

Now you're starting to acknowledge some of its limitations: what if you want to choose out of other styling options than the built-in ones that you're constrained to use? 

What if, let's say, you want to be enabled to use a whole different font and to apply your own CSS styling on one of the tables you've just inserted?

Keep reading and get ready to get “struck” by the simplicity of the 2 solutions at hand for solving this problem.

 

One Problem, 2 Solutions

Which way of solving it better suits your “style” as a front-end developer?

a. Adding ckeditor_stylesheets to your theme's info.yml file (heading to mytheme.info.yml)?

ckeditor_stylesheets:
  - css/styles.css

Just specify there your preferred CSS styles (the fonts and style.css files of your choice) that you want to transfer to and to get reflected on your WYSIWYG editor in Drupal 8.


b. Or implementing HOOK_ckeditor_css_alter() in your theme or a module?

function mymodule_ckeditor_css_alter(array &$css, Editor $editor) {
  $css[] = drupal_get_path('theme', 'mytheme') . '/css/mymodule-ckeditor.css';
}

Note:

• it makes no difference whether you're using an admin theme on the node form: the changes that you will have applied to the out-of-the-box styling of your WYSIWYG editor in Drupal 8 will still “bubble up” to your front-end theme
• you still need to go for one of the above-revealed solutions to alter your default styling since the CSS styles from your theme will not reflect on your editor as well
   

How Will Your WYSIWYG Editor in Drupal 8 “Behave” After Restyling It?

You've gone for one of the 2 solutions, you've applied it... now what?

How precisely will CKEditor “inject” those referenced CSS files into its editor iframe?

Here's how:

1. upon building its iframe, CKEditor identifies the theme that you're using as your default theme
2. then, it checks whether that theme has any ckeditor_stylesheets values added to its info.yml file
3. once/if spotted, it simply “injects” those CSS values into your editor iframe

As simple as that!

Note(s):

• you're free to use either CSS files from your front-end theme's director or to go for URLs to completely different files
• also, in case your theme doesn't implement ckeditor_stylesheets, there's one additional step to take: creating your own sub-theme to make that possible

And that's how you claim and gain total control over the styling of your WYSIWYG editor in Drupal 8! Have you discovered a... third solution to this issue maybe? Don't be “selfish”, do share it with the world dropping it in the comments here below!

---