{"id":494,"date":"2013-08-19T05:11:41","date_gmt":"2013-08-19T05:11:41","guid":{"rendered":"http:\/\/ntspl.co.in\/blog\/?p=494"},"modified":"2021-12-20T11:03:14","modified_gmt":"2021-12-20T11:03:14","slug":"ckeditor-with-image-upload-in-asp-net","status":"publish","type":"post","link":"https:\/\/www.ntspl.co.in\/blog\/ckeditor-with-image-upload-in-asp-net\/","title":{"rendered":"CkEditor with image upload in ASP.NET"},"content":{"rendered":"

Uploading image in CkEditor by following steps…<\/strong><\/p>\n

Step 1<\/strong>: Download the Ckeditor from Ckeditor website (http:\/\/ckeditor.com\/<\/a>)<\/p>\n

Step 2<\/strong>: Add a generic handler file (Upload.ashx) & write the code<\/p>\n

\r\n\/\/------------------------------Start Code-------------------------------------------<\/span>\r\n<%@ WebHandler Language=\"C#\" Class=\"Upload\" %>\r\nusing System;\r\nusing System.Web;\r\n\r\npublic class Upload : IHttpHandler {\r\n\r\n\tpublic void ProcessRequest (HttpContext context) {\r\n\t\tHttpPostedFile uploads = context.Request.Files[\"upload\"];\r\n\t\tstring CKEditorFuncNum = context.Request[\"CKEditorFuncNum\"];\r\n\t\tstring file = System.IO.Path.GetFileName(uploads.FileName);\r\n\t\tuploads.SaveAs(context.Server.MapPath(\".\") + \"\\\\upload\\\\\" + file);\/\/ path of folder where images are upload\r\n\t\tstring url = \"upload\/\" + file; \/\/ path of folder where images are upload\r\n\t\tcontext.Response.Write(\"<script>window.parent.CKEDITOR.tools.callFunction(\" + CKEditorFuncNum + \", \\\"\" + url + \"\\\");<\/script>\");\r\n\t\tcontext.Response.End();\r\n\t}\r\n\r\n\tpublic bool IsReusable {\r\n\t\tget {\r\n\t\t\treturn false;\r\n\t\t}\r\n\t}\r\n\r\n}\r\n\/\/----------------------------------------End Code---------------------------------------------------<\/span>\r\n<\/code><\/pre>\n
Step 3:<\/strong> Go to page & add a textbox (id=txtEditor)<\/p>\n
Step 4: <\/strong>add the script in head section<\/p>\n
\r\n<!-- -----------------------Start Script----------------------------------------------------------- --><\/span>\r\n<script src=\"js\/jquery-1.4.1.min.js\" type=\"text\/javascript\"><\/script>\r\n<script type=\"text\/javascript\" src=\"ckeditor\/ckeditor.js\"><\/script>\r\n<script type=\"text\/javascript\">\r\n$(function () {\r\n\tCKEDITOR.replace('<%=txtEditor.ClientID %>', { filebrowserImageUploadUrl: 'Upload.ashx' });\r\n});\r\n<\/script>\r\n<!-- -----------------------End Script----------------------------------------------------------- --><\/span>\r\n<\/code><\/pre>\n
Step 5<\/strong>: View in Browser the page & click on image icon (http:\/\/prntscr.com\/1m3l8a)<\/p>\n
Step 6<\/strong>: Browser the image & click on send it to server.<\/p>\n
Happy Coding….<\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
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”]; […]<\/p>\n","protected":false},"author":18,"featured_media":1494,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3],"tags":[99],"class_list":["post-494","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-asp-dot-net","tag-ckeditor-with-image-upload-in-asp-net"],"acf":{"custom_meta_title":"CkEditor with image upload in ASP.NET [Step by Step] | NTSPL","meta_description":"Do you want to know how to upload an image using CkEditor? Read this step by step guide about uploading an image using CkEditor in ASP.NET.","meta_keyword":"upload image using ckeditor, ckeditor in asp.net","other_meta_tag":"\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n"},"_links":{"self":[{"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/posts\/494"}],"collection":[{"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/comments?post=494"}],"version-history":[{"count":7,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/posts\/494\/revisions"}],"predecessor-version":[{"id":4362,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/posts\/494\/revisions\/4362"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/media\/1494"}],"wp:attachment":[{"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/media?parent=494"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/categories?post=494"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/tags?post=494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}