CKEditor – adding custom style sheet

Within the CKEditor editor you can add in custom style sheets to assist with styling of the content within the editor and here is how you do it

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

After you have created the instance of the CKEditor you just need to add in to the configuration the contents cascading style sheet file.


Tags: , ,

12 Responses to “CKEditor – adding custom style sheet”

  1. Paul Cooper says:

    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. genux says:

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

    HTH

  3. Paul Cooper says:

    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. genux says:

    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 )

    Hope that helps…

  5. Paul Cooper says:

    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. genux says:

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

    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. Paul Cooper says:

    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. genux says:

    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. Paul Cooper says:

    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. genux says:

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

  11. Paul Cooper says:

    Thanks genux, email replied :-)

  12. Hiral says:

    Hi,

    I place the code

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

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

    plz help

Leave a Reply