I am going to talk to anyone out there about how you can create your own file browser for CKEditor. Before you say it CKEditor to provide a file browser and uploader called CKFinder that you can purchase for $59. This article is not about how to develop a file browser to replace this because you don’t want to pay for CKFinder as frankly CKEditor on it’s own is worth paying that for. No, this article is about writing your own file browser because you need something different (although there is no reason why you couldn’t build your own). My only gripe with the boys at CKEditor is although there support guide are detailed they aren’t quite there yet, but as they are probably spending most of their time developing a great product who am I to complain. Instead I am happy to try and help them out with this post.
Firstly it is useful if you get a feel for how CKEditor recommend you to develop your own file browser and uploader. If you go to their support article on it here and have a quick read.
I am also only showing you an example for the image upload area, but you can change this for the flash or general browser. It will work the same. I have tested it.
I use the JQuery adapter to initiate CKEditor, so I will start their with my initiation code (for more information on this visit Initiating CKEditor with JQuery and Using JQuery UI Dialog):
The filebrowserImageBrowseUrl is the URL that you would use. The content displayed for this page is displayed in the pop-up that appears when you click the browse button. Adding this config variable will add the browse button to the image dialog. The other URLs you can also develop are:
- filebrowserBrowseUrl
- filebrowserImageBrowseUrl
- filebrowserFlashBrowseUrl
- filebrowserUploadUrl
- filebrowserImageUploadUrl
- filebrowserFlashUploadUrl
I am going to keep things simple and give you the basics, so you can take this further and will simply add a couple of links to the pop-up that will load into the image dialog.
My image PHP file looks like this:
Google Logo WordPress Logo
So let’s go through it!
There are two links that when clicked call the loadFile function passing an image URL. The first line of the function is where I cam so stuck with the documentation from CKEditor. In their documentation it says:
window.opener.CKEDITOR.tools.callFunction( funcNum, fileUrl [, data] );
The issue here is window.opener! Very messy for cross-browser compatibility. I have added a check to the DOM that then selects the right object.
The second line contains the ‘CKEditorFuncNum’ variable that is pushed to your dialog box from clicking the browse button in the image dialog box through the query string. This variable basically tells CKEditor what object you are working on and where to send the URL back to. On this line you can see the CKEditor function that passes back the object instance function through CKEditorFuncNum variable as the first parameter. The second parameter is the URL to the image file and the third parameter can be a message. I kept things simple, but you can take this further and provide a message in here if things go wrong. The message is ignored if the URL parameter is not blank, but if the URL parameter is blank the message is displayed in an alert box. This could be useful if you develop your own upload tool. It is this line that sends the URL back to the image dialog box.
The third line simply closes our dialog box.
That should be that in a nutshell. Hopefully it will give you enough to overcome the issues I had to start with. Let me know if you need any further help.
