ASP.NET MVC'de CKEditor ve CKFinder Kullanımı

Merhaba arkadaşlar. Kendi yönetim panelimde de kullandığım metin editörü olan CKEditor ve dosya yönetim editörü olan CKFinder editörlerini MVC projelerimizde nasıl kullanacağımızı anlatmaya çalışacağım. İlk önce CKEditor'ü ckeditor.com/download adresinden indirebiliriz. Makaleyi yazdığım sırada güncel sürüm CKEditor 3.6.3 sürümüdür. CKFinder'ı ise ckfinder.com/download adresinden indirebiliriz. Editörü ASP.NET projemizde kullanacağımız için ASP.NET uyumlu sürümünü indiriyoruz. Makaleyi yazdığım sırada güncel sürüm CKFinder 2.2.1 sürümüdür.

CKEditor ve CKFinder Kurulumu

İndirdiğimiz ziplenmiş dosyaları projemizde ana dizine çıkarıyoruz. Eğer farklı bir dizin kullanacak isek aşağıdaki adımlarda belirttiğim dizin yerine kendi dizin adresinizi yazabilirsiniz.

CKeditor

"ckfinder/bin/Release/" klasörü altındaki "CKFinder.dll" dll'ini projemize referans olarak ekliyoruz. ckfinder klasörü altındaki config.ascx dosyasında aşağıdaki değişiklikleri gerçekleştiriyoruz.

public override bool CheckAuthentication()
{
    if (Page.User.Identity.IsAuthenticated) //Eğer kullanıcı girişi yapılmış ise
        return true;
    else
        return false;
}

public override void SetConfig()
{
    BaseUrl = "/Uploads/"//Dosyaların upload yapılacağı dizin
    BaseDir = HttpContext.Current.Server.MapPath("~/Uploads/"); //Dizinin sunucudaki fiziksel adresi
}

Ve View'da gerekli javascript dosyalarını projemize dahil edip ayarlamaları gerçekleştiriyoruz.

<script type="text/javascript" src="@Url.Content("~/ckeditor/ckeditor.js")"></script>
<script type="text/javascript" src="@Url.Content("~/ckfinder/ckfinder.js")"></script>
<script type="text/javascript">
    CKEDITOR.replace('ckeditor');
    CKFinder.setupCKEditor(null'/ckfinder/');
</script>

