How to add custom CSS for CKEditor styles to rendered WYSIWYG content AND (node) add / edit forms with CKEditor textareas

What Drupal 8 supports

Actually, Drupal 8 already supports this exact use case.

In fact, Bartik uses it!

ckeditor_stylesheets:
  - css/base/elements.css
  - css/components/captions.css
  - css/components/table.css
  - css/components/text-formatted.css

Bartik is a front-end theme. Seven is the admin theme. When using /node/add/article or /node/3/edit, you're using the admin theme. But CKEditor will load the ckeditor_stylesheets the front-end theme (Bartik by default) defines in the CKEditor iframe instance.

Your statements

But this solution seems not to work if you are using the admin theme for your (node) add / edit forms which is a common use case.

This is not true. I suspect you made a small mistake or ran into a caching problem. What you did was correct, and should definitely work. It works for Bartik. Check for yourself in a vanilla Drupal 8 installation.

I created a custom module (together with some README instructions) for one of my clients that scans for a special named CSS file in the default theme to add it via hook_ckeditor_css_alter() to cover both cases: content editing with the default theme and with the admin theme.

So I found a solution for the problem, but my question is: Is there an easier way to solve this problem?
I think that a lot of Drupal users will run into the same trouble.

Totally agreed that that should not be necessary!

P.S.: You said you can add some CSS code (e.g. ".cke-color-red { color: red; }") to a custom CSS file in your theme — but I'd strongly advise against using cke-color-red as a selector, because it's A) not really CKEditor-specific even though the name suggests otherwise, B) non-semantic. Call it "important" or "callout" or something like that, but not "color red".

Conclusion

Again, I'm certain that this was caused by a silly typo, or by a caching problem. Themes' *.info.yml files are not re-read on every request. After modifying YAML files, clear all caches.

Also, to make it clearer, I updated the documentation: https://www.drupal.org/node/2617470/revisions/view/9442027/9442067.

Is it possible to make it work with adminimal theme?

#4 you have the specify...

ckeditor_stylesheets:
- path-to-your-css

...in your frontend theme.

-

This is still confusing. The assumption is that this would be something set from your administration theme *not* your front-end theme. Setting 'ckeditor_stylesheets' in your admin themes .info.yml is ignored.

This doesn't make a great deal of sense. You make a setting in one theme to effect the another, unless you're breaking normal convention and not using an admin theme for content creation/editing.

Faced with the same issue, I just modified the elements.css file in Bartik. (bartik/css/base ...) It is already pointed to by the info.yml file. However, this raises another issue: if you use the tar.gz files for a live update and replace /core/themes/bartik with the latest version it will overwrite your changes. This of course is also true even if you pointed to a new file with the info.yml (the info.yml would get overwritten). So I copy my elements.css off to safety in my themes directory at the same level as core (where contrib themes go) and do a quick compare of elements.css between the version from the updated drupal version and the "old" one, then copy my elements.css file back into core/themes/bartik. Not ideal but it works. (I know real developers don't update their sites live from the tar.gz but I'm not a real developer and if someday I trash my site briefly the world is not coming to an end).

Am now looking at a similar issue in views. You can add a custom style for a field being displayed in views. But where to put the style? I'm thinking that down the road I may have to study up on using a custom theme that doesn't get updated automagically. It would be nice if there was a site-wide place to put custom styles that would be protected from automatic updates instead and would be available on every page load.

Incidentally, the link to:
https://www.drupal.org/node/2617470/revisions/view/9442027/9442067
shows all the code for the revisions. Maybe that was intended? but
https://www.drupal.org/node/2617470
might be a less confusing link to follow.

I don't really like this solution. Way to complicated for normal users. We should add the simple textfield inside the textformat settings agin, to include css files.

For some reason, the themename_ckeditor_css_alter function is not taking (8.3.7) for an admin theme...is that second solution only applicable to modules? If so, this is needlessly complicated since it would be preferable to just put the ckeditor_stylesheets info in the theme.info.yml, which is what I had originally done at first until today when I realized it wasn't working...

I want to make some adjustments that are only available on the admin side, such as a marker to show a <wbr /> tag and some other minor things to assist content development.

Yes to #7. Why make it hard when it doesn't need to be?

I get the thinking that the iframe styling should be reflective of the front end theme so that content editors see a realistic WYSIWYG preview, but this does not fit with the use case of just wanting to tidy up the editor. For example, changing the default font from Georgia to something else.

Suggested in #2 works for me. And I agree that it is confusing.

I almost feel like a contrib module would be less confusing, or a checkbox related to ckeditor somewhere.

One challenge we had is that our site was setup to style certain elements based on DOM elements that weren't present in the CKEditor window.

In addition to using the `ckeditor_stylesheets` directive in the themes info.yml file (as mentioned above), we also needed to insert some additional classes in the ckeditor view so that the necessary CSS rules would be applied.

To do this, I used the following hook in a custom module:

/**
 * Implements hook_editor_js_settings_alter().
 */
function MYMODULE_editor_js_settings_alter(array &$settings) {
  // Add the necessary class to the WYSIWYG editor, so that the it matches the front end.
  // Note that 'full_html' reflects the name of the text format used. 
  $settings['editor']['formats']['full_html']['editorSettings']['bodyClass'] = "whatever-class-you-want";
}

You can also add a new css file using a hook

function hook_ckeditor_css_alter(array &$css, Editor $editor) {
  $css[] = \Drupal::service('extension.list.module')->getPath('mymodule') . '/css/mymodule-ckeditor.css';
}

see more at https://git.drupalcode.org/project/drupal/-/blob/9.5.x/core/modules/cked...

#15 worked for me for adding CSS from custom module.

#15 worked for me. I was able to add a new CSS from my custom module.