Поле ввода диалога CKEditor над элементами вкладки

Question

Я строю простой диалоговый плагин, чтобы заменить инструмент ссылки по умолчанию. Конструкция требует определенной компоновки, которую трудно достичь с помощью определения диалога CKEdit: мы хотим, чтобы над диалоговыми элементами вкладки в диалоге отображалось одно поле (см. Рисунок).

Кто-нибудь может предложить способ, которым это может быть реализовано? Спасибо!

Answer 1

Насколько я могу судить, это невозможно сделать с помощью встроенного диалогового определения .

Я смог обойти это ограничение, построив свой диалоговый плагин с помощью плагина iframedialog . Это в основном вызывает диалоговое окно CKEditor и загружает в него внешний URL. В этом iframe вы можете делать все, что угодно, а затем возвращать текст в CKEditor, когда пользователь нажимает кнопку OK.

Простой пример:

// plugins/iframelink/plugin.js
CKEDITOR.plugins.add('iframelink', {
    requires: ['iframedialog'], 

    init: function(editor){
        CKEDITOR.dialog.addIframe('iframelinkDialog', 
            // title
            'Insert a Link', 
            // src
            this.path + 'dialogs/link.html',
            // minWidth
            500, 
            // minHeight
            250, 
            // onContentLoad
          );
        var cmd = editor.addCommand('iframelink', {exec: iframelinkOnclick});
        editor.ui.addButton('iframelink', {
            label: 'Insert a Link (Special Link Tool)',
            command: 'iframelink', 
            icon: this.path + 'images/world_link.png'
        });

    }
}); 

function iframelinkOnclick(editor){
    dialog = editor.openDialog('msiteslinkDialog');
};

// plugins/iframelink/dialogs/iframelink.js
$(function() {
  if (typeof(window.parent.CKEDITOR) != 'undefined') {
      CKEDITOR = window.parent.CKEDITOR;
      var dialog = CKEDITOR.dialog.getCurrent();
      var editor = dialog.getParentEditor();

      // Get value of the selected text: 
      var selection = editor.getSelection().getSelectedText();

      // Do something when the user presses the OK button: 
      var okListener = function(ev) {
          link = yourFunctionToDoSomethingClever();
          this._.editor.insertHtml(link);
          dialog.removeListener("ok", okListener);
      };
      // Bind the OK button to your okListener method: 
      dialog.on("ok", okListener);
  };
}

Таким образом, вы можете заставить диалог выглядеть так, как вам хочется: