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

Answer 1

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 2

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

Answer 3

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 4

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 5

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

Answer 6

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.