Bu makalede içerik yönetim sistemlerinde kullandığımız editörlerden en çok kullanılan editör olan CKEditor ve CKFinder kullanımına değineceğiz. Aslında bu iki editör FCKEditor adıyla tek bir editor olarak kullanılıyordu. Ancak daha sonra CKEditor ve CKFinder olarak iki ürün haline getirmişler.

CKEditor klasik editor olarak kullanılırken, CKFinder daha çok resim işlemlerini kullanmak için yazılmış. Şimdi dilerseniz işlemlerimize başlayalım.İlk önce aşağıda vermiş olduğum adresten kuruluma hazır CKFinder ve CKEditor eklentilerini indirin:

İlk önce bu iki dosyayı indirelim. İndirdiğimiz dosyaları her birini kendi klasörlerine çıkaralım.

Dosyaları çıkardığımızda yukarıdaki gibi iki klasör oluşturacaktır. Şimdi CKEditor ve CKFinder dosyalarını projemizin ana dizinine kopyalayacağız. 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 kopyalayıp projemizin ana dizinine ekliyoruz. Daha sonra ckfinder_aspnet_2.1 klasörünün içerisindeki ckfinder klasörünü kopyalayıp sitemizin ana dizinine ekliyoruz.

Ekledikten sonra şimdi ayarlarımızı yapmaya başlayalım. İlk önce sitemizin ana dizinine eklediğimiz ckfinder klasörü içerisindeki “config.ascx” dosyasını açıyoruz. Buradaki CheckAuthentication() metodunu buluyoruz. Burada bir takım yorum satırları göreceksiniz. Burada herkesin ftp alanımıza erişmemesi için güvenlik ayarları yapmamızı anlatıyor. Yani aslında eğer bu metod true değerini dönerse ckfinder’ i kullanabiliyoruz, aksi takdirde hata verecektir.

Benim için bir problem oluşturmaz derseniz bu metod içerisine sadece return true; satırını ekleyerek işlemi tamamlayabilirsiniz. Ama benim tavsiyem , yönetim panelinize giriş yapan kullanıcıyı bir sessiona atın ve burada da o sessionu kontrol ederek işlem yapın. Yani eğer herhangi bir giriş yapılmamışsa ckfinder kullanılmasın gibi.

Bunun için de aşağıdaki ufak kodu kendi projenize göre derleyebilirsiniz.

Şimdi projemize CKEditor ve CKFinder kontrollerini ekleyebiliriz. Bunun için Toolboxa sağ tıklayıp Add Tab seçeneğini seçip yeni bir alan ekleyelim toolboxa ve adına da CKEditor diyelim. Daha sonra bu eklediğimiz alanda sağ tıklayıp Choose Items… seçeneğini tıklayalım. Açılan pencereden Browse butonuna tıklayalım.Açılan pencereden ilk başta dosyaları açtığımız klasörü bulun.Bu klasörlerden önce ckeditor_aspnet_3.6.2\bin\Release klasörünün içerisindeki   CKEditor.NET.dll  dosyasını seçip AÇ butonunu tıklayalım. Sonra OK butonuna da tıklayalım. Artık CKEditor Toolboxa eklendi.

Şimdi CKFinder’i ekleyelim. Yine az önce açtığımız alanda sağ tıklayıp Choose Items… seçeneğini tıklayalım. Açılan pencereden Browse butonuna tıklayalım.Daha sonra ilk başta dosyaları açtığımız klasörü bulalım.Şimdi de ckfinder_aspnet_2.1\ckfinder\bin\Release klasörünün içerisindeki CKFinder.dll dosyasını dosyasını seçip AÇ butonunu tıklayalım. Sonra OK butonuna da tıklayalım. Artık CKFinder’ de Toolboxa eklendi.

Toolboxın görünümü aşağıdaki gibi oldu.

Şimdi CKEditorControl yazan nesneyi tutup projemize ekleyelim. Eklediğinizde sayfanızın source kısmına yukarıdaki gibi tagını ekleyecektir. Artık sayfaya CKEDitor eklendi. Şimdi sıra CKFinderi eklemeye geldi. CKFinderi bu şekilde eklemiyoruz. Bunun için aşağıdaki kodu kullanacağız. Aşağıdaki kodu CKEditoru eklediğimiz sayfanın Page_Load() metodu içerisine ekleyelim.

Bu işlem CKFinder kontrolünü CKEditor’e entegre etmemizi sağlayacak.Bu yüzden de aşağıdaki SetupCKEditor() metoduna verdiğimiz parametre değeri CKEditorControl1 olmalı.Yani CKEditorun id’si.

Bu işlemden sonra projemizi build edelim.Ve nihayet kullanmaya başlayalım. CKEditorControl1.Text özelliğinden CKEditörün içeriğini alabilirsiniz

İyi Çalışmalar.

CKEditor ve CKFinder kurulumu sırasında karşılaştığınız hatalar ve çözümleri için bu sayfayı inceleyebilirsiniz.