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 (35)

  1. Ramazan
    Ramazan
    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
      Kaynak dosyaları yazının sonundaki linkten indirebilirsiniz. Kolay gelsin.
  2. Berk
    Berk
    Acaba youtube'a tutorial şeklinde koyarmısın deniyorum olmuyor kaynak kodlarından deniyorum yine olmuyor
  3. Kenan Kaya
    Kenan Kaya
    Merhaba, Ben localde resim ekleme yapıyorum, fakat sunucuda yapmıyor. Nerede hatalı olabilirim... Teşekkürler.
    • Mehmet YAYLACI
      Mehmet YAYLACI
      Sunucuda resimleri upload ettiğiniz klasöre yazma izni vermemiş olabilirsiniz. Kolay gelsin.
  4. Ertem Yazıcı
    Ertem Yazıcı
    ç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
    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
      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
    peki veritabanına kayıt ederken nasıl yapıcaz textareafor kullanınca bu seferde "sunucuyu gez" butonu kayboluyor
  7. Handan A.
    Handan A.
    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

      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
    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
      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
    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
      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
    indirme linki çalşmıyor, yenileyebilir misiniz?
    • Mehmet YAYLACI
      Mehmet YAYLACI
      Dosyaların maalesef yedeği yok. O yüzden linki yenileyemiyorum.
  11. Şeyda elçin Doğramacı
    Şeyda elçin Doğramacı
    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
    Update sayfasında kullandığımda çalışmıyor.
    • Mehmet YAYLACI
      Mehmet YAYLACI
      Veriyi mi kaydetmiyor? Veya hata mı veriyor? Sorununuzu daha net açıklarsanız yardımcı olabilirim.
      • Onur Kubilay YILMAZ
        Onur Kubilay YILMAZ
        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

          Ş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
            Çok teşekkür ederim.
  13. Mehmet Ali Tunay
    Mehmet Ali Tunay
    Merhaba, aynı problemle uğraşıyorum. Edit yaparken textarea nın içi boş geliyor. Get metodunda tüm bilgiler geliyor aslında ama textarea içi boş kalıyor. İçeriği yazıp post edince kaydediyor. Yazdığınız kodları uygulayamadım. Nereye yazmam gerekiyor ve 'name' dışında kendi sayfamama uyarlamam gereken başka bir şey var mı? Şimdiden teşekkürler.
    • Mehmet YAYLACI
      Mehmet YAYLACI
      Yorumu kaydetmeden önce aşağıdaki jQuery kodlarını çalıştırıp deneyebilir misiniz? ('name' kısmını değiştirmenize gerek yok. Orada textarea ismini kendi alıyor.)

      $('textarea.ckeditor').each(function () {
          
      var $textarea = $(this);
          
      $textarea.val(CKEDITOR.instances[$textarea.attr('name')].getData());
      });
      • Mehmet Ali TUNAY
        Mehmet Ali TUNAY

        Ckeditor html kodları:

        <div class="form-group row">
            @Html.Label("Hakkımızda Metni", htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    <textarea class="ckeditor" name="Metin" value=@Model.Metin ></textarea> </div> </div>

        Script kodları:

        <script type="text/javascript">
            var editor = CKEDITOR.instances['Metin'];
            if (editor) { editor.setData(getTemplateData); }
            CKEDITOR.replace('Metin');
            CKFinder.setupCKEditor(null, '@Url.Content("/assets/images/")');
        </script>
        }
        Kodlar bu şekilde. Sizin yazdığınız kodları nereye yazmam gerekiyor?
        • Mehmet YAYLACI
          Mehmet YAYLACI
          script kodlarınızın altına yazınız. (<script></script> etiketi arasına)
          • Mehmet ali TUNAY
            Mehmet ali TUNAY
            <script type="text/javascript">
                var editor = CKEDITOR.instances['Metin'];
                if (editor) { editor.setData(getTemplateData); }
                CKEDITOR.replace('Metin');
                CKFinder.setupCKEditor(null, '@Url.Content("/assets/images/")');

                $('textarea.ckeditor').each(function () {
                    var $textarea = $(this);
                    $textarea.val(CKEDITOR.instances[$textarea.attr('name')].getData());
                });
            </script>
            BU ŞEKİLDE YAPTIM OLMADI
            • Mehmet YAYLACI
              Mehmet YAYLACI
              var $textarea = $('textarea.Metin');
              $textarea.val(CKEDITOR.instances['textarea.Metin'].getData());
              şeklinde deneyebilir misiniz?
              • Mehmet Ali TUNAY
                Mehmet Ali TUNAY
                Yine olmadı. Hocam sorunu tam olarak anlatabildim değil mi? Edit ekranını açtığımda diğer textbox'lardaki bilgiler formda geliyor. Sadece ckeditor'un "textarea"sı boş geliyor. Bu soruna göre çözüm üretiyoruz değil mi?
                • Mehmet YAYLACI
                  Mehmet YAYLACI
                  $('textarea.Metin').each(function () {
                      
                  var $textarea = $(this);
                      
                  $textarea.val(CKEDITOR.instances[$textarea.attr('name')].getData());
                  });
                  • Mehmet Ali TUNAY
                    Mehmet Ali TUNAY
                    Neyse hocam bütün tuşlara bastık ama yine gol olmadı :) İlginiz için çok teşekkür ederim. Ben başka text editor araştırayım.
                    • Mehmet YAYLACI
                      Mehmet YAYLACI
                      Olmadığına üzüldüm. Ancak veriyi kaydetmeden önce çalıştırmıyorsunuz gibi geldi verdiğim JavaScript kodlarını. Kaydet butonuna bastığınızda yani ckeditor'e veri girişi bittikten sonra çalıştırmalısınız.
  14. kaan
    kaan

    merhaba, ckeditör veri tabanına kaydettiğimde

    <p>test</p>
    bu şekilde kaydediyor bunu nasıl öneleyebilirim çok aratırdım hiç bir yöntem bulamadım bu konuda yardımcı olabilir misiniz rica etsem
    • Mehmet YAYLACI
      Mehmet YAYLACI

      JavaScript kodu ile ckeditor'ü tanımladıktan sonra

      CKEDITOR.config.allowedContent = true;
      diyerek içeriğin birebir yazdığınız şekilde kaydedilmesini sağlayabilirsiniz.

YORUM FORMU