21

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 ...

Jalil
  • 3,150
  • 3
  • 30
  • 39

6 Answers6

38

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.

Community
  • 1
  • 1
Rene
  • 396
  • 4
  • 3
  • 5
    Note you can also use multiple stylesheets by passing an array: `CKEDITOR.config.contentsCss = ['/1.css', '/2.css'];` – fny Sep 23 '13 at 14:10
  • 1
    Hello Rene,What is `myfield`? in your case. – tree em Dec 12 '13 at 09:05
  • myfield is the id of the textarea or div where the editor will be placed by replacing that content – Csaba Toth Nov 26 '14 at 09:13
  • 1
    This doesn't work for me. I specify a css, but when I inspect the editor iframe, it still pulls in the original contents.css :P – Csaba Toth Nov 26 '14 at 09:14
9

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 :-)

Jalil
  • 3,150
  • 3
  • 30
  • 39
  • 1
    if you use asp.net server side control you must explicitly address this in code behind or CKEditor:CKEditorControl markup like this ckeditor.ContentsCss = "/fckeditor/contents.css"; – Iman Jan 11 '15 at 06:23
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";
     });
Community
  • 1
  • 1
MustStayAnonymous
  • 1
  • 1
2

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);
Alexander Poleschuk
  • 892
  • 12
  • 22
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.

Aaron Digulla
  • 321,842
  • 108
  • 597
  • 820
  • I don't understand how to apply like you said. I update my question to put some code in it ... – Jalil Dec 11 '09 at 09:50
  • Edited my question to put some code. Can you explain your idea ? – Jalil Dec 11 '09 at 09:53
  • In fact, I don't understand how you "have a look at the content of this `DIV` ? – Jalil Dec 11 '09 at 09:54
  • In the HTML that your browser displays, there is a DIV in the place where your `textarea` was. Use the debug tools of your browser to have a look inside of it. http://stackoverflow.com/questions/1887216/which-tools-do-you-use-to-debug-html-js-in-your-browser/1887218#1887218 – Aaron Digulla Dec 11 '09 at 10:38
  • You're right ... I can see that my textarea is made invisible and replace my some CKEditor HTML code ... But the content seems to be in an iframe : Any idea where I can "follow up" this ? – Jalil Dec 11 '09 at 11:11
  • Hm... CHEditor has a method to get the text as HTML. Try http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#getData – Aaron Digulla Dec 11 '09 at 11:30
  • I can see that. But I'm sorry but I still don't see how I can use this to solve my problem ? Could you post some piece of demo code ? – Jalil Dec 11 '09 at 11:50
  • When you know which elements CKEditor uses, you can style them. I don't have demo code. But you should also be able to see the contents of the editor somewhere on your server when you "save" it. – Aaron Digulla Dec 11 '09 at 12:55
  • No, the content I "save" only contains the basic HTML (and that's what I want it to do). – Jalil Dec 11 '09 at 18:02
  • That's what CKEditor uses. You must style this basic HTML. Use the ID of the container to select the content of the editor in your CSS. – Aaron Digulla Dec 12 '09 at 12:42
0

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;
Sergey Payu
  • 286
  • 2
  • 5