Asp.NET MVC CKEditor Entegresi ve Kullanımı

Makale bazlı web projelerinde oldukça kullanışlı ve bir o kadar görsel CKEditor, MVC projelerine nasıl entegre edilir inceleyelim.

İnternette araştırmalarım sonucunda, Türkçe siteler de bu konu hakkında detaylı ve çalışabilir bir anlatım bulunmamaktadır.Haliyle uğraşlarımın olumlu sonucu neticesinde, Türkçe kaynak sıkıntısı olan bu konuyu sizlere detaylı bir şekilde göstermek istiyorum.

CKEditor’ün bu yazının yazıldığı tarihte en son versiyonuna buradan ya da http://ckeditor.com/ orjinal sitesinden ulaşabilirsiniz.

İlk adım olarak, indirdiğimiz CKEditor dosyasını rardan çıkardıktan sonra, “ckeditor” dosyasını projemizin ana dizinine atalım.
ckeditor1

Asp.NET MVC’de CKEditor eklentisini sistemimize bu şekilde entegre etmiş olduk.Biliyorum çok daha kompleks bir yapı bekliyordunuz.Ama sandığınız gibi, öyle DLL ler eklemeler, web.config e girmeler yok 🙂

Asıl mevzumuz olan, bu eklentiyi kullanalım.
Kullanacağımız View katmanında öncelikle, CKEditor’un .css ve .js dosyalarını sayfaya entegre edelim.Tabi bu işlemi direkt MasterPage sayfasında(Mesela _Layout.cshtml) yapmamız daha kolaylaştırıcı olacaktır.

    @Scripts.Render("~/Scripts/jquery-1.7.1.min.js")
    @Scripts.Render("~/ckeditor/ckeditor.js");
    @Scripts.Render("~/ckeditor/ckfinder/ckfinder.js");
    @Scripts.Render("~/Scripts/jquery.validate.js")

Bu işlemi yaptıktan sonra CKEditor dosyamızın sayfada görünmesini sağlayalım.

        @Html.TextAreaFor(model => model.OrnekProp, new { @id = "editor1" })
        <script type="text/javascript">
            var editor = CKEDITOR.instances['editor1'];
            if (editor) { editor.destroy(true); }
            CKEDITOR.replace('editor1', {
                enterMode: CKEDITOR.ENTER_BR,
            });
            CKFinder.setupCKEditor(null, '@Url.Content("~/ckeditor/ckfinder/")');
        </script>

İşte bu kadar, MVC prosejine CKEditor eklentisi entegrasyonu yapmış olduk.
Sayfamızın görüntüsü aşağıdaki gibi olacaktır.
ckeditor2

Son olarakta, CKEditor Türkçe karakter sorunu çıkarmaktadır.Bu sıkıntının muhtemelen CKEditor tarafından çözülebilmesi mümkündür.Ancak ben bulamadım.Bu yüzden static bir sınıf oluşturdum.CKEditor’e gelen veri bu sınıftaki static metodtan geçirilerek Türkçe karakter sorunu ortadan kaldırılmış olmaktadır.Eğer başka türlü çözüm bulursanız lütfen bana da bildiriniz.Yok eğer bulamadıysanız, buyrun sınıfı sizde kullanınız.

    public static class KarakterDuzenleyici
    {
        public static string KarakterDuzenle(string metin)
        {
            string Duzenlenmis = metin;
            Duzenlenmis = Duzenlenmis.Replace("&#304;", "I");
            Duzenlenmis = Duzenlenmis.Replace("&#305;", "i");
            Duzenlenmis = Duzenlenmis.Replace("&#214;", "Ö");
            Duzenlenmis = Duzenlenmis.Replace("&#246;", "ö");
            Duzenlenmis = Duzenlenmis.Replace("&Ouml;", "Ö");
            Duzenlenmis = Duzenlenmis.Replace("&ouml;", "ö");
            Duzenlenmis = Duzenlenmis.Replace("&#220;", "Ü");
            Duzenlenmis = Duzenlenmis.Replace("&#252;", "ü");
            Duzenlenmis = Duzenlenmis.Replace("&Uuml;", "Ü");
            Duzenlenmis = Duzenlenmis.Replace("&uuml;", "ü");
            Duzenlenmis = Duzenlenmis.Replace("&#199;", "Ç");
            Duzenlenmis = Duzenlenmis.Replace("&#231;", "ç");
            Duzenlenmis = Duzenlenmis.Replace("&Ccedil;", "Ç");
            Duzenlenmis = Duzenlenmis.Replace("&ccedil;", "ç");
            Duzenlenmis = Duzenlenmis.Replace("&#286;", "G");
            Duzenlenmis = Duzenlenmis.Replace("&#287;", "g");
            Duzenlenmis = Duzenlenmis.Replace("&#350;", "S");
            Duzenlenmis = Duzenlenmis.Replace("&#351;", "s");
            return Duzenlenmis;
        }
    }

