How can I add my own CSS styles to CKEditor


Tags: javascript,css,ckeditor

Problem :

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.



Solution :

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 --> ]
    });
}

    CSS Howto..

    How to Change the hover image in CSS

    How do you structure css files for a web project?

    How to prevent CSS block elements from affecting parent inline-blocks

    HTML/CSS: How to achieve the following center-left alignment?

    CSS: How to create special shape

    How can I vertically and horizontally center a DIV?

    How to set a menu as selected while selecting its subchild

    How to identify device to make separate css for iPad and Galaxy Tab?

    How to Convert this Inline CSS to External CSS using just a single class?

    How to hook up CSS search bar to JavaScript or another server side language

    How I can change the CSS properties of HTML elements in run time using JavaScript or PHP?

    How to apply gradient to element with correctly display in IE9?

    How to give style (image) for browse button in CSS?

    How to create HTML/CSS menu 100% width where text goes to the edges?

    How to neutralize CSS definitions without overriding

    how to make css submenu stay put when subpage has been selected

    Give a box an ID, once clicked shows alert of that ID?

    How to make string comparison exactly

    How to make transparent arrow? [duplicate]

    how to make background fit on screen bootstrap3

    How do I pick an image from a set of images on my Ajax form?

    How is this put in the center using CSS?

    How can I add a css element change to an onlick event in this jquery lib?

    How can I force CQ5.5 to ignore CSS data-uri-schemes?

    How to change the media attribute of a css file with plain JS

    How to achieve a fancy outline around an image in CSS

    How do I get a bold version of a custom font?

    How to make this series of rules into a mixin?

    How to create tabs using Javascript and Jquery

    How to position boxes like a posterboard with CSS?