选项卡元素上方的CKEditor对话框输入字段

Question

我正在构建一个简单的对话框插件来替换默认的链接工具。该设计需要使用CKEdit对话框定义难以实现的特定布局：我们希望单个字段显示在对话框中的选项卡元素上方（请参见图示）。

有人可以提出一种方法可以实施吗？谢谢！

Answer 1

据我所知，使用built-in dialog definition无法实现此目的。

通过使用iframedialog plugin构建对话框插件，我能够克服此限制。这基本上弹出一个CKEditor对话框窗口并加载一个外部URL。您可以在该iframe中执行任何操作，然后在用户按下“确定”按钮时将文本返回到CKEditor。

一个简单的例子：

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

因此，您可以按任意方式显示对话框：