Asp .Net Mvc CKEditor Entegrasyonu

Merhabalar, bu yazımda Asp .Net Mvc de CKEditor adlı güzel bir yazı editörünün projeye entegresine ilişkin bir örnek yapacağız. Hemen başlayalım.

İlk olarak verilen linkten CKEditor dosyalarını indiriyoruz.

https://ckeditor.com/ckeditor-4/download/


Ben Standard Package olan versiyonunu kullanmayı tercih ediyorum. Burası size kalmış. Seçtiğimiz versiyonu download diyerek indiriyoruz. İndirdiğimiz dosyayı rardan çıkartıp projeye ekliyoruz. Hangi dizene eklediğiniz fark etmez ister direkt ana dizine ekleyin ister bir klasör içine ekleyin.

Ekledikten sonra view sayfasına geliyoruz. Aşağıdaki eklemeleri yapıyoruz.

//
<script src="~/assets/ckeditor/ckeditor.js"></script>
<script src="~/assets/js/jquery.min.js"></script>

   @Html.TextAreaFor(model => model.product.Description, new { @id = "editor1" })

// 

<script>
    CKEDITOR.replace('editor1');
</script>

Buradaki kilit nokta replace scriptinin kesinlikle sayfanın en altında olması gerekiyor.


Bu işlemden sonra editörümüzün html sayfasında çalıştığını görebilirsiniz.


Daha sonra ilgili modelin classına gidiyoruz.

 public class Product
    {
       //
        [AllowHtml]
       public string Description { get; set; }
      //
}

Ve içine [AllowHtml] attribute’nü ekliyoruz. Buraya kadar her şey tamam view’deki html veriyi arkaya string olarak kaydedebiliyoruz peki çağırırken nasıl çağıracağız.


Veriyi kullanacağımız view dosyasına geliyoruz ve aşağıdaki gibi çağırıyoruz.

//
@Html.Raw(Model.Product.Description)
//

Her şey bu kadar projeyi derleyip çalıştırabilirsiniz.

Bu yazımın sonuna geldik. Bir sonraki yazımda görüşmek üzere. Sağlıcakla kalın.

Bir cevap yazın