CkEditor with image upload in ASP.NET

Uploading image in CkEditor by following steps…

Step 1: Download the Ckeditor from Ckeditor website (http://ckeditor.com/)

Step 2: Add a generic handler file (Upload.ashx) & write the code

//------------------------------Start Code-------------------------------------------
<%@ WebHandler Language="C#" Class="Upload" %>
using System;
using System.Web;

public class Upload : IHttpHandler {

	public void ProcessRequest (HttpContext context) {
		HttpPostedFile uploads = context.Request.Files["upload"];
		string CKEditorFuncNum = context.Request["CKEditorFuncNum"];
		string file = System.IO.Path.GetFileName(uploads.FileName);
		uploads.SaveAs(context.Server.MapPath(".") + "\\upload\\" + file);// path of folder where images are upload
		string url = "upload/" + file; // path of folder where images are upload
		context.Response.Write("<script>window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ", \"" + url + "\");</script>");
		context.Response.End();
	}

	public bool IsReusable {
		get {
			return false;
		}
	}

}
//----------------------------------------End Code---------------------------------------------------

Step 3: Go to page & add a textbox (id=txtEditor)

Step 4: add the script in head section

<!-- -----------------------Start Script----------------------------------------------------------- -->
<script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
$(function () {
	CKEDITOR.replace('<%=txtEditor.ClientID %>', { filebrowserImageUploadUrl: 'Upload.ashx' });
});
</script>
<!-- -----------------------End Script----------------------------------------------------------- -->

Step 5: View in Browser the page & click on image icon (http://prntscr.com/1m3l8a)

Step 6: Browser the image & click on send it to server.

Happy Coding….