How to make CKEditor render text with a CSS ?

Question

I have a CKEditor used to edit a text in a web-page.

In the web-page, the text renders in its context and therefore follows the page CSS formatting.

My question is how to tell CKEditor to apply a CSS style-sheet to the editor rendering ? Without of course changing the generated source ?

My code :

<textarea class="ActuContent" name="actu-content" cols="100" rows="20">my content></textarea>
<script type="text/javascript">
        window.onload = function()
        {
                CKEDITOR.replace( 'actu-content' );
        };
</script>

and my CSS :

.ActuContent{
    padding:10px 10px 10px 10px;
    color:#416a8b;
    font-size:1.6em;
}

And my CKEditor Config.js file only contains the toolbar config.

CKeditor does not apply the settings of ".ActuContent" to its rendering ...

Answer 1

CKEditor uses a DIV with normal HTML elements to represent the text you're editing. Just have a look at the content of this DIV and write a appropriate style sheet.

Of course, this only works if you don't modify the output of CKEditor before you render it.

Answer 2

See this posting:

http://stackoverflow.com/questions/1844569/ckeditor-class-or-id-for-editor-body

The solution posted by nemisj will set the class name onto the body of the editor's editable area.

You can do this in an editor onload function. Call this before you call .replace.

CKEDITOR.on( 'instanceReady', function( ev )
     {
         CKEDITOR.instances.e1.document.$.body.className = "foo";
     });

Answer 3

I found a very easy way to answer my question :

the content.css file in CKEditor directory !

I only had to put in the style I wanted to be applied inside the Editor :

body {
    color: #416a8b;
    font-family: Arial;
    font-size: 18px;
    font-weight: 400;
   text-align: left;
}

That's all :-)

Answer 4

The actual best answer to this question would be:

CKEDITOR.config.contentsCss = '/mycustom.css'; CKEDITOR.replace('myfield');

Because you probably would like to have different styles in different editors. If you change the main content.css like Jalil did, you would not be able to do that.

Regards, Rene