Ckeditor 选项卡元素上方的编辑器对话框输入字段

Ckeditor 选项卡元素上方的编辑器对话框输入字段,ckeditor,Ckeditor,我正在构建一个简单的对话框插件来替换默认的链接工具。这种设计需要一种特定的布局,而使用CKEdit对话框定义很难实现这种布局:我们希望在对话框中的选项卡元素上方显示一个字段(见图) 有人能提出一种可能实现这一点的方法吗?谢谢 据我所知,使用 我可以通过使用构建对话框插件来绕过这个限制。这基本上会弹出一个CKEditor对话框窗口,并将一个外部URL加载到其中。您可以在该iframe中执行任何操作,然后在用户按下OK按钮时将文本返回到CKEditor 一个简单的例子: // plugins/ifr

我正在构建一个简单的对话框插件来替换默认的链接工具。这种设计需要一种特定的布局,而使用CKEdit对话框定义很难实现这种布局:我们希望在对话框中的选项卡元素上方显示一个字段(见图)

有人能提出一种可能实现这一点的方法吗?谢谢


据我所知,使用

我可以通过使用构建对话框插件来绕过这个限制。这基本上会弹出一个CKEditor对话框窗口,并将一个外部URL加载到其中。您可以在该iframe中执行任何操作,然后在用户按下OK按钮时将文本返回到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);
  };
}
因此,您可以使对话框以任何方式显示:

您是否成功,我正在尝试您的示例,但遇到了一个错误。