.NET Core MVC CKEditor Entegrasyonu ve Sunucuya Resim Yükleme Özelliği

CKEditor, içeriği doğrudan web sayfalarının içine yazmayı sağlayan WYSIWYG zengin bir metin editörüdür.

Ckeditor adresini ziyaret ederek CKEditor’ün son versiyonunu indirebilirsiniz. Dosyaları rar’dan çıkardıktan sonra wwwroot klasörümüze atıyoruz.

CKEditor’u kullanacağımız sayfamıza ckeditor.js bağlantımızı ekleyip

<script src=”~/ckeditor/ckeditor.js” type=”text/javascript”></script>

Bir adet Textarea oluşturuyoruz.

@Html.TextAreaFor(model => model.Aciklama, new { @id = “editor1” })

Sonrasında sayfanın en altına id değeri editor1 olan textarea ckeditor’e çevir dediğimiz javascript kodunu ekledikten sonra CKEditor kütüphanesini kullanmaya başlayabiliriz.

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

Bütün adımları doğru bir şekilde yaptığınızda projemizi çalıştırdığımızda CKEditor ile karşılaşacağız.

Resim Yükleme Özelliğini Aktif Hale Getirme

Buraya kadar olan kısım standart yaptığımız işlem ancak CKEditor’ün resim yükleme özelleği için öncelikle controller’a resimleri sunucumuza yükleyecek method yazıyoruz.

1.Resim Yükleyeceğimiz Methodun Tanımlanması

        
        private readonly IHostingEnvironment _env;

        public HomeController(IHostingEnvironment env)
        {
            _env = env;
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public IActionResult UploadImage(IFormFile upload)
        {
            if (upload.Length <= 0) return null;

            var fileName = Guid.NewGuid() + Path.GetExtension(upload.FileName).ToLower();


            var path = Path.Combine(
                _env.WebRootPath, "upload/img",
                fileName);

            using (var stream = new FileStream(path, FileMode.Create))
            {
                upload.CopyTo(stream);

            }

            var url = $"{"/upload/img/"}{fileName}";

            return Json(new { uploaded = true, url });
        }

2.CKEditor config dosyasından resmin yükleneceği adresin tanımlanması

Sonrasında wwwroot adresine eklediğimiz ckeditor klasörüne girip config.js dosyasını açıp aşağıdaki düzenlemeyi yapıyoruz.

CKEDITOR.editorConfig = function( config ) {
    config.filebrowserImageUploadUrl = '/Home/UploadImage'; //Resmin yükleneceği site adresi
    config.fileTools_requestHeaders = { 'X-CSRFToken': '{{ @GetAntiXsrfRequestToken() }}' };
    config.removePlugins = 'easyimage,cloudservices';//Easyimage, cloudervices eklentisini kapatmak için bu kod satırını ekleyin
};

3.CKEditor config dosyasının sayfamızda tanımlanması

En son ise CKEditor’un olduğu sayfadaki

<script>
CKEDITOR.replace(‘editor1’);
</script>

olan script kodumuzu

<script>
CKEDITOR.replace(‘editor1’, {
customConfig: ‘/ckeditor/Config.js’
});
</script>

olarak değiştiriyoruz.

4.Küçük bir güvenlik önlemi

Controller’a eklediğimiz methoddaki [ValidateAntiForgeryToken] olan attribute nedeniyle Razor sayfamızın herhangibir yerine aşağıdaki kodu eklemeyi unutmayalım.

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@functions{
public string GetAntiXsrfRequestToken()
{
return Xsrf.GetAndStoreTokens(Context).RequestToken;
}
}

4.Test İşlemi

Tüm adımları eksiksiz yerine getirdiyseniz CKEditor’ümüz artık resim yükleme özelliğiyle hazır demektir. Şimdi test ediyoruz.

İyi çalışmalar.