CkEditor ve CkFinder kurulum işlemleri

Herkes' e merhaba.

HTML metin editörü CkEditor ve sunuculara dosya gönderme yardımcımız olan CkFinder in Asp.NET MVC üzerinde kurulum işlemlerinden bahsedeceğim.

İlk olarak bileşenlerin kendilerinden kısaca bahsedecek olursak,
CkEditor bir Word dosyası içerisinde yapabildiğiniz aşağı yukarı çoğu şeyi size kendi sayfanız içerisinde yapmanıza olanak verir.Örneğin bir makale/yazı yazıyorsunuz.Belirli yerlerde yazı puntosunda, stilinde veyahut renginde düzeltmeler yapmaya ihtiyacınız var.CkEditor burada devreye giriyor, arayüzde siz hertürlü düzeltme işlemini yaparken arka planda yaptıklarınız HTML kodlara çevrilerek tutuluyor, kaydettiğinizde bu kodlar veri tabanınızda kayıtlı tutuluyor.

CkFinder ise bu hazırladığımız döküman içerisinde kullanacağımız resimler için bizlere yardımcı bir araç.Yapacağımız tek şey "config.ascx" dosyası içerisinde bir yetki ayarı, bir de kayıt edilen dosyaların proje içerisinde hangi dosya içerisinde tutulacağını belirtmek, hepsi bu kadar.

Şimdi kurulum işlemlerine başlayalım,

İlk olarak buradan CkEditör ü, buradan da CkFinder in uygun versiyonlarını indirip kaydedin.

İndirdiğiniz dosyalar içerisinden CkEditör ün dosyasını olduğu gibi projenizde ilgili dizin içerisine atın.
CkFinder de ise olay biraz daha değişik, içerisinden _samples ve _source dosyalarını silin, ardından kalan dosyalarla beraber ana klasörü olduğu gibi projenizin içerisine dahil edin.



Dosyaları yukarıdaki gibi ekledikten sonra projemize, CkFinder in yanındaki oka basarak detay dosyalarını görelim.İçerisinden yukarıda bahsettiğimiz "config.ascx" dosyasını açalım.

İlk olarak aşağıdaki Authentication ayarını yapmamız gerekiyor.




Daha sonrasında ise resmin kayıt edileceği bölümün detay bilgileri girilir aşağıdaki gibi.




Projeniz içerisine ana dizine bir Content dizini oluşturduğunuzu varsayarsanız yol yukarıdaki gibi olacaktır.Aksi takdirde kendi yolunuza göre editleyebilirsiniz.

Düzenlemelerimizi yukarıdaki gibi gerçekleştirdikten sonra view dosyamızı oluşturmaya hazırız.Deneme işlemlerini gerçekleştirebilmek adına bir Controller oluşturalım, View ini de aynı şekilde oluşturup karşımıza alalım.

Aşağıdaki resimde de görüldüğü gibi burada yapmamız gereken işlem, CkFinder ve CkEditor un klasörlerinin içerisindeki script dosyalarını view imiz içerisinde referans göstermek gerekiyor ilk olarak.
Daha sonra ise ilk olarak CkFinder in replace edileceği bir textarea oluşturmamız gerekli.Burada dikkat edilmesi gereken script bölümünde replace edilen alanın ismi ile textarea nın name inin aynı olması gerektiği.




Şuan çalıştırdığınızda editör karşınıza gelecektir.Resim ekleme tuşuna bastığınızda aşağıdaki "Karşıdan Yükle" bölümü görüyorsanız CkFinder in entegrasyon işlemi de sorunsuz gerçekleşmiştir.Bundan sonra yapacağınız dosyayı seçmek, sunucuya yolla demek.Bu işlemin ardından config dosyasında verdiğimiz yola resim kayıt olacaktır.Çıkan uyarıya tamam dediğinizde editör pencerenize resim gelecektir.




Kurulum işlemlerimiz bu kadar.

Dipnot : Controller' inizin başına veya Action ın başına [ValidateInput(false)] koymayı unutmayın, aksi takdirde .Net in kendi koruma özellikleri devreye giriyor ve html elementleri girişi yapamayacağınızda dolayı sizlere güzel bir Error veriyor :)
Bu koyduğumuz kontrolü anlamı, bu sayfada girdileri knotrol etme olarak özetleyebiliriz.Bu arada bu kontrol Create işleminin Post una koyulmalıdır.Amacı ise bahsettiğimiz gibi Editör yardımı ile SQL vt ye html karakterler içeren bir girdi sağlamak.

Aklınıza takılan bölümleri, sormak istediğiniz soruları yorum bölümünde iletebilirsiniz. yes
Yanlış bilgilendirdiğim bölümler olur ise lütfen bildirin.

İyi çalışmalar, kolay gelsin.

İlker YANIZCA
Software Developer