Image Browser and Image Upload

Using the CK editor for some time there is one thing that is really ugly about it. Using an Image Browser is not only clumsy but ugly as it introduces a completely out of character popup window.

I modified the CK editor plugin/filebrowser/plugin.js by adding this code;

if (typeof editor.mappro === 'object'){
       var q = new BrowseImagesDialog(editor.mappro.options.args, editor, params.CKEditorFuncNum);
 } else{
      // TODO: V4: Remove backward compatibility (#8163).
      editor.popup(url, width, height, editor.config.filebrowserWindowFeatures || editor.config.fileBrowserWindowFeatures);
 }

The “editor.mappro” was set when instantiating the CK editor and that provides tie back to my dialog with the CK editor. Node the editor instance is not used by my image browser but it could prove useful.

      var editor = dialog.find('.ibs-file-desc').ckeditor().editor;
      editor.mappro = mappro;

That is the basics of the CK editor modifications and use. The BrowseImagesDialog is straight forward;

          Insert: function () {
                    var url = dialog.find('.ibs-image-preview').attr('src');
                    CKEDITOR.tools.callFunction(func, url);
                    dialog.dialog('close');
          },

A note on z-index; CK editor uses a z-index of 10000 on the modal window cover and 100010 for the image dialog. I used an z-index of 10050 to uncover my dialog on pop up.