Asp.NET MVC CKEditor Entegresi ve Kullanımı

Gençay

14 yıl önce

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.

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.

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