Internet programciligi ile ugrasanlar veya web sayfasi tasarimi yapanlar illaki ister istemez ckeditör kontolunu duymustur. Genellikle admin panellerinde içerik,yazi ekleme islemleri için kullanilan bir çok özelligi bünyesinde barindiran kullanisli bir yazi editör kontrolüdür...Aslinda bunlar FCKeditor un iki ye bölünmüs hali .CKEditor, FCKeditor'ün editör özelliklerinin yeni bir arayüzle dahada gelistirilerek sunulmus hali.CKFinder ise yine FCKeditor ile yaptigimiz sunucuda gezinme dosya yükleme islemlerini yaptigimiz editör'ün gelistirilmis hali.

Bu yazimizda .aspx sayfamiza ckeditör ve ona ek birlesen olarak ckfinder kurulumunu elimden geldigince anlatmaya çalisacagim...

Ckeditör kontrolümüzü ilk olarak kendi web sayfasindan indirme islemini gerçeklestirmemiz gerekecek...

http://ckeditor.com/download adresine giriyoruz ve bize bir Ckeditör paketi seçmemizi ve indirmemizi söylüyor... Biz Asp.NET sayfamizda kullanacagimiz için bize gerekli olan paket CKEditor 3.6.4 for ASP.NET paketini bulup indiriyoruz....

Editörü sayfamizda kullanabilmemiz için sayfamiza referans olarak eklememiz gerekiyor... Bunun için ise Solition Explorer penceresinde web sayfamizin üzerine gelip sag tiklayip add reference diyoruz....

tikladiktan sonra açilan sekmede Browseye gelip Ckeditör dosya yolumuzu seçip içerisinden CKEditor.Net.dll uygulama dosyamizi seçip OK diyoruz ve sayfamiza referans olarak ekliyoruz...

Referans ekleme islemini bitirdikten sonra Toolbox kontrolümüze CKEditor kontrolümüzü ekleyelim... Bunun için ToolBox kontrolümüze gelip sag tiklayip Choosee Itemsi tikliyoruz.

Karsimiza gelen ekranda browse deyip Ckeditor yolumuzu belirtip Release klasöründeki CKEditor.Net.dll dosyamizi seciyoruz ve islemi bitiyoruz....

Bu islemlerden sonra web sayfamizin bulundugu dizine indirdigimiz CKEditor dosyamizin içindeki _Samples klasörü içindeki ckeditor klasörünü web sayfamizin dizinine kopyaliyoruz..

ve .aspx sayfamizi açip toolboxtan diger kontrolleri sayfamiza ekler gibi CKEditorümüzü ekliyoruz....

ekleme islemi yapildiktan sonra bir kaç ayari bulunmakta ve asagidaki ayarlari yapiyoruz....

Hazirlamis oldugumuz default.aspx dosyasinin sayfa yönergelerine asagidaki kodu ekleyelim.

<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>

Sayfa içerisine son olarak editör kodlarimizi ekleyelim.

sayfamiza ekledigimiz editör dosylarinin yolunu bildirmemiz gerekiyor...

<CKEditor:CKEditorControl ID="CKEditorControl1" Width="700px" BasePath="ckeditor/" runat="server"></CKEditor:CKEditorControl>

Editör koduna ekledigim EnterMode, ShiftEnterMode, StartupMode gibi parametrelerle de istedigim ayarlari ekliyorum. Bununla ilgili CKEditor’ün dokümantasyon sayfasina gaz atabilirsiniz.

CKEditor‘ün kurulumunu tamamladigimiza göre artik çalistirip asagidaki resimde oldugu gibi default çalisma ekranini görebiliriz.

Simdi ise gelelim CKFinder entegrasyonun yapimina...

Yukaridaki islemde belirtildigi gibi CKFinder dosyalarini web sayfamizin dizinine kopyaliyoruz...

1. “ckfinder” klasörümüzdeki “config.ascx” dosyasini açalim. Buradaki “CheckAuthentication()” fonksiyonunun geri dönüs degerini “return true” olarak degistirelim.

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..” seklindeki uyariyi kesinlikle göz ardi etmeyin. Burada kisaca eger geri dönüs degerini “true” olarak ayarlarsaniz herkesin sunucunuza upload ve ve listeleme için izin verdiginizi, ancak oturum dogrulama islemi ile bu sorunu kaldirabileceginiz hakkinda bir bilgi verip bunu örneklendiriyor. Güvenlik zafiyeti vermemek için sitenizi yayina almadan önce bir oturum islemi ile bu bölümü iliskilendirmeyi kesinlikle unutmayin.

