Custom filebrowser callbacks in CKEditor 3.0

This post was written on 2009/09/09 at 18:43:21 by Horst Gutmann

Last weekend I started playing around a little bit with the recently released CKEditor 3.0. I had wanted to have a WYSIWYG editor for my blog for quite a while now but was always either too lazy in general or just too lazy to write a custom uploader.  Last weekend was perfect for something like that, though, since I didn't receive a book and a DVD-box I had originally planed to spend the whole weekend on ;-)

The first part was naturally easy: Downloading it, placing all the right JS and CSS files on the server and writing some small JavaScript-embed code so that I can dynamically switch from Markdown and ReST (which I use normally for writing posts here) to HTML which automatically should then load the editor.

Then came the part I never found the motivation for before: Writing about 50 lines of code and about 200 lines of HTML and CSS to get the custom file uploader and browser to work. This part was also quite simple for CKEditor at first, but then reached a hurdle: What are the callback functions that actually tell the original upload dialog the URL of the file? The only official documentation I could find was about FCKEditor which used something like window.opener.SetUrl(yourUrl) when you select a file from the browser and probably a similar function when confirming the upload. Well, this doesn't work anymore with CKEditor 3.0.

The new version has a real callback system where the caller actually can determine the callback code. So the link that opens for instance the filebrowser or the upload-form's action includes an additional numeric parameter called "CKEditorFuncNum" that tells the callee a parameter to be used for window.opener.CKEDITOR.tools.callFunction.

So all you have to do from the file browser when you have a file selected is to call this code with the right callback number (normally 1) and the URL of the selected file:

window.opener.CKEDITOR.tools.callFunction(CKEditorFuncNum, url);

For the quick-uploader the process is quite similar. At first I thought that the editor might be listening for a 200 HTTP return code and perhaps look into some header field or something like that to determine the location of the uploaded file, but then - through some Firebug monitoring - I noticed that all that happens after an upload is the following code:

<script type="text/javascript">
  window.parent.CKEDITOR.tools.callFunction(CKEditorFuncNum, 
    url, errorMessage);
</script>

If the upload failed, set the errorMessage to some non-zero-length string and empty the url, and vice versa on success.

Something like this could perhaps be a little bit better documented :-)

Comments:

  • Tinus (Guest)

    Thanks for posting this. Saved me some time.

    Sept. 23, 2009, 3:36 p.m.

  • wani (Guest)

    Hello,I am a student from Taiwan. I am now preparing for my graduate project. I want to customize a file browser page so I can select a photo from my album and insert the url in the ckeditor. I met lots of problem because my javascript is not good. So could you send your code to my E-mail? I would like to know how the code goes. Thank you very much!

    Sept. 26, 2009, 6:31 p.m.

  • wani (Guest)

    By the way, my e-mail address is wani420@gmail.com

    Sept. 26, 2009, 6:33 p.m.

  • wani (Guest)

    By the way, my e-mail address is wani420@gmal.com

    Sept. 26, 2009, 6:35 p.m.

  • zerok

    wani: Where exactly do you have a problem? Do you perhaps have your code on some paste-site (like dpaste.com)?

    Sept. 26, 2009, 7:16 p.m.

  • greg (Guest)

    Thank's alot! Official documentation is far from being complete. I managed to get it working!

    Sept. 28, 2009, 10:45 p.m.

  • Don JOnes (Guest)

    Amazingly helpful - except I'm a bit confused on how you got the Quick-uploader to work.

    What exactly are you having your server output? The entire (script) block you listed above (with parameters filled in, of course), or are you just sending JavaScript that sets url and errorMessage, and CKEditor's own code is calling the callback function?

    Right now I'm doing the former:

    $output = '[HTML_REMOVED]CKEDITOR.tools.callFunction('.$callback.', "'.$url.'","'.$msg.'");[HTML_REMOVED]';

    echo $output;

    Without much success.

    Sept. 30, 2009, 4:42 p.m.

  • Don Jones (Guest)

    Aha - figured it. You do output the entire (script) block. I was forgetting the key parent window reference - it goes into CkEditor as an IFrame. Again, thanks - that one little piece of this whole puzzle was so frustrating.

    Sept. 30, 2009, 4:52 p.m.

  • Horst (Guest)

    The former should be the right now :-/ So all I do is let my upload-handler output that whole script-block. In your sample the "window.opener" is missing, though. Perhaps that's causing the problem :-)

    Sept. 30, 2009, 4:57 p.m.

  • Erik Oberhausen (Guest)

    Thanks very much. Also, was having problems with the super minimal documentation regarding this. Your post was very helpful.

    Oct. 1, 2009, 9:34 p.m.

  • Frank Zechert (Guest)

    Thanks a lot for this little introduction. I missed the window.opener for more than 3 hours now. Found my fault thanks to you :)

    Oct. 3, 2009, 7:25 p.m.

  • Philippe (Guest)

    Thanks for the post, this saved me a lot of time.

    Oct. 5, 2009, 4:24 p.m.

  • vvb (Guest)

    Thanks. You and Google helped me :)

    Oct. 6, 2009, 12:19 p.m.

  • Davi Ferreira (Guest)

    Thanks for this! Saved me some effort :)

    Oct. 20, 2009, 11:10 p.m.

  • Robert (Guest)

    I'm not a jQuery/Javascript expert, so please give me a hand with this...pls

    i have the file url on a js variable named obj.selectedFile, so, how do i send it back to ckEditor ? i mean the selected file

    this is what i have in a js file (example, of course)

    jsFileBrowser.js

    var obj={

    // js Property to store current selected file selectedFile: 'path-of-file/sub-folder/image.png',

    // js Method that should close my fileBrowser, then return the selected file

    returnImage:function(){ window.opener.CKEDITOR.tools.callFunction(CKEditorFuncNum, obj.selectedFile );

    //here we close the fileBrowser .... }

    }

    is this how i should use the method "CKEDITOR.tools.callFunction" ??

    Thanks, a lot! oh, and pls excuse my english

    Oct. 23, 2009, 1:13 a.m.

  • Johan (Guest)

    Thank you!

    Oct. 23, 2009, 12:32 p.m.

  • pogacsa (Guest)

    thanks. good post.

    Have any of you encounter a very stupid problem with IE like me? I am just using a jsp as custom image manager (upload/ resize/ ...), and finally can select the image and going back to "image properties" panel. It is migrated from FCK to CK, and working good on FF, Safari. But on IE it is not poping up a new window for my jsp. Any idea?

    thx

    Nov. 26, 2009, 3:55 p.m.

  • calebhc (Guest)

    Thanks! This was very, very helpful. :)

    Dec. 14, 2009, 11:37 p.m.

  • Stobe02 (Guest)

    Hey,

    i've been looking so long for a solution, thank you so much.

    greetings from germany.

    Feb. 6, 2010, 11:05 a.m.

  • Clemens (Guest)

    Thank you, this was helpful. i previously had window.parent instead of window.opener, which did not work (it does in the upload one though)

    What you should mention is, that one should simply close the window after calling the callback.

    Feb. 9, 2010, 10:56 p.m.

  • Denny (Guest)

    Yet Another Thank You Comment :)

    I've been struggling with this for a couple of days... not knowing much Javascript at all (and definitely not getting any useful help from the CKEditor docs!) I hadn't realised I needed to change window.opener to window.parent on the return call for the upload panel.

    All works now - many many thanks!

    March 8, 2010, 2:19 p.m.

*'d input fields are required.