Changing Contents of Upload Image Dialog

CKEditor uses custom javascript code for creating and displaying dialog boxes, to change the upload tab you will need to modify "/plugins/image/dialogs/image.js". If you look at line: 974 you will see the code that generates the "Upload" tab.

To insert an iframe have a quick look around the forum and you should be able to find a few instances where this has been done before. The docs are pretty much non-existent for this type of stuff so you'll have to delve in.

I'm currently working on a custom plugin that uses an iFrame so if I succeed I'll have to document what I did.

N.B. You may have to look in the "_sources" dir for the un-minified code.

jamesf wrote:I'm currently working on a custom plugin that uses an iFrame so if I succeed I'll have to document what I did.

I ended up modifying the link plugin, I'm using the editor in a CMS and wanted to select an internal page from a drop down list.

I first added an additional tab in /link/dialogs/link.js

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

My iFrame just contains a form select input with all the internal pages.

I had to do a bit of hard coding to get the value from the iFrame and I had to put this in the "validate" section of the "url". To get the value I used this code:

var pageLinksValue = '';
for (var i=0; i<window.frames.length; i++) {
   if(window.frames[i].name == 'iframePageLinks') {
      var selected = window.frames[i].document.getElementById("page_links");
      if(selected.length) {
         pageLinksValue = selected.value;
      }
   }
}

I've got it working ok but it took me quite a while, hope that helps.

Hey, just a question about where you put the second part of that code. Ive got to a point where i have an extra tab and i have a select with all my pages in it, but when i click on OK i get this JavaScript alert "Please type the link URL".

I haven't done the second part of the code as i don't quite understand where you put it. Any extra help as to where you put it to make it work would be a big help.

Yeah I was getting the same error and thats where the 2nd part of the code comes in. I had to modify the validation area of the URL so that if an option was selected from my IFrame it would be placed into the page URL.

The validation starts on line 349 of the link.js file and what the code does is loop through all the iframes in the editor to find my custom one with the specified id, find the form select with the specified id and get the selected value. I then set the value of the URL to the selected page in my Iframe, this should enable the page to validate and the URL to be inserted.

this.setValue(pageLinksValue);

Its a little complex and I don't think I've explained it very well. Let me know if you're still having problems.

jamesf wrote:I ended up modifying the link plugin...

Thank you for your help. I got it to work.