Asp.Net CkEditor Resim Yükleme

Bu makalemizde CKEDITOR kurulumu,bağlantısı ve resim yükleme işlemini anlatmaya çalışıcağım.

ilk olarak ister Buradan istersenizde aşşağıda verceğim linkten CKEDITOR dosyalarını indirelim

Bu dosyaları projemizin içine ekleyelim.Ardından size linkte verecekim Ckeditor.dll  dosyasını indirilelim.

Toolbox 'ın boş bir yerine sağ tıklayıp ADDTAB diyelim ve  yeni tabımıza bir isim girelim ben "editor" dedim 

Ardından eklediğimiz tab 'a CHOOSE ITEMS  seçeneğine tıklayalım.Açılan bencerede BROSE seçeneğine tıklayalalım.
linkte vermiş olduğum   Ckeditor.dll i seçelim a tıklayım.

Nesnemiz Toolbox a eklendi .

Default.aspx >> Desing >> Html taglarının dışında herhangi bir yere

<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>

Default.aspx >> Desing >> BODY taglarının arasında ihtiyacınız olduğu bölüme

 <CKEditor:CKEditorControl ID="CKEditorControl1" runat="server"  
  </CKEditor:CKEditorControl>

 Ekliyoruz .

Default.aspx.cs  >> Code > Button Click veya page load'a

                    dbConn.Open();
                    SqlCommand cmd = new SqlCommand("Insert Into  TABLO(TABLOALANİ)  Values  ('" + CKEditorControl1.Text + '")", dbConn);
                    cmd.ExecuteNonQuery();
                    dbConn.Close();

Şuanda rahatlıkla Editörünüzle işlemler yapabilirsiniz. FAKAT resim yüklemek için devam ediyoruz.

Projemize CTRL + SHİFT + A TIKLAYIP bir adet generic handler yani .ASHX  ekleyelim. eklemeden önce ismini UPLOAD.ashx olarak düzenleyelim.

UPLOAD.ASHX.CS >> PROCES REQUEST (HttpContext context) içine

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

Yazalım ardından projenin içine UPLOAD adında bir klasör açalım .

Daha önce formumuza eklemiş olduğumuz CKEditorControl 'e bi ekleme daha yapıcaz.

<CKEditor:CKEditorControl ID="CKEditorControl1" runat="server"  FilebrowserImageUploadUrl="../Upload.ashx" >
 </CKEditor:CKEditorControl>

FilebrowserImageUploadUrl="../Upload.ashx" > ekliyorz ve Upload.ashx e yönlendiriyoruz.

 

Makalemi okudunuz için teşşekür ederim.

 

Soru Sorun !