|
Using an external file uploader and embedding the image in CKeditor
In this technique, we will provide image upload functionality externally to the CKeditor where the users can upload the images first. After uploading the images, the user can obtain the image URL and insert it to CKeditor through the insert image button in CKeditor toolbar.
An alternate and a more user friendly will be embedding the image in the cursor position of the CKeditor when the user clicks the uploaded image name in our page. Also, we can allow users to delete the uploaded images by providing a delete button. Something like below,
The user can delete the image by clicking delete link next to every image uploaded to the server.
Implementation
On click of Upload button, the images will be saved to “Images” folder and the name of the images will be displayed as hyperlinks with a delete link for each image. Using jQuery and the CKeditor JavaScript API the image will be inserted to the current cursor location of CKeditor on click of the image name link.
To implement delete, I will use a handler which will accept the image name and delete it from the Images folder. This handler will be called using Ajax method in jQuery. Refer the code below,
ASPX
<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 %>');
$('#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: "/CKeditorDemo/DeleteImage.ashx",
data: "imgname="+img,
contentType: 'application/x-www-form-urlencoded',
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>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<fieldset>
<h3>Upload mages</h3>
<asp:FileUpload ID="FileUpload1" runat="server" /><br />
<asp:FileUpload ID="FileUpload2" runat="server" /><br />
<asp:FileUpload ID="FileUpload3" runat="server" /><br />
<asp:FileUpload ID="FileUpload4" runat="server" /><br />
<asp:Button ID="btnUpload" runat="server" Text="Upload"
onclick="btnUpload_Click" />
<h3>Images</h3>
<div id="dvImages">
<asp:PlaceHolder ID="phImages" runat="server"></asp:PlaceHolder>
</div>
</fieldset>
<asp:TextBox ID="txtCkEditor" TextMode="MultiLine" runat="server"></asp:TextBox>
</asp:Content>
Codebehind
protected void btnUpload_Click(object sender, EventArgs e)
{
string baseurlsave = Server.MapPath(".") + "\\Images\\";
string baseurldisplay = "/CKeditorDemo/Images/";
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", 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("<br>"));
}
}
Delete handler
<%@ 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;
}
}
}
I have made my implementation as simple as possible to demonstrate easily. You can customize this so that the images are uploaded into a specific folder for each page.
|