CKEditor: global custom config; frontend styles in the editor

[The G]

Disclaimer: please note that this is how I am doing it, it may or may not suit you, so take it with a grain of salt. Also, I apologize for not obeying ProcessWire's code style, I'm just too old and it feels alien to me.

Thing I'm trying to get:

1. not having to input the 'Custom Editor CSS File ...' and 'Custom Editor JS Styles Set ....' for each of the fields using CKEditor. Yeah, I know, call me lazy or sloppy or whatever, it is what it is ? .
2. having the front end styles in the editor container, so the one editing the page would be able to eyeball the styling of the content while stayin in the editor

For the first objective I tried to find a way in the CKEditor configuration options, like config.js, or at least a single point to set my options. In the end, what worked for me was hooking the Inputfield in ready.php:

if (strpos($_SERVER['REQUEST_URI'], $config->urls->admin) !== 0) {
    // things I do to frontend pages, believe me, you don't want to know :D

} else {
    $wire->addHookBefore('InputfieldWrapper::renderInputfield', function($event) {
        // process further if it is an InputfieldCKEditor
        if (strpos($event->arguments(0)->className(), 'InputfieldCKEditor') === 0) {
            // store the Inputfield
            $inputfield = $event->arguments(0);
            // my custom CKEditor options
            $my_settings = [
                'contentsCss' => '/site/assets/css/cke.css',
                'contentsInlineCss' => '/site/assets/css/cke_inline.css',
                'stylesSet' => 'mystyles:/site/modules/InputfieldCKEditor/mystyles.js',
                'extraAllowedContent' => '*[id](*); audio[src,controls,preload]; source[src,type]; button[title]; script; i[data-feather]; svg[xmlns,height,width]; path[d,fill,stroke]',
            ];

            // for each option, check if it's empty and if it is set it to the custom value
            foreach ($my_settings as $key => $value) {
                if (empty($inputfield->get($key))) {
                    $inputfield->set($key, $value);
                }
            }

            // get the changes into $event
            $event->arguments(0, $inputfield);
        }
    });

}

Now, my CSS files are generated by Sass in the /site/assets/css/ directory, because of the second objective. Thus, I'm including the frontend CSS in three places: the two custom CSS files used by CKeditor in regular/inline mode and defined above ('contentsCss' and 'contentsInlineCss' options), and my custom CSS file used by admin.php. The regular mode CSS files contains:

// cke.sass - Sass syntax
@import "main"

where main.sass is my frontend Sass file (I have a real talent for names, I know). So it includes all the frontend styles in the regular CKEditor iframe. The inline mode CSS file contains:

// cke_inline.sass
.cke_editable_inline
  @import "main"

This way the frontend styles are applied only to elements inside the CKEditor inline container. I know I'm tying myself to the CKEditor markup, but as you may have noticed by now, I'm quite eager to sell myself in slavery for a bit of convenience ? . The admin styles are built the same, changing only the container class and adding some styles to increase readability:

// admin.sass
/* force a min width for CKEditor combo, so I can read the text */
.cke_combopanel
  min-height: 21rem
  min-width: 25rem
  > iframe
    height: 100% !important

.cke
  @import "main"

The resulting /site/assets/css/admin.css file is loaded by /site/templates/admin.php by adding

$config->styles->add($config->urls->assets.'css/admin.css');

before the

require($config->paths->adminTemplates . 'controller.php');

line.

Lo and behold, Bulma styles available in the editor toolbar and container (there's a short clip attached).

 

Well, this should be it. I hope it helps someone.

If you know a better way to do this or if you notice a mistake/omission, by all means, let me know.

Thank you for following me until now - here's the medal you rightly deserve: ?

 

LATER EDIT: sorry about the video size, I swear it's just a little 578x472px video.