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

Mehmet YAYLACI
YORUMLAR (23)
  1. Ramazan
    Ramazan

    02 Ağustos 2012 - 14:19

    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

      03 Ağustos 2012 - 15:23

      Kaynak dosyaları makalenin sonundaki linkten indirebilirsiniz. Kolay gelsin.

  2. Berk
    Berk

    12 Ekim 2012 - 21:20

    Acaba youtube'a tutorial şeklinde koyarmısın deniyorum olmuyor kaynak kodlarından deniyorum yine olmuyor

  3. Kenan Kaya
    Kenan Kaya

    10 Şubat 2013 - 18:50

    Merhaba,Ben localde resim ekleme yapıyorum, fakat sunucuda yapmıyor. Nerede hatalı olabilirim... Teşekkürler.

    • Mehmet YAYLACI
      Mehmet YAYLACI

      10 Şubat 2013 - 22:58

      Sunucuda resimleri upload ettiğiniz klasöre yazma izni vermemiş olabilirsiniz. Kolay gelsin.

  4. Ertem Yazıcı
    Ertem Yazıcı

    01 Temmuz 2014 - 16:23

    ç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

    18 Şubat 2015 - 22:38

    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

      19 Şubat 2015 - 15:59

      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

    25 Ağustos 2015 - 16:40

    peki veritabanına kayıt ederken nasıl yapıcaz textareafor kullanınca bu seferde "sunucuyu gez" butonu kayboluyor

  7. Handan A.
    Handan A.

    14 Eylül 2015 - 19:47

    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

      15 Eylül 2015 - 11:38

      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

    22 Kasım 2015 - 01:02

    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 gimi yöntem falan da kullandım ama bi değişiklik yok. Nasıl bir yol izlemeliyim.

    • Mehmet YAYLACI
      Mehmet YAYLACI

      22 Kasım 2015 - 10:27

      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

    15 Mart 2016 - 17:03

    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

      15 Mart 2016 - 18:23

      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

    29 Mart 2016 - 09:54

    indirme linki çalşmıyor, yenileyebilir misiniz?

    • Mehmet YAYLACI
      Mehmet YAYLACI

      29 Mart 2016 - 17:48

      Dosyaların maalesef yedeği yok. O yüzden linki yenileyemiyorum.

  11. Şeyda elçin Doğramacı
    Şeyda elçin Doğramacı

    14 Mayıs 2017 - 00:01

    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

    28 Mart 2018 - 17:53

    Update sayfasında kullandığımda çalışmıyor.

    • Mehmet YAYLACI
      Mehmet YAYLACI

      28 Mart 2018 - 18:50

      Veriyi mi kaydetmiyor? Veya hata mı veriyor? Sorununuzu daha net açıklarsanız yardımcı olabilirim.

      • Onur Kubilay YILMAZ
        Onur Kubilay YILMAZ

        28 Mart 2018 - 18:57

        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

          29 Mart 2018 - 05:48

          Ş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

            29 Mart 2018 - 07:55

            Çok teşekkür ederim.

YORUM YAPIN