CKEditor: Class or ID for editor body

Question

I have an instance of CKEditor on a page. I am trying to give the CKEditor's body a class or ID so it matches some styles I have defined in a stylesheet.

There is a API documentation that should give access to the respective DOM elements, but I can't seem to get it working. All objects I try to query that way turn out undefined.

Does anybody know how to do this, or how to properly address CKEditor's dom elements?

Edit: Thanks folks, nemisj's answer did it for me but for some reason, I don't get to set the "accepted" checkmark in this question.

Answer 1

Although that part of the API wasn't ported from 2.x at the time that this question was placed, now it's easier to use the bodyId and bodyClass config options.

Of course, the explanation by nemisj is good and can be useful for other things, but you must remember that each time that you switch away from design (to source view), the iframe is destroyed, so you'll need to reassign your attributes if you do it manually.

Answer 2

If you are talking about CKEditor( version 3), then there is a possibility to get any DOM instance inside the editor itself. Every CKEditor instance has reference to it's document via "document" property.

var documentWrapper = edit.document; 

This reference represent some public wrapper for all CKEditor nodes, but it also has the direct reference to its node. You can retrieve by getting ["$"] property.

var documentNode = documentWrapper.$; // or documentWrapper['$'] ;

documentNode will represent the DOM instance of the document node inside the iframe. After you have the DOM instance, you can do whatever you want to do with DOM structure, Append, remove, replace classes, rebuild, etc. For example

documentNode.body.className = "zork";

I hope this should be enough.

Answer 3

I had the same problem today in trying to set the bodyClass like this:

CKEDITOR.replace( 'editor1', { fullPage : true, bodyClass : 'myClass'

});

What I found is that in this version (3.3.1), if you set fullpage = true, setting the bodyId or bodyClass does not work, but if you set fullPage = false, it does work.

Hope this helps.

Answer 4

From the Manual:

<static> {String|Array} CKEDITOR.config.contentsCss

The CSS file(s) to be used to apply style to the contents. It should reflect the CSS used in the final pages where the contents are to be used.

config.contentsCss = '/css/mysitestyles.css';
config.contentsCss = ['/css/mysitestyles.css', '/css/anotherfile.css'];

Default Value:

<CKEditor folder>/contents.css

Answer 5

Don't know that editor, but as they all work the same way, you probably can't access the DOM elements created by the instance because they are created after the page has finished loading, and the DOM is ready as well. So, any new DOM elements added after that, theorically will not exist.

Still, you can try TinyMCE editor, wich has a "partnership" with jQuery javascript library to manipulate all you want, and the editor itself is pretty easy to change in almost every way.

Answer 6

Your queries may return undefined because the editor instances are placed inside an iFrame and your query is not looking there?

Answer 7

In config.js, write this code

config.bodyId = 'contents_id';

then you see body id in Ckeditor but when you want to access this id please use

$('#parent_id').find('iframe').contents().find('#within_iframe')

there $('#parent_id') means form_id or any parent which is simply way to access iframe. follow this code to access element in iframe