Replace Image Upload Tab with IFrame

I would like to replace the image upload tab with my own iframe.

I know I need to edit the /plugins/image/dialogs/image.js file but not sure how. It currently has

            {
               id : 'Upload',
               hidden : true,
               filebrowser : 'uploadButton',
               label : editor.lang.image.upload, 
               elements :
               [
                  {
                     type : 'file',
                     id : 'upload',
                     label : editor.lang.image.btnUpload,
                     style: 'height:40px',
                     size : 38
                  },
                  {
                     type : 'fileButton',
                     id : 'uploadButton',
                     filebrowser : 'info:txtUrl',
                     label : editor.lang.image.btnUpload,
                     'for' : [ 'Upload', 'upload' ]
                  }
               ]
            },

how do I change this to use my own iframe preferably using the setting I have defined in filebrowserImageUploadUrl instead of posting to that URL use the URL as the upload page?

I have been trying the below two snipits without success

elements :
[
  {
    type : 'iframe',
    src : 'http://ckeditor.com',
    width : width,
    height : CKEDITOR.env.ie ? height - 10 : height ,
    onContentLoad : function()
    {
    }
  }
]

                           
                           
                           
elements :
[
  {
    type : 'hbox',
    widths : [ '100%' ],
    children :
    [
      {
         type : 'html',
         id : 'pageLinkSelect',
         label : 'Page Links',
         style : 'width : 100%;',
         html : '<iframe src="http://ckeditor.com" frameborder="0" name="iframePageLinks" id="iframePageLinks" allowtransparency="1" style="width:100%;margin:0;padding:0;"></iframe>'
      }
    ]
  }
]

Tue, 01/05/2010 - 04:17

dke01

Joined: 04/01/2010

Posts: 6

Re: Replace Image Upload Tab with IFrame

I now have it working but its a dirty hack, there must be a better way than what I am doing below.
The issue I am getting is when I delete the existing two elements (upload, uploadButton) a JavaScript error is thrown as soon as I click the image icon as some other code is expecting these Items to be there so I just hide them.

elements :
               [
                  {
                     type : 'vbox',
                     height : '250px',
                     children :
                     [
                        {
                           type : 'html',
                           style : 'width : 100%;',
                           html : '<iframe src="myURL.html" frameborder="0" name="iframePageLinks" id="iframePageLinks" allowtransparency="1" style="width:100%;margin:0;padding:0;"></iframe>'
                        }
                     ]
                  },
                  {
                     type : 'file',
                     id : 'upload',
                     hidden : true,
                     label : editor.lang.image.btnUpload,
                     style: 'height:40px',
                     size : 38
                  },
                  {
                     type : 'fileButton',
                     id : 'uploadButton',
                     hidden : true,
                     style : 'display:none;',
                     filebrowser : 'info:txtUrl',
                     label : editor.lang.image.btnUpload,
                     'for' : [ 'Upload', 'upload' ]
                  }
               ]