How can I add my own CSS styles to CKEditor

Question

There is already a post dealing with this however, everything that was suggested has been tried and still nothing works this is what I have so far: In the config.js file

CKEDITOR.editorConfig = function(config)
 {

    config.defaultLanguage = 'en';
    config.language = 'en';
    config.resize_dir = 'vertical';
    config.format_tags = 'p;h1;h2;h3;h4;h5;h6';
    config.extraPlugins = 'stylesheetparser';
    config.contentsCss = '/css/fileName.css';
    config.stylesSet = [];
};

then in the css file mentioned above is some styling for the h1, h2, h3 etc..looks something like this:

h1 {
font-size: 24px;
font-family: "Arial", "sans-serif";
color: #5B5B5B;
}

h2 {
font-size: 24px;
font-family: "Arial", "sans-serif";
color: #FF4040;
}

h3 {
font-size: 24px;
font-family: "Arial", "sans-serif";
color: #60bf00;
}

the issue is that this is not changing the h1, h2, h3 etc.. tags, any ideas on how I can get this to work would be greatly appreciated.

Answer 1

I have a wrapper function that I use to init the RTE. Try doing something along these lines, which is similar to what @MiniRagnarok posted.

I just ran a test and it changes the CSS in both the editor's format and the inside the editor's contents. Be aware that you would need to reference the stylesheet on the page that the content is being display on or you won't see the updated styles.

function rteInit(inputId, height) {
    var editor = CKEDITOR.replace(inputId,
    {
        contentsCss: '/admin/css/ckeditor.css',
        height: height,
        toolbar: [ <!-- Toolbar options --> ]
    });
}

Answer 2

Try forcing overriding with !important. Eg:

font-size: 36px !important;

Answer 3

You could always go to ckeditor/contents.css and make all of your changes in that file. Those changes will be reflected in the editor.

Adding your own file is done by setting the config.

config.contentsCss = '/css/mysitestyles.css';
config.contentsCss = ['/css/mysitestyles.css', '/css/anotherfile.css'];