Jump to content

CKEditor Inputfield and multiple content stylesheets


Juergen
 Share

Recommended Posts

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

Link to comment
Share on other sites

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. ?

Link to comment
Share on other sites

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",

?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...