CKEditor ve CKFinder Kurulumu ve Ayarları

  • 08.01.2012 01:16
  • ASP.Net
  • 13331

Bu makalede içerik yönetim sistemlerinde kullandigimiz editörlerden en çok kullanilan editör olan CKEditor ve CKFinder kullanimina deginecegiz. Aslinda bu iki editör FCKEditor adiyla tek bir editor olarak kullaniliyordu. Ancak daha sonra CKEditor ve CKFinder olarak iki ürün haline getirmisler.

CKEditor klasik editor olarak kullanilirken, CKFinder daha çok resim islemlerini kullanmak için yazilmis. Simdi dilerseniz islemlerimize baslayalim.Ilk önce asagida vermis oldugum adresten kuruluma hazir CKFinder ve CKEditor eklentilerini indirin:


CKEditor Indir
CKFinder Indir

Ilk önce bu iki dosyayi indirelim. Indirdigimiz dosyalari her birini kendi klasörlerine çikaralim.

 

CKEditor, CKFinder Kurulumu Klasörlerin Çikarilmasi

 

Dosyalari çikardigimizda yukaridaki gibi iki klasör olusturacaktir. Simdi CKEditor ve CKFinder dosyalarini projemizin ana dizinine kopyalayacagiz. Bunun için önce ckeditor_aspnet_3.6.2 klasörünün içerisindeki _Samples klasörünün içerisinde bulunan ckeditor klasorunu kopyalayip projemizin ana dizinine ekliyoruz. Daha sonra ckfinder_aspnet_2.1 klasörünün içerisindeki ckfinder klasörünü kopyalayip sitemizin ana dizinine ekliyoruz.

Ekledikten sonra simdi ayarlarimizi yapmaya baslayalim. Ilk önce sitemizin ana dizinine ekledigimiz ckfinder klasörü içerisindeki “config.ascx” dosyasini açiyoruz. Buradaki CheckAuthentication() metodunu buluyoruz. Burada bir takim yorum satirlari göreceksiniz. Burada herkesin ftp alanimiza erismemesi için güvenlik ayarlari yapmamizi anlatiyor. Yani aslinda eger bu metod true degerini dönerse ckfinder’ i kullanabiliyoruz, aksi takdirde hata verecektir.

Benim için bir problem olusturmaz derseniz bu metod içerisine sadece return true; satirini ekleyerek islemi tamamlayabilirsiniz. Ama benim tavsiyem , yönetim panelinize giris yapan kullaniciyi bir sessiona atin ve burada da o sessionu kontrol ederek islem yapin. Yani eger herhangi bir giris yapilmamissa ckfinder kullanilmasin gibi.

Bunun için de asagidaki ufak kodu kendi projenize göre derleyebilirsiniz.

public override bool CheckAuthentication()

{

 if (Session["aktifKullanici"] != null)

     return true;

 else

     return false;

}

Simdi projemize CKEditor ve CKFinder kontrollerini ekleyebiliriz. Bunun için Toolboxa sag tiklayip Add Tab seçenegini seçip yeni bir alan ekleyelim toolboxa ve adina da CKEditor diyelim. Daha sonra bu ekledigimiz alanda sag tiklayip Choose Items… seçenegini tiklayalim. Açilan pencereden Browse butonuna tiklayalim.Açilan pencereden ilk basta dosyalari açtigimiz klasörü bulun.Bu klasörlerden önce ckeditor_aspnet_3.6.2\bin\Release klasörünün içerisindeki   CKEditor.NET.dll  dosyasini seçip AÇ butonunu tiklayalim. Sonra OK butonuna da tiklayalim. Artik CKEditor Toolboxa eklendi.

Simdi CKFinder’i ekleyelim. Yine az önce açtigimiz alanda sag tiklayip Choose Items… seçenegini tiklayalim. Açilan pencereden Browse butonuna tiklayalim.Daha sonra ilk basta dosyalari açtigimiz klasörü bulalim.Simdi de ckfinder_aspnet_2.1\ckfinder\bin\Release klasörünün içerisindeki CKFinder.dll dosyasini dosyasini seçip AÇ butonunu tiklayalim. Sonra OK butonuna da tiklayalim. Artik CKFinder’ de Toolboxa eklendi.

Toolboxin görünümü asagidaki gibi oldu.

 

ASP.NET -  CKEditor,CKFinder projeye nasil eklenir?

 

Simdi CKEditorControl yazan nesneyi tutup projemize ekleyelim. Eklediginizde sayfanizin source kismina yukaridaki gibi tagini ekleyecektir. Artik sayfaya CKEDitor eklendi. Simdi sira CKFinderi eklemeye geldi. CKFinderi bu sekilde eklemiyoruz. Bunun için asagidaki kodu kullanacagiz. Asagidaki kodu CKEditoru ekledigimiz sayfanin Page_Load() metodu içerisine ekleyelim.

Bu islem CKFinder kontrolünü CKEditor’e entegre etmemizi saglayacak.Bu yüzden de asagidaki SetupCKEditor() metoduna verdigimiz parametre degeri CKEditorControl1 olmali.Yani CKEditorun id’si.

FileBrowser fb = newFileBrowser();

fb.BasePath = "../ckfinder";

fb.SetupCKEditor(CKEditorControl1);

Bu islemden sonra projemizi build edelim.Ve nihayet kullanmaya baslayalim. CKEditorControl1.Text özelliginden CKEditörün içerigini alabilirsiniz

Iyi Çalismalar.

CKEditor ve CKFinder kurulumu sirasinda karsilastiginiz hatalar ve çözümleri için bu sayfayi inceleyebilirsiniz.

Bu yazıya yapılan yorumlar:

  • Ayşe Leman Özsipahi

    14.05.2017 00:04

    Gerçekten çok faydalı bir bilgi olmuş ne zamandır bu konu üzerinde araştırma yapıyordum. Sayenizde bu sorunumu çözebildim çok teşekkürler.

  • evrim ergül

    16.07.2013 17:06

    merhaba ckeditor sitesinden indirdigim dosyada dll dosyasi bulunmuyor.sizin koydugunuz linklerde ölmüs yardimci olabilirmisiniz?

  • Harun Saraç

    28.11.2012 14:56

    Merhaba, CkFinder'i, CkEditor'den farkli bir makinede çalisitrabiliyor muyuz? Söyle ki; Yaptigim bir sitede db ve kodlar anasitede iken, resimler vb content.abc.com gibi bir subdomain altinda baska bir serverda. Haliyle de editörler yazilarini ckEditor ile yazdiktan sonra ckFinder'a basip resmin içine yazi eklemek istediklerinde diger sunucudaki resimleri görmek ve yine oraya yüklenmesi gerekiyor. Çok tesekkrüer

Siz de düşüncelerinizi yazabilirsiniz:

;