ASP.NET ile CKEditor kurulumu ve CKFinder Entegrasyonu

21 Ekim 2011
Bu yazıyı beğendiysen paylaşmayı unutma :)
Pin It

FCKEditor‘ün yeni yüzü olan CKEditor‘ün bir dosya yöneticisi olan CKFinder ile olan entegrasyonunun nasıl olacağına bir bakalım.

FCKEditor dönüşümünü CKEditor olarak yapınca, FCKEditor içerisinde varsayılan olarak bulunan File Manager maalesef iptal edilmiş ve CKFinder adında yeni bir ürün olarak satışa sunulmuş. Yani sahip olmanız için satın almanız gerekiyor. Eğer projeleriniz için böyle bir yapıya ihtiyacınız varsa http://ckfinder.com/purchase adresinden lisanslama işlemine bakabilirsiniz.

CKEditor ile bir süredir aktif bir şekilde uğraşmaya başlayınca kullanışlı dokümantasyonu ve eklenti geliştirebilme özelliği açıkçası beni inanılmaz bir şekilde cezbetti. Kısa bir süre önce “CKEditor’e video özelliği eklemek” isimli yazımda da bahsettiğim CKEditor’e video ekleme imkanı sağlayan eklenti de bu tarz eklentilerden biri. Her ne kadar bir süre sonra CKEditor’e eklenti olarak kendi File Manager’ımı yazıp blogumda paylaşacak olsam da, elimdeki projede hızlı yol almak için lisansını satın aldım.

Şimdi gelelim yazımızın konusu olan CKEditor ve CKFinder entegrasyonuna.. Ancak ilk iş olarak CKEditor’ün kurulumunu gerçekleştirelim.

Öncelikle gerekli dosyalarımız olan CKEditor‘ü ve CKFinder‘ı indirelim. Ben işlemlerimi ASP.NET ile gerçekleştireceğim için iki ürünün de ASP.NET sürümünü indiriyorum. Dolayısı ile bu makale içerisinde yer alan anlatımlar da bu paralel de olacaktır.

İndirme işlemini tamamladıktan sonra aşağıdaki resimde olduğu gibi zip dosyalarını açarak içerisinden ihtiyacım olan bölümleri alıyorum. CKEditor için zip içerisinden çıkan “_Samples” klasöründen “ckeditor” klasörünü, CKFinder için de “ckfinder” klasörünü alıp proje root’uma kopyalıyorum. Bu işlemi yaptıktan sonra “ckfinder” klasöründeki “_samples” klasörünü sorun çıkarmaması için siliyorum.

CKEditor-CKFinder

Şimdi ilk iş olarak CKEditor‘ün kurulumunu yapalım.

1. CKEditor‘e ait “CKEditor.NET.dll” dosyasını “ckeditor_aspnet_3.6.2\bin\Release” yolundan projemize “Add Reference” diyerek ekleyelim. Ardından “ckfinder_aspnet_2.1\ckfinder\bin\Release” yolundan “CKFinder.dll” dosyasını da aynı şekilde ekleyelim.

CKEditor-CKFinder

2. Hazırlamış olduğum Default.aspx dosyasının sayfa yönergelerine aşağıdaki kodu ekleyelim.
<%@ Register Assembly=”CKEditor.NET” Namespace=”CKEditor.NET” TagPrefix=”CKEditor” %>

3. Sayfa içerisine son olarak editör kodlarımızı ekleyelim.

<CKEditor:CKEditorControl ID=”CKEditor1″ runat=”server” Width=”550″ EnterMode=”BR” ShiftEnterMode=”P” StartupMode=”Wysiwyg” ToolbarLocation=”Top” DialogButtonsOrder=”OS”></CKEditor:CKEditorControl>

Editör koduna eklediğim EnterMode, ShiftEnterMode, StartupMode gibi parametrelerle de istediğim ayarları ekliyorum. Bununla ilgili CKEditor’ün dokümantasyon sayfasına gaz atabilirsiniz.

