javascript - 在CKEditor对话框中动态添加UI元素

Question

我试图触发回调，以便在打开对话框时用复选框动态填充 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

Answer 1

基于this example ，我最终得到了这个解决方案，其中“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,
        });
      }
    });
  }
});