Integrate Custom Image Uploader control with CKeditor using ASP.Net

 

Introduction

In this article, let’s see how we can upload an image to our website and embed it in CKeditor using the easy solution below. 

CKeditor is one of the most widely used WYSIWYG editors for web applications. Overtime, the CKeditor continued to evolve by adding new features that made HTML text editing a lot easier. When using a WYSIWYG editor, we will often need to upload image to server and embed it in the HTML content. By default, the CKeditor supports embedding an image that is already uploaded or from an external source by providing its URL.

For one of my websites, I was using the rich-text editor, CkEditor, to handle grab text from the user for articles. The problem came, though, when I realized that the CkEditor did not have a file/image browser included with it. Without this feature, it makes embedding images in text using the editor a pain. Here's how to make a quick, simple image browser in C#.NET and integrate it with CkEditor.

Follow the below steps to integrate image upload functionality with CkEditor in ASP.NET. Here the solution.

History

In the Previous articles i explained how to change or set width of ckeditor textbox area using asp.net, how to set or change height of Ckeditor textbox area using ASP.Net and many more about Ckeditor.

Step1.

Create a new ASP.NET website and name it as Demo_application.

Step 2.

Download Ckeditor from here and add Ckeditor to the root Folder of your Application.

Step 3.

Create a new folder Images in the root Folder of your Application.

Step 4.

Add new ASHX Handler File to your application and name it as "upload.ashx".

Step 5.

Add the Following Code to the ashx file.

<%@ 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);
        string url = "Images/" + file;
        context.Response.Write("");
        context.Response.End();             
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

Step 6.

Add another ASHX Handler File to your application and name it as "DeleteImage.ashx".

Step 7.

Add the Following Code to the DeleteImage.ashx file.

<%@ WebHandler Language="C#" Class="DeleteImage" %>

using System;
using System.Web;

public class DeleteImage : IHttpHandler {

    public void ProcessRequest(HttpContext context)
    {
        string filename = context.Request["imgname"];
        string baseurl = context.Server.MapPath("images/") ;
        try
        {
            System.IO.File.Delete(baseurl + filename);
        }
        catch
        {
            context.Response.Write("false");
            context.Response.End();
        }
        context.Response.Write("true");
        context.Response.End();
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

Step 8.

Call the Ckeditor Scripts in your .aspx page like below

<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""></script>
    $(function () {
        CKEDITOR.replace('<%=txtCkEditor.ClientID %>');
  
  CKEDITOR.config.height = 900;
  CKEDITOR.addCss('pre.prettyprint{background-color:#FADF74;}');
  
        $('#dvImages A.imglink').click(function () {

            var oEditor = CKEDITOR.instances.<%=txtCkEditor.ClientID %>;
            var html = "<img src='"+$(this).attr("imgsrc")+"'/>";

            var newElement = CKEDITOR.dom.element.createFromHtml(html, oEditor.document);
            oEditor.insertElement(newElement);

        });

         $('#dvImages A.dellink').click(function () {

         var img =  $(this).attr("img");   
            $.ajax({
                  type: "POST",
                  url: "DeleteImage.ashx",
                  data: "imgname="+img,
                                 
                  success: function(response) {                  
                   if(response == "true")
                   {
                    $('#dvImages A.dellink[img=\"'+img+'\"]').fadeOut();
                    $('#dvImages A.imglink[imgsrc*=\"'+img+'\"]').fadeOut();                  
                   }      
                  },
                  error: function(response) {
                    alert('There was an error. ' + response);
                  }
                });
        });

    });
</script>

Step 9.

Add Ckeditor TextBox to your .aspx file with id  txtCkEditor

  <asp:TextBox ID="txtCkEditor" runat="server" TextMode="MultiLine"></asp:TextBox>

Step 10.

Add the custom image browser control like below for browsing the images.

<fieldset>
<label class="asp_label" for="website" style="font-size: 14px">Upload Images</label>  <br/>
<div id="dvImages" style="padding-top: 15px; padding-bottom: 15px"><asp:placeholder id="phImages" runat="server"></asp:PlaceHolder>
</div>
<asp:fileupload id="FileUpload1" runat="server"/><br/>
<asp:fileupload id="FileUpload2" runat="server"/><br/>
<asp:fileupload id="FileUpload3" runat="server"/><br/>
<asp:button backcolor="#F7CF26" forecolor="#666666" id="btnUpload" onclick="btnUpload_Click" runat="server" text="Upload"/>
</fieldset>

 

Step 12.

Here is the code-behind for .aspx page. write the following code on click event of the upload button.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Security;
public partial class Default2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnUpload_Click(object sender, EventArgs e)
    {
        Directory.CreateDirectory(MapPath("images/upload"));
        string baseurlsave = Server.MapPath("images/upload/");
        string baseurldisplay = "Images/upload/";
        HttpFileCollection hfc = Request.Files;
        foreach (string file in hfc)
        {
            if (hfc[file].ContentLength > 0)
            {
                string filename = Path.GetFileName(hfc[file].FileName);
                hfc[file].SaveAs(baseurlsave + filename);
            }
        }

        HyperLink hplImage = null;
        HyperLink hplDel = null;
        foreach (string file in Directory.GetFiles(baseurlsave))
        {
            string filename = Path.GetFileName(file);
            hplImage = new HyperLink();
            hplDel = new HyperLink();

            //Image
            hplImage.NavigateUrl = "javascript:void()";
            hplImage.Attributes.Add("imgsrc", baseurldisplay + filename);
            hplImage.Text = filename;
            hplImage.CssClass = "imglink";

            //Delete link
            hplDel.NavigateUrl = "javascript:void()";
            hplDel.Attributes.Add("img", "/upload/" + filename);
            hplDel.Text = "Delete";
            hplDel.CssClass = "dellink";
           

            phImages.Controls.Add(hplImage);
            phImages.Controls.Add(new LiteralControl(" "));
            phImages.Controls.Add(hplDel);
            phImages.Controls.Add(new LiteralControl("
"));
        }
    }
}

Step 12.

You are Done. Now you can Debug Your Application to see the Results.

Step 13.

Click on Choose File Button. After Choosing the files click on Button Upload.

Step 14.

Now you can see the Uploaded Images.

Step 15.

Click on the image name and you can see the image in CkEditor Text Area. You can also Delete the image By clicking Delete Text which is next to the image name.

Step 16.

You can set size and other properties of the image by double-clicking the image in ckeditor.

Give your Valuable Comments.
comments powered by Disqus
 
Follow me on twitter
About Me
Harpreet Singh
I began programming with C++ when i was 17. Then at the middle of my study .NET came. Then I began to read C# and VB.NET. By the time i learnt SQL and ASP.NET, and developed some websites such as news portals that are active now. Currently i am running my own Software company.
More Articles