Custom File Browser -setting input values when file selected

I've managed to link up my own custom file browser. I want to be able to set the value of the Protocol when inserting a link and also want to insert the width, height and border when inserting an image.

Here is the code I used for FCKEditor. It worked a treat:

if (type == 'image') {
   window.opener.SetUrl(filename, width, height, '');
   if (window.opener.document.getElementById('txtBorder'))
      window.opener.document.getElementById('txtBorder').value = 0;
   window.close();
} else {
   window.opener.SetUrl(filename) ;
   if (window.opener.document.getElementById('cmbLinkProtocol'))
      window.opener.document.getElementById('cmbLinkProtocol').value = '';
   window.close();
}

The new CKEditor doesn't seem as simple... With my limited knowledge of the new CKEditor, this is what I came up with:

if (type == 'i') {
   window.opener.CKEDITOR.tools.callFunction( CKEditorFuncNum, filename );
   if (window.opener.document.getElementById('319_textInput')) // set width
      window.opener.document.getElementById('319_textInput').value = width;
   if (window.opener.document.getElementById('325_textInput')) // set height
      window.opener.document.getElementById('325_textInput').value = height;
   if (window.opener.document.getElementById('334_textInput')) // set border to 0
      window.opener.document.getElementById('334_textInput').value = 0;
   window.close();
} else {
   window.opener.CKEDITOR.tools.callFunction( CKEditorFuncNum, filename );
   if (window.opener.document.getElementById('91_uiElement')) // set protocol to other
      window.opener.document.getElementById('91_uiElement').value = '';
   window.close();
}

The window.opener.CKEDITOR.tools.callFunction( CKEditorFuncNum, filename ); part works fine but the updating of the other elements doesn't work.

I simply loaded the editor and then used FireBug to determine the ID's of each of the input fields I wanted to update as you can see above. However, the input ID's seem to change every time the page reloads!

Any idea how I can get a lock on the other input fields or is there some special code I need to use to update those elements?

Appreciate your help!

Tue, 05/25/2010 - 22:22

wilco

Joined: 25/05/2010

Posts: 1

Re: Custom File Browser -setting input values when file sele

I just ran in to the same problem and could not find the answer anywhere.
There is an example in the documentation that explains how to set an image alt.
I modified that to make it work for the protocol.

window.opener.CKEDITOR.tools.callFunction( parent.use_CKEditorFuncNum, use, function() {
      var element, dialog = this.getDialog();
      // Check if it is an Image dialog.
      if (dialog.getName() == 'image') {
         // Get the reference to a text field that holds the "alt" attribute.
         element = dialog.getContentElement( 'info', 'txtAlt' );
         
         // Assign the new value.
         if ( element ) {
            element.setValue( 'bla' );
         }
      } else if ( dialog.getName() == 'link' ) {
         element = dialog.getContentElement ( 'info', 'protocol' );
         if ( element ) {
            element.setValue( '' );
         }
      }
   });

Fri, 08/06/2010 - 23:23

symbiant

Joined: 06/08/2010

Posts: 2

Re: Custom File Browser -setting input values when file sele

I've also used the same example code that wilco is referring to. This works great in FireFox but Internet Explorer seems to ignore the callback function for [data]. Has anyone else confirmed this or have a workaround?

Thanks.

Mon, 08/09/2010 - 17:15

symbiant

Joined: 06/08/2010

Posts: 2

Re: Custom File Browser -setting input values when file sele

I was able to set dialog element values outside of the callFunction callback with with this code:

var dialog = window.opener.CKEDITOR.dialog.getCurrent();
var docIdField = dialog.getContentElement( 'info', 'docid' );
docIdField.setValue( docid );

(docid being any element id in your dialog)