CKEditor Inputfield and multiple content stylesheets

[Juergen]

Hello @ all,

I am struggeling to add multiple stylesheets to the CKEditor content area. Docs from CKEditor says that it is possible to add a string or an array as source for the stylesheets.

Inside the CKEditor settings tab there is an input field where you can add a path to a custom stylesheet. This works only if I enter only one stylesheet (string) - if i try to enter an array it fails and falls back to the default stylesheet.

Therefore I have tried to add the stylesheets to the config-body.js directly (because the field is called body)

CKEDITOR.editorConfig = function( config ) {
  config.contentsCss = ['https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.6/css/uikit.min.css', '/site/modules/InputfieldCKEditor/admin.css'];
};

But this does not work either. Has someone an idea to get it working?

Best regards

[dragan]

Strange. According to the official docs, this should work. Maybe a caching issue? 

Can't you just use @import ?

Try adding a Custom Editor JS Styles Set, and then follow these steps: https://processwire.com/docs/fields/ckeditor/#custom-editor-js-styles-set

 

[Juergen]

Thanks @dragan

I use a custom style set for special UIKit markup classes. Including the code inside this file does not work too. BTW this file should be used to add custom styles to the dropdown not for configuration of the stylesheets. The docs of PW says that the configuration changes should be written inside /site/modules/InputfieldCKEditor/config.js

I have tried it but without success. ?

[dragan]

You probably need to tell PW that it should look in that folder instead of wire/modules/. Did you clone the entire module folder to site/modules/ ?

[Juergen]

Yes the folder is under site and if I look into the source code I can see that the correct config.js is there.

"stylesSet": "customstyles:/processwire/site/templates/scripts/customstyles.js?nc=1563189734",
"customConfig": "/processwire/site/modules/InputfieldCKEditor/config-body.js?nc=1563175984"

Inside the config-body.js I have the following code:

CKEDITOR.editorConfig = function( config ) {
  config.contentsCss = 'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.6/css/uikit.min.css';
};

But the CSS from the CDN will not be loaded. Instead the one from the wire-folder will be loaded.

"baseHref": "/processwire/",
"contentsCss": "/processwire/wire/modules/Inputfield/InputfieldCKEditor/contents.css",
"extraPlugins": "pwimage,pwlink,sourcedialog",

?

[Juergen]

I have opened a new issue on Github: https://github.com/processwire/processwire-issues/issues/929