Problem: An image browser was needed for CKEditor.
Impact: The user has to manually input the image file path, which is undesired.
Solution:
This solution is a simple one, so it only shows how to make a browser that looks in ONE folder, but it's possible to extend this solution to have directory browsing and handling as well. For my image browser, I connected to a database table called IMAGES. The table is rather simple. It has three main columns:
image_id INT
image_filename VARCHAR
image_filepath VARCHAR
The image_id is the primary key and is auto-incremented. The image_filename holds the file name of the image (e.g. "myimage.jpg"). Finally, the last column, image_filepath, holds the directory path to your "images" folder, where all images are placed (e.g. "images/"). (Note that this image browser does not take care of uploading or deleting. I created an image manager page to take care of that, but for simplicity's sake, I'm not putting that here.)
Next, I created my image browser page. I created a simple page with a repeater to display the images as an ImageButton. Now, for each image button I made sure to set the following (keeping in mind that the ImageUrl property was already set using Eval() with the filename and filepath columns):
OnCommand="getUrl"
CommandArgument='<%# String.Format("{0}{1}", Eval("image_filepath"), Eval("image_filename")) %>'
The CommandArgument is set to the image path (e.g. "images/myimage.jpg"). When the image is clicked the getUrl() function is called and is passed the image path (the CommandArgument value). This image path is the value that is needed to be passed back to the CKEditor so that it can set the correct path for the image to embed.
In the documentation for CKEditor for integrating a custom file browser, there is mention of a callback function:
window.opener.CKEDITOR.tools.callFunction( funcNum, fileUrl [, data] );
The funcNum is found in the query string that is attached to the URL of the image browser when CKEditor opens it. The relevant variable is highlighted below:
The fileUrl specified in the callback function is the value that we grabbed as the CommandArgument. To pass the file URL back to CKEditor, put the following in the code-behind file of your image browser page:
protected void getUrl(object sender, CommandEventArgs e)
{
//get function number for CKEditor
int funcNum = int.Parse(Page.Request.Params["CKEditorFuncNum"]);
string url = e.CommandArgument.ToString();
//below is script to for CKEditor callback function
//sends url of image back to image embedding function for CKEditor
string script = "<html><body><script type='text/javascript'>window.opener.CKEDITOR.tools.callFunction(" + funcNum + ", '" + url + "'); window.close();</script></body></html>";
//run callback function for CKEditor
ClientScript.RegisterClientScriptBlock(this.GetType(), "ClientScript", script);
}
The ClientScript.RegisterClientScriptBlock() function runs the Javascript which is specified in the string script. Note that the script string includes the <html> and <body> tags. These are required for this script to run properly!
Finally, once you have this done, you can integrate it with your CKEditor instance. To let CKEditor know you want to use a custom file browser, simply set the following property in your CKEditor instance:
FilebrowserBrowseUrl="mybrowser.aspx"
And that's how you create your custom file/image browser for CKEditor using C# and .NET.
Happy coding!
Read more:
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/File_Browser_(Uploader)/Custom_File_Browser, CKEditor documentation
I'm surprised no one has commented on this yet, because your concept saved me an unbelievable amount of time trying to figure this out. I ended up creating a jQuery version because I'm not a fan of the AJAX toolkit, but the idea of using a database to store filenames for some strange reason didn't occur to me, and I probably would have bashed my head off the wall for a lot longer.
ReplyDeleteThanks, Joanna.
I'm glad you found it helpful, Adam.
ReplyDeleteHi Kommala,
DeleteThanks for your informative blog. i tried to implement this but i'm stuck where the image url is coppied to the CKEditor after clicking browseserver button is clicked. I appreciate if you can give your working code.