CKEditor – adding custom style sheet

CKEDITOR.config.contentsCss = '/css/mycssfilename.css' ;

12 thoughts on “CKEditor – adding custom style sheet”

1. I’m using CKEditor to replace the default WordPress editor – works fine.

   However, I need to add custom CSS styles to the Style button but the CKEDITOR.config.contentsCss option is not available to do this.

   What I have available is:

   CKEDITOR.config.js
   CKEDITOR.config.styles.js
   CKEDITOR.config.templates.js

   Am I missing something?

   (In the CKEditor Advanced Settings, defining the Editor CSS to my own CSS file path has applied my styles to the page elements in the WYSIWYG editor OK, but they’re not available from the Styles button)

2. The config.js file is where to place the config options, so place something like
   config.contentsCss = “directory/file.css”

   HTH

3. Thanks for the swift reply genux.

   I tried placing this in the config.js as you suggested (double checked the path and its OK), placed before the existing closing }; tag

   // CKEDITOR.config.contentsCss = ‘…./css/my.css’;

   I also tried using an absolute URL for the path to my.css

   My custom CSS styles are still not showing up in the WYSIWYG Styles button.

   Have I got the syntax or placement in the config.js file wrong or is there something more I’m missing?

4. It *should* work fine from the config.js, it was for me.

   Just after the editor.on code within the javascript as below

   var editor = CKEDITOR.replace( 'Content',{resize_maxWidth : 750, toolbar : 'COOP', on : { instanceReady : function( ev ) { this.dataProcessor.writer.setRules( 'p', { indent : false, breakBeforeOpen : true, breakAfterOpen : false, breakBeforeClose : false, breakAfterClose : true }); } } });   CKEDITOR.config.contentsCss = '/path/file.css' ;   editor.on( 'pluginsLoaded', function( ev )

   var editor = CKEDITOR.replace( 'Content',{resize_maxWidth : 750, toolbar : 'COOP', on : { instanceReady : function( ev ) { this.dataProcessor.writer.setRules( 'p', { indent : false, breakBeforeOpen : true, breakAfterOpen : false, breakBeforeClose : false, breakAfterClose : true }); } } }); CKEDITOR.config.contentsCss = '/path/file.css' ; editor.on( 'pluginsLoaded', function( ev )

   Hope that helps…

5. Thanks again genux.

   Hmm, in my ckeditor.config.js file I don’t see any of the code you mention, nor can I find anything similar searching for your content in other files (without the CKEDITOR.config.contents = etc line of course).

   (Unable to paste the code from the ckeditor.config.js file I have here because of the Spam protection here I guess)

6. Hi,

   That code below is within the javascript to create the CKEditor on the page itself, not sure how you are getting the CKEdtior into the wordpress, but if you view the page/plugin for displaying that CKEditor and check out the code, if you are able to insert that

   CKEDITOR.config.ContentCss = ....

   CKEDITOR.config.ContentCss = ....

   then that will be great, else you need to make sure the the config.js is loading, try altering the default menu bars for the ckeditor from that config.fs file, if they do not work then that file is not loading.

7. Ah, I understand. Thanks again genux, your perseverance is much appreciated!

   I have CKEditor installed as a WordPress plugin (to replace the default TinyMCE) and can read and edit the CKEDITOR.config.js file using the CKEditor File Editor from the CKEditor menu available in WordPress.

   Yup, editing the CKEDITOR.config.js file changes the default menu bars OK. However, where ever I place this:

   CKEDITOR.config.contentsCss =

8. can I view it to see what it is that could be missing ? just encase with inserting CKEditor into the wordpress it is not using the standard files ?

9. Its an as yet unpublished website for a client so I’m unable to give you access to the site unfortunately. However, I can download specified CKEditor files from the site, zip them up and upload them for you to review if that will work?

10. Yep sure.. shall send a email for you to email me back.

11. Thanks genux, email replied 🙂

12. Hi,

    I place the code

    CKEDITOR.config.contentsCss = ‘../../css/adminstyle.css’;

    in config.js file….but not showing css/style in editor

    plz help