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 get the click position on a page when a css zoom is involved

    How to create a horizontal calendar with nested lists?

    How to handle CSS with meteor?

    How to make an interactive sidebar with jQuery and CSS3?

    How to change visibility of a div css to visible with jQuery

    CSS: How to use vmin unit in IE9?

    Height isn't showing up full on everything except Chrome

    how to fix closure compiler error on css({ float: 'left' }) [duplicate]

    How to center icons in div consistently? [duplicate]

    How to format CSS of a dropdown menu so if the 'parent' dropdown is current then the children will not take the formatting of the parent

    How to delete HTML Elements in an iFrame using JavaScript

    jQuery - How to get all styles/css (defined within internal/external document) with HTML of an element

    How to set height of my web page in html5

    SMACSS and BEM: How to position Module inside of a Module?

    How to achieve very slight text shadows in CSS?

    CSS: How to set hover effect on menu-item when submenu-item is displayed

    How to contain a scrollable div element completely within another?

    What is the best way to store css data inside database and call it similar to how a css file would be

    How to get two results with one button using CSS & Jquery

    How to enable CDN CSS in Brackets, Chrome?

    Fill dynamic
    's with content. But how to show it?

    How to use ­ and the CSS “hyphens” property together?

    How to target itemid=“” in CSS

    how to create bar code like in a horizontal line using css (For Email)

    How do I create a fallback for the HTML5 search cancel button in webkit?

    How to use 100% CSS background-image with scrolling content?

    How to make comment shape using css

    How to move hamburger menu to the front of overlay menu

    How to trigger css3 rotate effect by clicking?

    How to create triple div border in CSS