如何从嵌套在对话框中的iframe中的ckeditor中获取所选元素

Question

I'm building a CKEditor 3 plugin that builds <dl> tables. Using the iframedialog plugin, I created an IFrame inside the ckeditor dialog box that pops up. I am able to create the <dl> tables with any number of <dt>/<dd> elements and edit them. However, this works for only one <dl> table, as when I have more than one, I am unable to find which one is selected, each have their own unique id.

I am able to access the selected <dl> table inside the plugin.js file. It is retrieved as follows, using a var declared

onShow: function () {
                var sel = editor.getSelection(),
                    element = sel.getStartElement();

                selectedDL = element.getAscendant('dl', true);
                if (selectedDL) {
                    alert(selectedAccordion.getAttribute('id'));
                }
            },

I cannot figure out how to get the id of the selected DT inside the dialog iframe however. I based my plugin solution on the following link:

CKEditor 3.x - Dynamically add UI elements to plugin dialog

Answer 1

My usual solution is to dynamically generate IDs via counter on page load and append them to the tag using DOM manipulation. You can then push them to an array and either address them via array index or you can address them by unique ID by itself.

var counter=1;
var dlarray = [];

$( "dl" ).each(function( index ) {
  var idname = "element" + counter.toString;
  $(this).attr('id', 'idname');
  dlarray.push(this);
  counter++;
});