Makeing a filebrowser and uploader compatible with CKEditor?

Hi Daniel!

I had the same problem. It took me many hours to find out a solution.
I wrote my own ajax based filebrowser togeter with the jquery extension. Usualy I give my filebrowser-instance a selector and when I press the submit button I change the value of on input box. With ckeditor I found it's a lot more dificult, because I cannot just set the value of an input-field in a dialog in DOM. Also I don't want a pop up, instead I want a javascript-based dialog, like ckeditor uses by itself. But the ckeditor interface only supports pop-ups by default.
Here is what I did for the image-dialog to get it work:

var myeditor = CKEDITOR.appendTo( "myeditor", config );
CKEDITOR.on( "dialogDefinition", function( ev ) {
  // Take the dialog name and its definition from the event data.
  var dialogName = ev.data.name;
  var dialogDefinition = ev.data.definition;
  // Check if the definition is from the dialog we"re interested on (the "image" dialog).
  if ( dialogName == "image" ){
    // Get a reference to the "Link Info" tab.
    var infoTab = dialogDefinition.getContents( "info" );
    // Add a button to the "info" tab.
    infoTab.add({
      type : "button",
      label : myeditor.lang.common.browseServer,
      onClick : function() {
        var filename = CKEDITOR.dialog.getCurrent().getContentElement("info", "txtUrl").getValue();
        dlg("lib/dlg_filemanager.php", { returnval_selector_ckeditor: "txtUrl", file: filename }, "750px", false, true);
      }
    });
   }
});

On my filebrowser-submit event I do:

CKEDITOR.dialog.getCurrent().getContentElement("info", "'.$_GET['returnval_selector_ckeditor'].'").setValue(filename);

What I still don't know is how to position my custom button next to the URL-input field. What I was missing in the ckeditor api for this code...

CKEDITOR.replace( 'editor1',
    {
        filebrowserBrowseUrl : '/browser/browse.php',
        filebrowserUploadUrl : '/uploader/upload.php'
    });

...,is a possibility to write a function with the filename as returnval insteat of putting a url here.

I hope this helps you.

1. Enable "Browse" and "Upload" button in selection dialogs - http://docs.cksource.com/CKEditor_3.x/Developers_Guide/File_Browser_%28Uploader%29


2. How to return the URL of selected file to dialog - http://docs.cksource.com/CKEditor_3.x/Developers_Guide/File_Browser_%28Uploader%29/Custom_File_Browser

function select_object (url) {
   // If url is empty then exit
   if (!url) return false;
   var
      temp_array = window.location.search.substring(1).split('&'),
      params = {}
   ;
   // Get window search arguments as object
   for (var i = temp_array.length; i-- > 0;) {
      var tmp = temp_array[i].split('=');
      params[tmp[0]] = tmp[1];
   }
   if (params.CKEditorFuncNum) {
      // Call CKEditor function to insert the URL
      window.opener.CKEDITOR.tools.callFunction(params.CKEditorFuncNum, url);
      // Close Window
      window.close();
   }
}

I have been trying to figure out how to properly accept files sent from the upload tab to a seperate php file, From what I read in the documentation, the Post information sent should be for NewFile or upload, However I can't pickup anything on either ( I get a page, just no posted anything), I setup a simple .php file to watch for the posts, but nothing seems to come through..

if(isset($_POST['upload'])){
echo "upload was posted..";
}

am I completely wrong here? or what is it that im missing..

http://alfonsoml.blogspot.com/2009/12/u ... ditor.html