2. Ardindan ayni dosya içerisindeki “SetConfig()” fonksiyonunda yapacagimiz degisikliklere gelelim.Setconfig içinde ise en önemli ayar Ckfinder in baz alacagi yükleme klasörünün adi ve konumu.Bu klasörü belirledikten sonra windows üzerinde bu klasöre IUSR_ kullanicisina bu klasöre yazma hakki vermeliyiz. Bu fonksiyon ayni zamanda satin alma islemi yapildiginda kullanilacak olan LicenseName ve LicenseKey‘in girilecegi alani olusturmaktadir. Bu fonksiyon içerisindeki “BaseUrl” ve “BaseDir” degiskenleri hemen gözünüze çarpacaktir. Her ikisi de CKFinder‘i kullandiginizda sunucuda ulasacaginiz alani belirtmek için kullaniliyor. Tek farki “BaseDir” fiziksel dosya yolu kullanirken “BaseUrl” relative dosya yolu kullanir. Islem önceligi olarak bakacak olursak ilk önce “BaseDir” kontrol edilir, bos ise “BaseUrl” degiskenine girilmis yol baz alinir. Ben islemlerimde “BaseDir” yani fiziksel yolu kullanacacagim. Bunun için

// Paste your license name and key here. If left blank, CKFinder will
        // be fully functional, in Demo Mode.
        LicenseName = "";
        LicenseKey = "";
       
       // Ben Localhost kullandigim için kendi yolumu belirtiyorum, sizin dosyalariniz nerede ise size kendi yolunuzu belirteceksiniz...

        // The base URL used to reach files in CKFinder through the browser.
        BaseUrl = "C:/Users/Administrator/Desktop/Yeni_klasör/resimler/";

       // Kendi web sayfalarimin bulundugu dizinde resimler adinda yeni bir klasör olusturup bu yolu burda belirtiyorum... CKFinder ile sunucuma resim uploand ettigimde kendi resimler klasörü içerisinde images klasörü olusturup resimleri bu klasörü yükleyecektir...

        // The phisical directory in the server where the file will end up. If
        // blank, CKFinder attempts to resolve BaseUrl.
        BaseDir = HttpContext.Current.Server.MapPath("~/resimler/");

// Thumbnail settings.
        // "Url" is used to reach the thumbnails with the browser, while "Dir"
        // points to the physical location of the thumbnail files in the server.
        Thumbnails.Url = BaseUrl + "/";
        if ( BaseDir != "" ) {
            Thumbnails.Dir = BaseDir + "/";
        }

3. Son olarak ise CKEditör ile CKFinder baglantisini yapmamiz gerekiyor... Bunu iki sekilde saglayabiliriz.

1. Yolumuz ;

CKEditor içerisindeki config.js dosyasini açip asagidaki kodlari yazarak;

   config.filebrowserBrowseUrl = '../ckfinder/ckfinder.html';
    config.filebrowserImageBrowseUrl = '../ckfinder/ckfinder.html?Type=Images';
    config.filebrowserFlashBrowseUrl = '../ckfinder/ckfinder.html?Type=Flash';
    config.filebrowserUploadUrl = '../ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type;=Files';
    config.filebrowserImageUploadUrl = '../ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type;=Images';
    config.filebrowserFlashUploadUrl = '../ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type;=Flash';

2. Yolumuz ;

Asagidaki kodumuzu “default.aspx.vb” içerisindeki kod sayfamiza yazarak...

Protected Overrides Sub OnLoad(ByVal e As EventArgs)
        Dim _FileBrowser As New CKFinder.FileBrowser()
        _FileBrowser.BasePath = "ckfinder/"
        'ckfinder klasör yolu
        _FileBrowser.SetupCKEditor(CKEditorControl1)
        'Sayfadaki entegre edilicek olan ckeditor IDsi
    End Sub

Bundan sonra editörümüz içerisindeki Link, Image ve Flash ekleme alanlarinda artik CKFinder‘i rahatlikla kullanabiliriz.

Örnek çalismayi buradan indirebilirsiniz...

Yararli olmasi dilegiyle !!!