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

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.

Answer 2

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 3

See this posting:

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 4

Sometimes when I need to set some styles to the CKEditor on the fly, for example depending on user settings, I use setStyle() and setStyles() functions on the editor's body object. Sample code:

var editor = CKEDITOR.instances.editor1;
var size = ... // assign size value
editor.document.getBody().setStyle('font-size',size);

Another sample:

var editor = CKEDITOR.instances.editor1;
var styles = {
    "font-family": "Arial",
    "color": "#333"
};
editor.document.getBody().setStyles(styles);

Answer 5

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 6

If you change content.css file you may discover that it's been cached. It's not a trivial task to refresh it in your browser since CKEDITOR.timestamp is added only to js files. I came up with the following solution:

// force to update all plugin files and styles
CKEDITOR.timestamp = '25062014';
CKEDITOR.config.contentsCss = CKEDITOR.config.contentsCss + '?' + CKEDITOR.timestamp;