Javascript 在“编辑器”对话框中动态添加UI元素

Javascript 在“编辑器”对话框中动态添加UI元素,javascript,ckeditor,Javascript,Ckeditor,我试图触发一个回调,以便在打开一个CKEditor对话框时用复选框动态填充该对话框。我读过其他使用iframe的解决方案,但这对我来说不起作用,因为对话框需要基于同一页面上的其他元素填充 这是我到目前为止所拥有的。没有错误,但对话框打开时为空。我希望addContents函数填充对话框。我已经确认,dialog.definition.contents确实包含了我想要的内容和元素,但它并没有填充到实际的对话框中。我错过了什么 (function() { CKEDITOR.plugins.a

我试图触发一个回调,以便在打开一个CKEditor对话框时用复选框动态填充该对话框。我读过其他使用iframe的解决方案,但这对我来说不起作用,因为对话框需要基于同一页面上的其他元素填充

这是我到目前为止所拥有的。没有错误,但对话框打开时为空。我希望
addContents
函数填充对话框。我已经确认,
dialog.definition.contents
确实包含了我想要的内容和元素,但它并没有填充到实际的对话框中。我错过了什么

(function() {
    CKEDITOR.plugins.add( 'embeds', {
      icons: 'embed',
      init: function(editor) {
        var self = this,
            elements = [];


        CKEDITOR.dialog.add('EmbedsDialog', function (instance) {
          return {
            title : 'Embeds',
            minWidth : 550,
            minHeight : 200,

            contents: [],

            onShow: function() {
              var dialog = this,
                  elements = [];

              $('#embeds-fields tr').each(function() {
                var title = $(this).find('input[type=text]').val(),
                    url   = $(this).find('input[type=url]').val();

                if(url != "") {
                  elements.push({
                    label : "embed",
                    title : url,
                    type : 'checkbox'
                  });
                }
              });

              dialog.definition.removeContents('embeds');

              dialog.definition.addContents({
                id : 'embeds',
                expand : true,
                elements : elements
              });
            },
          }; // return
        });

        editor.addCommand('Embeds',
          new CKEDITOR.dialogCommand('EmbedsDialog', {
            allowedContent: 'a[*](*)'
          })
        );

        editor.ui.addButton('Embeds', {
          label     : 'Embeds',
          command   : 'Embeds',
          toolbar   : 'embeds'
        });
      } // init
    }); // add
})(); // closure
基于的,我最终得到了这个解决方案,其中“main”是原始内容的ID

CKEDITOR.on('dialogDefinition', function(ev) {
  var dialogName = ev.data.name;
  var dialogDefinition = ev.data.definition;

  if (dialogName == 'EmbedsDialog') {
    var main = dialogDefinition.getContents('main');

    $('#embeds-fields tr').each(function() {
      var title = $(this).find('input[type=text]').val(),
          url   = $(this).find('input[type=url]').val();

      if(url != "") {
        main.add({
          type : 'checkbox',
          label : title,
        });
      }
    });
  }
});