CKEditor how do I get a UIElement

Question

I need to have two select menus in a CKEditor dialog, with the second select menu changing its options according to the selected option of the first menu. Simple enough you would think! But in CKEditor it seems really difficult to obtain the DOM equivalent of the CKEditor object. I can access the CKEditor Object but not its DOM equivalent(s).

The instance of the CKEditor select (UIElement) object has some useful DOM interactions i.e. getElement() but I can only access this object with the special this keyword within an event method within a CKEditor select "class" definition.

How can I access the instance of the CKEditor UIElement object (in this case the select)? I only have the id of the CKEditor object, CKEditor for some frustrating reason decides to apply random ids to its DOM object equivalents.

The instance object I am trying to access is documented here: (No mention of how to obtain this instance though!) http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.dialog.select.html

score 1 · Answer 1 · edited Sep 06 '13 at 16:40

1

In fact the CKEDITOR.dialog.getCurrent() method will allow you to access the Dialog instance from any function, and from there you can access the UIElement instance of any CKEditor object you're after.

edited Sep 06 '13 at 16:40

Dave Clemmer

3,741
12
49
72

answered Sep 07 '11 at 01:54

Globalz

4,474
6
34
43

score 0 · Answer 2 · answered Sep 06 '11 at 06:19

Can you cache what you need in the setup callbacks during your dialog's initialization?

You can pass the setup functions an object and they could put what they need in there. So you'd pass an object into your setup stuff:

onShow: function() {
    //...
    this.cachedDomIds = { };
    this.setupContent(this.cachedDomIds);
    //...
}

And then in your setup:

setup: function(cache) {
    //...
    cache.some_dom_id = this.domId;
    //...
}

Then at least you'd have access to all the real DOM id attributes and you could getElementById() as needed.

Globalz · Answer 3 · 2011-09-09T03:18:37.143

0

Thanks for the suggestion mu is too short,

I found I could access the other select menus by using this method:

this.getDialog().getContentElement([insert_dialog_name_here], this.getValue()).getElement()

this.getValue will have the same id of the CKEditor UI element I'm after

edited Sep 09 '11 at 03:18

answered Sep 07 '11 at 01:18

Globalz

4,474
6
34
43

CKEditor how do I get a UIElement

3 Answers3