@Html.TextArea("ckeditor"@*ckeditor'ün replace edileceği textarea*@

CKFinder Ayarları

Eğer sizde benim gibi CKFinder'da kullanılan flashupload ve basket pluginlerini kulllanmak istemezseniz veya başka ayarlamalar yapmak istiyorsanız ckfinder dizini altındaki config.js dosyasını açıp gerekli ayarlamaları aşağıdaki gibi yapabilirsiniz.

CKFinder.customConfig = function (config) {
    // Define changes to default configuration here.
    // For the list of available options, check:
    // http://docs.cksource.com/ckfinder_2.x_api/symbols/CKFinder.config.html

    // Sample configuration options:
    // config.uiColor = '#BDE31E';
    // config.language = 'tr';
    config.removePlugins = 'basket,flashupload'//flashupload ve basket pluginlerini kaldırdık.
};

Editörlerimizi artık kullanabiliriz. Hepinize kolay gelsin.

CKEditorCKFinder

Kaynak Dosyalar: sdrv.ms/Ov9hII

YORUMLAR (23)
  1. Ramazan
    Ramazan - Cevapla
    Biz aynısı yapıyoruz çalışmıyor. İnternetteki neredeyse bütün makaleleri inceledim genede çalıştıramadı. Nasıl iş anlamadım gitti. Kaynak dosyaları paylaşabilirmisiniz ?
    • Mehmet YAYLACI
      Mehmet YAYLACI - Cevapla
      Kaynak dosyaları makalenin sonundaki linkten indirebilirsiniz. Kolay gelsin.
  2. Berk
    Acaba youtube'a tutorial şeklinde koyarmısın deniyorum olmuyor kaynak kodlarından deniyorum yine olmuyor
  3. Kenan Kaya
    Kenan Kaya - Cevapla
    Merhaba, Ben localde resim ekleme yapıyorum, fakat sunucuda yapmıyor. Nerede hatalı olabilirim... Teşekkürler.
    • Mehmet YAYLACI
      Mehmet YAYLACI - Cevapla
      Sunucuda resimleri upload ettiğiniz klasöre yazma izni vermemiş olabilirsiniz. Kolay gelsin.
  4. Ertem Yazıcı
    Ertem Yazıcı - Cevapla
    çok saolun,Mvc 4 de kurulum işlemlerini yazınız sayesinde tamamladım.CKEditor ile MVC de CRUD işlemleri ile ilgili bir makale de yayınlarsanız çok memnun olurum.
  5. siyah ay
    siyah ay - Cevapla
    selamlar... ne kadar makale okudum bilemezsiniz.. ckeditör ün resim upload sadece abp.net için mi kullanılıyor sade asp için kullanmak mümkün değilmidir.. bu için bir kod mevcut değilmidir.. şayet varsa .. ki inanıyorum paylaşmanız mümkünmü .. biryere kadar geldim.. sadece resim yolunu gösteremiyorum..
    • Mehmet YAYLACI
      Mehmet YAYLACI - Cevapla
      Merhaba siyah ay.
      ASP için buradan gerekli kurulum bilgilerini öğrenebilirsiniz. Resim yolunu göstermek için ise CKFinder'ın ASP sürümünü indirdiğinizde ana dizinde config.asp dosyasını göreceksiniz. O dosyada baseUrl değerini ayarladığınızda resimleri upload ettiğiniz klasörü CKFinder görecektir. İyi çalışmalar.
  6. furkan
    furkan - Cevapla
    peki veritabanına kayıt ederken nasıl yapıcaz textareafor kullanınca bu seferde "sunucuyu gez" butonu kayboluyor
  7. Handan A.
    Handan A. - Cevapla
    Merhabalar, ben ckeditor'u kurdum çalışıyor, ancak sql sever 2008'de oraya yazılanları kaydedemiyorum. Sql hata veriyor zararlı form içeriği diye. HtmlEncoder kullanarak düzeltmeye çalıştım ancak işe yaramadı. Buna dair bir çözümünüz var mı acaba? Ne kullanarak html taglarıyla beraber sql'e kaydedebilirim? Çünkü sonrasında web page'de göstereceğim kaydedilen yazıları, haberleri vs. Ancak dediğim gibi kaydetme kısmında sıkıntı yaşıyorum. Sql insert'imde bir sıkıntı yok. Normal textbox ile kodum çalışıyor. Ckeditor ile kaydetme çalışmıyor. Şimdiden teşekkür ederim önderileriniz için.
    • Mehmet YAYLACI
      Mehmet YAYLACI - Cevapla
      Web.config dosyanızda aşağıdaki konfigürasyonu uygulayarak bu sorunu çözebilirsiniz.
      <system.web>
        <pages validateRequest="false"></pages>
        <httpRuntime requestValidationMode="2.0"/>
      </system.web>
  8. Aykut
    Aykut - Cevapla
    Selam, ckeditor üzerinden kaydettiğim veri göstermek istediğim veri string gibi algılıyor ve veriyi olduğu gibi yazıyor. Html.Raw gibi yöntem falan da kullandım ama bi değişiklik yok. Nasıl bir yol izlemeliyim.
    • Mehmet YAYLACI
      Mehmet YAYLACI - Cevapla
      Ne yapmak istediğinizi anlayamadım. Sorununuzu daha açık bir dille anlatırsanız yardımcı olmaya çalışırım.
  9. Serhat KOLCU
    Serhat KOLCU - Cevapla
    Admin panelinden CKEditor ile düzenlenen(başlıklar kalın, bazı kelimeler altı çizili veya renkli vs) metni db'ye kaydedip, son kullanıcı tarafında ise stili düzenlemiş biçimde yayınlamak istiyorum. Böyle birşey CKEditor ile mümkün mü? Değilse böyle bir işlem için ne yapmalıyım. Teşekkürler, kolay gelsin
    • Mehmet YAYLACI
      Mehmet YAYLACI - Cevapla
      Evet mümkün. Yukarıdaki örnekte textarea'yı ckeditor'e çeviriyoruz zaten. Nasıl normal textarea içindeki bilgiyi veritabanına kaydediyorsak aynı şekilde ckeditor'e çevrilen textarea'yı veritabanına kaydediyoruz. Yâni normal form elemanı ile ckeditor tarafından replace edilen form elemanı arasında veritabanına kaydetme yöntemi açısından hiçbir fark yok.
  10. Mustafa
    Mustafa - Cevapla
    indirme linki çalşmıyor, yenileyebilir misiniz?
    • Mehmet YAYLACI
      Mehmet YAYLACI - Cevapla
      Dosyaların maalesef yedeği yok. O yüzden linki yenileyemiyorum.
  11. Şeyda elçin Doğramacı
    Şeyda elçin Doğramacı - Cevapla
    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.
  12. Onur Kubilay YILMAZ
    Onur Kubilay YILMAZ - Cevapla
    Update sayfasında kullandığımda çalışmıyor.
    • Mehmet YAYLACI
      Mehmet YAYLACI - Cevapla
      Veriyi mi kaydetmiyor? Veya hata mı veriyor? Sorununuzu daha net açıklarsanız yardımcı olabilirim.
      • Onur Kubilay YILMAZ
        Onur Kubilay YILMAZ - Cevapla
        Update sayfasında kullanıyorum. Creates sayfasında eklediğim veriyi gösteriyorum ancak bu veriyi düzeltme işlemi yapamıyorum. Hata almıyorum ama güncelleme de yapmıyor.
        • Mehmet YAYLACI
          Mehmet YAYLACI - Cevapla
          Şu şekilde deneyebilir misiniz?
          $('textarea.ckeditor').each(function () {
              var $textarea = $(this);
              $textarea.val(CKEDITOR.instances[$textarea.attr('name')].getData());
          });
          Yukarıdaki jquery kodlarını veriyi kaydetmeden hemen önce çalıştırınız. $textarea degişkeninden gelen veriyi kaydedebilirsiniz.
          • Onur Kubilay YILMAZ
            Onur Kubilay YILMAZ - Cevapla
            Çok teşekkür ederim.
YORUM FORMU
Cevabı iptal etmek için tıklayınız.