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;

友情链接