Asp.Net
25
May
2012
Mvc 3 CkEditor ve CkFinder Kurulumu
Kategori : Mvc
Ekleyen : Admin
Selamlar Arkadaşlar, Bugünkü Makalemde sizlere Mvc Projelerimzde CK Editor ve CK Finder Editorlerini nasıl kullanacağımızı anlatmaya çalışacağım. Bugüne kadar Ck Editoru kullanıyordum fakat Ck Finder File Upload eklentisini hiç kullanmamıştım, kullanımı gayet basitmiş diyebilirim, türkçe kaynak sıkıntısı olduğundan dolayı bu makaleyi yazma gereği duydum... CK Finder'ın tam sürümü lisans gerektiriyor sanırım :) o konuda pek bir araştırmam olmadı. Bu araştırma işi size kalıyor.
Makalede kullandığım Ck Editörü Resmi sitesinden indirebilirsiniz. Sitede farklı sürümler mevcut Mvc için kullanacağımız sürüm "Makale yazım tarihinde" güncel olan ckeditor_3.6.3 sürümüdür.
Ck Finder'ı ise Asp.Net i destekleyen sürümünü indiriyoruz. Bu sürümünde güncel versiyonu ckfinder_aspnet_2.2.1'dir. CK Finder
Projemi Visual Studio 11 Ultimate "Demo" üzerinde ve .Net Framework sürümü 4.0 olarak oluşturuyorum.
Yeni bir Mvc Projesi oluşturuyoruz ve indirmiş olduğumuz Ck Editor dosyasını Ana dizine olduğu gibi kopyalayıp yapıştırıyoruz.
Bu işlemleride tamamladıktan sonra şimdi sıra geldi Ck Finder kurulumuna, indirmiş olduğumuz Ck Finder dosyasını CK Editörün içine kopyalayıp yapıştırıyoruz. Bu kısımda yapmamız gereken işlemler ise öncelikle ckfinder klasörü içinde bulumam "_source" klasörünü siliyoruz, daha sonra "ckfinder/bin/Release/" içinde bulunan "CKFinder.dll" dosyasını projemizin "bin" klasörüne ekliyoruz ve yine ckfinder klasörü içinde bulunan "config.ascx" dosyamız üzerinde izinleri ve dosya yollarını belirliyoruz. Altta veriğim kod bloğu dışında düzenleme yapacağınız pek önemli bir yer yok.
   1:      public override bool CheckAuthentication()
   2:      {
   3:          // WARNING : DO NOT simply return "true". By doing so, you are allowing
   4:          // "anyone" to upload and list the files in your server. You must implement
   5:          // some kind of session validation here. Even something very simple as...
   6:          //
   7:          //        return ( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true );
   8:          //
   9:          // ... where Session[ "IsAuthorized" ] is set to "true" as soon as the
  10:          // user logs on your system.
  11:   
  12:          return true;
  13:      }
  14:   
  15:      /**
  16:       * All configuration settings must be defined here.
  17:       */
  18:      public override void SetConfig()
  19:      {
  20:          // Paste your license name and key here. If left blank, CKFinder will
  21:          // be fully functional, in Demo Mode.
  22:          LicenseName = "";
  23:          LicenseKey = "";
  24:   
  25:          // The base URL used to reach files in CKFinder through the browser.
  26:          BaseUrl = "/Content/";
  27:          BaseDir = HttpContext.Current.Server.MapPath("~/Content/");
  28:   
  29:          // Optional: enable extra plugins (remember to copy .dll files first).
Ve son olarak Editörümüzün kullandığı Java Script dosyalarını projemize dahil ediyoruz.
   1:      <script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery-1.6.2.min.js") %>"></script>
   2:      <script type="text/javascript" src="<%: Url.Content("~/ckeditor/ckeditor.js") %>"></script>
   3:      <script type="text/javascript" src="<%: Url.Content("~/ckeditor/ckfinder/ckfinder.js") %>"></script>
Artık işlemlerimiz bittiğine göre HomeController ve Index sayfamızı oluşturabiliriz. Oluşturduğuz sayfamıza aşağıdaki kodları ekliyoruz.
   1:  <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
   2:   
   3:      <script type="text/javascript">
   4:          $(function () {
   5:              CKEDITOR.replace('ckEditor', {
   6:                  skin: 'kama',
   7:                  filebrowserBrowseUrl: '<%: Url.Content("~/ckeditor/ckfinder/ckfinder.html")%>',
   8:                  filebrowserImageBrowseUrl: '<%: Url.Content("~/ckeditor/ckfinder/ckfinder.html?type=Images")%>',
   9:                  filebrowserFlashBrowseUrl: '<%: Url.Content("~/ckeditor/ckfinder/ckfinder.html?type=Flash")%>',
  10:                  filebrowserUploadUrl: '<%: Url.Content("~/ckeditor/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files")%>',
  11:                  filebrowserImageUploadUrl: '<%: Url.Content("~/ckeditor/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images")%>',
  12:                  filebrowserFlashUploadUrl: '<%: Url.Content("~/ckeditor/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash")%>'
  13:              });
  14:          });
  15:      </script>
  16:   
  17:      <h2>MVC 3 CK Editor ve CK Finder Kurulumu</h2>
  18:   
  19:      <%: Html.TextArea("ckEditor")%>
  20:   
  21:  </asp:Content>
Projemizi çalıştırıyoruz ve Ck Editor ile işlemlerimizi yapmaya başlıyoruz. Kolay gelsin...
Görüşmek dileğiyle hoşçakalın...

Örnek Proje : Ck Editor ve Ck Finder Kurulumu
22 Ağustos Çar, 2012 Mert BİLİR
Hocam çok güzel bir paylaşım eline emeğine sağlık...
25 Ağustos Cmt, 2012 Admin
Teşekkürler, yardımcı olabildiysem ne mutlu bana.
24 Kasım Cmt, 2012 Ali
Hocam kod yazan elleriniz dert görmesin inş.. çok sağol
29 Kasım Per, 2012 Admin
Teşekkürler. iyi çalışmalar.
09 Şubat Cmt, 2013 Metin Akbaş
Çok teşekkürler.
19 Temmuz Cum, 2013 Sven Gtefanny
Razor için yazsaydınız daha da muhteşem olabilirdi :)
21 Temmuz Paz, 2013 Admin
Ufak oynamalarla Razor a çevrilir diye düşünmüştüm. :)
07 Ocak Sal, 2014 Mehmet ÇELEBİ
Hocam makaleniz için çok teşekkür ederim çok faydalı bir makale aynen uyguladım ama şöyle bir sorum var Ckfinder lisanslı satılıyor bunu bu şekilde demo olarak kullanmanın herhangi bir sakıncası varmı bir süre sonra herhangi bir kısıtlama getiriyorlarmı ve siz ne şekilde kullanıyorsunuz lisans satın aldınızmı sitelerinden baktığımızda 3 site için lisans satıyorlar yani her yaptığımız site için lisansmı satın alacağız???
15 Ocak Çar, 2014 Admin
Bu tip lisanslı ürün kullanmıyorum, herhangi bir kısıtlama söz konusu olurmu! bilmiyorum. Nice yazılımların ücretsiz kullanıldığını düşünürsek, buna siz karar verin derim.
20 Nisan Paz, 2014 ali çetin
Hocam merhaba. Mvc4 Razor da Ckeditor ile eklediğim yazı ve resimler html tag'ları içinde görüntüleniyor. Sebebi ne olabilir? Teşekkürler...
06 Mayıs Sal, 2014 Admin
Merhaba, @Html.Raw() içerisinde çıktı alırsan editorde eklenen Html Tagları gizlenir.