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.

Image for post

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.

Image for post

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

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.

Image for post
Image for post
Image for post

İyi çalışmalar.

CEVAP VER

Please enter your comment!
Please enter your name here