Question

I’m building a simple dialog plugin to replace the default link tool. The design calls for a particular layout that is difficult to achieve with the CKEdit dialog definition: We want a single field to appear above the tab elements in the dialog (see illustration).

Can anyone suggest a way that this might be implemented? Thanks!

Answer 1

As far as I can tell it is not possible to achieve this using the built-in dialog definition.

I was able to get around this limitation by building my dialog plugin using the iframedialog plugin. This basically pops up a CKEditor dialog window and loads an external URL into it. You can do anything you want in that iframe, and then return the text to CKEditor when the user presses the OK button.

A simple example:

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

So you can make the dialog look any way you want: