Динамически добавлять элементы интерфейса в CKEditor Dialog

Question

Я пытаюсь вызвать обратный вызов для динамического заполнения диалогового окна CKEditor с помощью флажков при открытии диалога. Я читал другие решения, которые используют iframes, но это не сработает для меня, потому что диалог должен быть заполнен на основе других элементов на одной странице.

Вот что у меня есть. Ошибок нет, но при его открытии диалог просто пуст. Я ожидаю, что функция 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, я закончил с этим решением, где «главным» является идентификатором исходного содержания.

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, 
     }); 
     } 
    }); 
    } 
});