ckeditor javascript document wrapper

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 开发者_C百科= 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

@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

Difference between editor passed as argument to plugins/dialogs and editor returned by getParentEditor().

They would usually be the same object. But if you have multiple editor instances on one page, you need to use getParentEditor to make sure you're working with the correct editor instance.

Especially if multiple editors are sharing one toobar: How Do I Get Multiple CKEditor Instances to Share the Same Toolbar? http://docs.cksource.com/CKEditor_3.x/Howto/Shared_Toolbar

You can take a look at the code for dialog radio buttons in the CKEditor directory: ckeditor\_source\plugins\forms\dialogs\radio.js

Or on the docs site: http://docs.cksource.com/ckeditor_api/symbols/src/plugins_forms_dialogs_radio.js.html

When the plugin is loaded it uses the active editor instance to load the text for the title and labels because they will be the same for all the instances sharing the toolbar:

ckeditor_source\plugins\forms\dialogs\radio.js(5): CKEDITOR.dialog.add( 'radio', function( editor )

(42) label : editor.lang.checkboxAndRadio.radioTitle, (43) title : editor.lang.checkboxAndRadio.radioTitle,

But for the methods used in the dialog, it uses getParentEditor(), so that the actions will be performed on the correct editor instance: ckeditor_source\plugins\forms\dialogs\radio.js(30): editor = this.getParentEditor();

(22) onOk : function() ........ editor = this.getParentEditor();

Joe