Faydalanmanız dileğiyle..
İyi çalışmalar..

Bunlar da hoşunuza gidebilir...

13 Cevaplar

  1. Gürkan dedi ki:

    Selam CkEditor ücretsiz olmasına rağmen Ckfinder lisanslı ve bu ciddi bir sorun yaratıor benim için her sitede bu ücreti ödemek dert. Ftp Manager bölümü ckfinder da var diğeri ise sadece editör visualstudio da işime yarayabilecek bir editör var zaten. İnternet üzerinde yaptığım araştırmada ck editör üzerine uyarlanmış bir ftp manager buldum fakat sorun şu güvenlik ayarları düşürülmüş hostinglerde çalıştıramıyorum. trust ayarları medium olan hostlarda sorun yaşıyorum. Bununla alakalı bir çözüm öneriniz varmı?

    • Gençay dedi ki:

      Sorununuz hakkında herhangi bir fikrim bulunmamaktadır.Tavsiyem, büyük forumlarda sorununuzu paylaşarak illaki bu çok sınırlı durumu tecrübe edinmiş birilerine ulaşabilir, derdinize derman bulabilirsiniz.

  2. Orhan dedi ki:

    KarakterDuzenleyici Nasıl Kullanıcaz yardım edermisiniz?

    • Gençay dedi ki:

      KarakterDuzenleyici metodunu alacaksın bir o anki çalıştığın sınıf içine yapıştıracaksın.Ya da başka bir sınıf içine yazıp o sınıfın isminden çağıracaksın.Static olduğu için nesne oluşturmana gerek yok.

    • Gençay dedi ki:

      KarakterDuzenleyici.KarakterDuzenle(“Metin”);

      Bu kadar…

  3. Mehmet dedi ki:

    Merhaba hocam çok işime yaradı. Karakter konusunda da
    CKEDITOR.config.entities_latin = false;
    kodunu eklerseniz sorundan ayrı bir method kullanmadan kurtulursunuz.

    • Gençay dedi ki:

      Merhaba Mehmet,
      Ne zaman ki CKEditör kullanırım, işte o zaman ilk senin bu tavsiyeni deniyeceğim… 🙂
      Bende sana teşekkür ederim…

  4. Ekrem dedi ki:

    Merhaba, Gencay hocam,

    Bu anlatımınızda CKFinden eklentisi de çalışıyor mu peki?

  5. Reis dedi ki:

    Hocam şunun bir videosunu çekseniz yeni başlayanlar çok işine yarar misal ben 😀

  6. 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.

  7. Ramazan dedi ki:

    Süpersiniz.
    ASP DE kaydet fonksiyonu nasıl kullanabilirim.

  8. CK Editor dedi ki:

    . Açtım ckeditor’un dosyalarını inceledim ve çözümü de buldum. ckeditor klasörü içerisinde bulunan ckeditor.js dosyasını açıyoruz ve;
    ?
    1

    CKEDITOR.config.entities_latin=!0

    bu komutu buluyoruz. Ardından eşitliğin karşısında bulunan !0 yerine false yazıyoruz. Yani bu komutu;
    ?
    1

    CKEDITOR.config.entities_latin=false

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

Copy Protected by Chetan's WP-Copyprotect.