Question

I found the following answer when looking for code to navigate the editors text area elements.. The code works, the onlyu problem is i dont understand why..

var documentWrapper = editorname.document; //replace by your CKEDitor instance ID 
var documentNode = documentWrapper.$; // or documentWrapper['$'] ; 

The answer was got from the folloing stackOverflow link :

ckeditor scrollIntoView to a div element within the editor

In particular could someone explain to me the syntax documentWrapper.$;

Ive no idea what this means??

Thanks

Answer 1

@oggiemc

The “$” represents the actual DOM object that the CKEDITOR class object is pointing to.
In this case you’re working with the “CKEDITOR.dom.document” class. Find the documentaion here:
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dom.document.html

Your object named “documentWrapper” is a CKEDITOR object. It would have any properties described in the CKEDITOR API docs for that class object. You would also use CKEDITOR methods on it.

When you work with “documentWrapper.$”, you’re working with a DOM object that’s described in the Document Object Model Specifications. See Specs here:
http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/

This object will have the properties described for this object type in the DOM specs. You wouldn’t use CKEDITOR methods on this object, you would use the methods described in the DOM specs for this object type.

So the “$” is a generic representaion of whichever DOM object (document, head, body, div, span, p, etc.) the CKEDITOR class object is pointing to.

documentWrapper.someFunction(); would use a CKEDITOR method on a CKEDITOR class object.
documentWrapper.$.someFunction(); would use a DOM method on a DOM object.

Joe