CKEditor‘ün kurulumunu tamamladığımıza göre artık çalıştırıp aşağıdaki resimde olduğu gibi default çalışma ekranını görebiliriz.

CKEditor-CKFinder

Kurulumlarımızı tamamladığımıza göre sıra geldi entegrasyona..

1. “ckfinder” klasörümüzdeki “config.ascx” dosyasını açalım. Buradaki “CheckAuthentication()” fonksiyonunun geri dönüş değerini “return true” olarak değiştirelim.

Ancak dosya içerisindeki “DO NOT simply return ‘true’. By doing so, you are allowing “anyone” to upload and list the files in your server. You must implement some kind of session validation here. Even something very simple as..” şeklindeki uyarıyı kesinlikle göz ardı etmeyin. Burada kısaca eğer geri dönüş değerini “true” olarak ayarlarsanız herkesin sunucunuza upload ve ve listeleme için izin verdiğinizi, ancak oturum doğrulama işlemi ile bu sorunu kaldırabileceğiniz hakkında bir bilgi verip bunu örneklendiriyor. Güvenlik zafiyeti vermemek için sitenizi yayına almadan önce bir oturum işlemi ile bu bölümü ilişkilendirmeyi kesinlikle unutmayın.

2. Ardından aynı dosya içerisindeki “SetConfig()” fonksiyonunda yapacağımız değişikliklere gelelim. Bu fonksiyon aynı zamanda satın alma işlemi yapıldığında kullanılacak olan LicenseName ve LicenseKey‘in girileceği alanı oluşturmaktadır. Bu fonksiyon içerisindeki “BaseUrl” ve “BaseDir” değişkenleri hemen gözünüze çarpacaktır. Her ikisi de CKFinder‘ı kullandığınızda sunucuda ulaşacağınız alanı belirtmek için kullanılıyor. Tek farkı “BaseDir” fiziksel dosya yolu kullanırken “BaseUrl” relative dosya yolu kullanır. İşlem önceliği olarak bakacak olursak ilk önce “BaseDir” kontrol edilir, boş ise “BaseUrl” değişkenine girilmiş yol baz alınır. Ben işlemlerimde “BaseDir” yani fiziksel yolu kullanacacağım. Bunun için

BaseDir = “C:/Users/egemenmede/Documents/Visual Studio 2005/WebSites/ckFinderTest/images”; şeklinde tanımlamamı yapıyorum. Dikkat ettiyseniz normalde (\) şeklinde olan dosya yolunu (/) şeklinde değiştirdim.

3. Son olarak aşağıdaki kodumuzu “default.aspx.cs” içerisine ekliyoruz ve artık işlemimiz tamamdır.

protected override void OnLoad(EventArgs e)
{
    CKFinder.FileBrowser _FileBrowser = new CKFinder.FileBrow
ser();

    _FileBrowser.BasePath = “ckfinder/”;
    _FileBrowser.SetupCKEditor(CKEditor1);
}

Bundan sonra editörümüz içerisindeki Link, Image ve Flash ekleme alanlarında artık CKFinder‘ı rahatlıkla kullanabiliriz.

CKEditor-CKFinder

CKEditor-CKFinder

Benzer Yazılar


