How to set css class to div area of ckeditor

Question

I am using ckeditor and divarea plugin so that I can use ckeditor in div not in iframe.

So the ckeditor can inherit the page's css style.

Now I want set the style of ckeditor's content.

One solution is like this:

.cke_contents h1 {
    font-size: 32px;
    /* custom styles */
}
.cke_contents p {
    font-size: 12px;
    /* custom styles */
}

I'm afraid this may cause other issues. So what I'm thinking is to set a class name so that I can set custom styles freely. like this:

<textarea id="ckeTextblock"></textarea>

<script>
    CKEDITOR.replace("ckeTextblock", {
    extraPlugins: 'divarea',
    bodyClass: 'customClassName'
})
</script>

.customClassName h1 {
    font-size: 32px;
    /* custom styles */
}
.customClassName p {
    font-size: 12px;
    /* custom styles */
}

That I have tried the "bodyClass" config, but it not worked in divarea.

Anyone has any idea? Thanks!

Thank you, I think this is for iframe way to set the styles. I'm not sure it works for divarea way. — wind13

wind13 wind13 · Accepted Answer · 2014-08-06T08:51:05

Finally, because use divarea, the ckeditor inherit the page's css, so I use this css override like this in my page's scss:

#cke_richTextArea .cke_wysiwyg_div {
   padding: 15px;
   h1 {
       // custom it.
   }
   p {
       // custom it.
   }
}

And another thing about the ckeditor "Format" drop down menu style(like h1, p etc.), I can copy and custom a new skin and modify the editor.css and editor_*.css is okay.

How to set css class to div area of ckeditor

1 Answers