Question

I’m having a tough time figuring out what I must do to access certain UI Elements in the CKEditor in a plugin I am modifying.

Essentially I am adding internal links to their link dialog where links I split up between sections and publications. When a user picks a section from a select drop down the publications from that section are populated in a different drop down.

The following code is being modified from the link.js file in the plugin folder. I cut out all the unnecessary bits and left out what I thought was relevant. As you can see in the code below I am defining a select dropdown with the id of ‘section’ followed by the ‘item’ dropdown. How do I access the ‘item’ dropdown, to populate it, in the onChange function of the section dropdown?

I have my ajax code all figured out and working if I hardcode the IDs that end up getting populated in the ID tag on runtime but this changes from editor to editor so I can’t rely on hardcoded values.

{
 type :  'vbox',
 id : 'internalOptions',
 children :
 [
  {
   id : 'section',
   type : 'select',
   items :
   [
   ],
   setup : function( data )
   {
    //populate sections here
   },
   onChange : function (data)
   {
    //populate items here
   },
  },
  {
   id : 'item',
   type : 'select',
   items :
   [
   ],
   setup : function( data )
   {
   },
  }

 ]
}

EDIT: The problem I have is that the CKEditor will change every ID so they are unqiue. Though I name the dropdown “section” CKEditor calls it 176_section but it isn’t always the same INT hence why I need to figure out how to grab it during the setup phase.

Answer 1

If you want to get the DOM object of an element in a CKEditor dialog you can use getElement on the CKEditor element.

And to get the CKEditor element, use getContentElement on the dialog