DeliPenguen'i Google+'da bulun



  1. Melih Tuna
    29 Temmuz 2012 - 11:11

    Bi dünya hata veriyor ve sayfaya atılan tag pref leri de tanımıyor. ayrıca finder içinde düzenlemeye çalıştığınız ascx içinde tanıyabildiği tek bir obje yok. verdiğiniz linklerden indirdim ama aldığım sonuçlar bunlar

    • :DeliPenguen
      2 Ağustos 2012 - 13:37

      Merhaba,

      Yazıdaki çözümler hali hazırda kullanılan sistem üzerinde sorunsuz çalıştığına göre muhtemelen yazıda anlattığım bazı maddeleri eksik yapmış olabilirsiniz. Özellikle de tag pref’leri de tanımadığına göre 1 ve 2. madde de anlattım işlemler gerçekleşmemiş görünüyor. Çözümü sırası ile tekrar denemeniz mümkün mü?

  2. Mustafa
    9 Eylül 2012 - 22:52

    Merhaba

    Sitenizin bir süredir takipcisiyim birçok yararlı bilgiye ulaştım sayenizde.
    Melih arkadaş gibi sorun yaşayan varsa yukarıdaki verdiğiniz yönergeyi “paste” yaparken dikkat etsin çünkü ” yerine ” paste yapılıyor ve hata veriyor. Anlatılanın dışında birşey yapılmamışsa ckeditör çok kolay bir şekilde entegre ediliyor.

    Benim bir sorum olacak yardım edebilirseniz sevinirim.

    1) Bu editor $375 dan başlıyor ve $59 da ckfinderi eklersek totalde 750 lira civarında yapıyor ki ben alt üstü kendi blogumda kullanacağım bu editöre 750 lira vermek hiç işime gelmiyor. Bunu dağıtıldığı versiyonda kullanmak bana yasal sorumluluk getirir mi?

    2)Basedir e ile yolu yazdığımda neden “Klasör Boş” uyarısı veriyor? Demo olduğu için mi?
    / ve \ kullandım ikiside olmadı.

    Saatlerdir çözemediğim bir sorunda içerik eklerden kategorinin ID sini ve içeriğin ID sini QueryString ile alıyorum ve ona göre içerik ekletiyorum. Ama şöyle bir sorun varki ckeditörü eklediğimde alt üst oluyor ve QueryString den gelenleri okuyamıyor. Örneğin İçerik güncelle dediğimde textboxların içi doluyor içeriğe göre, ckeditörü ekledikten sonra hiçbir hatada vermemesine rağmen textboxlar boş, çekemiyor.
    Sebebide anladığım kadarıyla ckfinder dan kaynaklanıyor. Ckfinderin Eventini kaldırdıktan sonra sorunda kalkıyor.
    Bu sorun hakkında bilginiz varmı?

    • :DeliPenguen
      13 Eylül 2012 - 08:42

      Merhaba,

      İçeriklerden faydalandığınıza sevindim. Gelelim sorularınıza..

      1. CKEditor eğer hala politikası değişmediyse ücretsiz bir yazılım. Bu yüzden ücret ödemenize gerek yok. Ancak CKFinder’ı kullanmak isterseniz web siteniz için 59$’dan satışı yapılıyor. Sanırım küçük bir yanlış anlaşılma olmuş.

      2. config.ascx dosyasındaki Basedir satırını BaseDir = Server.MapPath(“~”); şeklinde değiştirmeniz sorunu çözecektir sanırım. (Bu arada ASP.NET kullandığınızı varsayıyorum.)

      Birincisi form verilerini QueryString ile göndermek kesinlikle doğru bir yöntem değil. Bu yaklaşımı değiştirmek gerekiyor. Hem güvenlik zaafiyeti ortaya çıkarır, hem de CKEditor’ü etkin kullanamazsınız. Çünkü QueryString ile taşıyabileceğiniz karakter katarının boyutu kısıtlı ve oldukça da küçüktür.

      CKFinder’ın eventını kaldırdıktan sonra düzeliyorsa; kodu yazıda anlattığım şekilde

      protected override void OnLoad(EventArgs e)
      {
      CKFinder.FileBrowser _FileBrowser = new CKFinder.FileBrow
      ser();
      _FileBrowser.BasePath = “/ckfinder/”;
      _FileBrowser.SetupCKEditor(CKEditor1);
      }

      değil, normal Load işlemi içerisinde kullanın.

      protected void Page_Load(object sender, EventArgs e)
      {
      CKFinder.FileBrowser _FileBrowser = new CKFinder.FileBrow
      ser();
      _FileBrowser.BasePath = “/ckfinder/”;
      _FileBrowser.SetupCKEditor(CKEditor1);
      }

  3. Eren
    4 Aralık 2015 - 08:17

    Resim yükleyince, resim açılmıyor demo olduğu için mi acaba bir bilginiz var mı bu konuda ?