In
this article, let’s see how we can upload image to our website and embed it in
CKeditor by below easy solution. The CKeditor has a property called filebrowserImageUploadUrl which will provide
an option to upload images to the server when configured. This property takes a
file uploader (a page or a handler) url to upload the selected image to the
server. The handler that is responsible for uploading the image should return
back the URL of the image to display in the CKeditor. Once filebrowserImageUploadUrl
property is configured, you will be able to see a new tab called “Upload” in
Image Properties pop-up of CKeditor.
Follow the below steps to integrate image
upload functionality with CKEditor in ASP.NET. Here the solution.
1. Create a New ASP.NET
Website “CKeditorDemo”.
2. Download CKEditor and extract in your web folder root.
2. Download CKEditor and extract in your web folder root.
3. Create a new folder named “Images” in your web folder root.
4. Add the new ASHX Handler file (.ashx) “Upload.ashx” and Copy Paste
below code into “Upload.ashx”
<%@ 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(".") + "\\Images\\"
+ file);
//provide direct URL
here
string url = "http://localhost/CKeditorDemo/Images/"
+ file;
context.Response.Write("<script>window.parent.CKEDITOR.tools.callFunction("
+ CKEditorFuncNum
+ ", \"" + url + "\");</script>");
context.Response.End();
}
public bool
IsReusable {
get { return false; }
}
}
5. Call the script and declare Textbox with ID="txtCkEditor" in .aspx file
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckeditor/adapters/jquery.js"></script>
<script type="text/javascript">
$(function () {
CKEDITOR.replace('<%=txtCkEditor.ClientID
%>', {
filebrowserImageUploadUrl: '/CKeditorDemo/Upload.ashx' }); //path to “Upload.ashx”
});
</script>
<asp:TextBox ID="txtCkEditor" TextMode="MultiLine" runat="server"></asp:TextBox>
6. You are done
with the setting. Now run the website you will see the CKEditor configured in
the page.
7. Then choose the
image icon in the CKEditor to upload the Image.
9. The uploaded
image is displayed in the CKEditor after clicking “OK”.
