Jump to content
Juergen

CKEditor Inputfield and multiple content stylesheets

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

Share this post


Link to post
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. 🙄

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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",

🙄

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...