آموزش استفاده از CKEditor 5 در asp.net cere + اپلود عکس

سلام 🖐️

قطعا در پروژه های تحت وب خودتون نیاز به یک ویرایشگر متن پیشرفته مثل ckeditor دارید

ckeditor 4 که بسیار محبوب و پراستفاده هم هست آموزش های زیادی ازش وجود داره و بعضی از دوستان حتی اومدن تو عنوان مقاله هاشون نوشتن آموزش ckeditor 5 اما در عمل ورژن 4 رو آموزش دادن

قطعا ckeditor 5 امکانات بیشتری نسبت به ورژن های قبلی خودش داره و اگه قصد برنامه نویسی یک وب سایت پیشرفته رو با asp.net core دارید قطعا به کارتون میاد

و اما بریم سراغ اصل مطلب ورژن 5 نسبت به ورژن 4 خیلی متفاوت هست و به همین دلیل قصد داریم آموزش از اون رو برای شما عزیزان آماده کنیم

دانلود ckeditor 5 و شخصی سازی آن

به وب سایت  (ckeditor.com ) وارد شوید و از منو بالا و بر روی ایتم ckeditor 5 وارد منو Online Builder شوید

بعد از انتخاب گزینه online builder با عنواع مدل های ckeditor برخورد میکنید که بنا بر نیاز خود یکی را انتخاب کنید

ما در این آموزش از گزینه Classic استفاده خواهیم کرد

بعد از انتخاب گزینه کلاسیک باید اپشن های ckeditor خود را انتخاب کنید

بعد از انتخاب اپشن ها و ساخت ckeditor شخصی سازی شده وقت آن میرسد که از ckeditor 5 در asp.net core استفاده کنیم

دانلود ckeditor 5 مخصوص پروژه های من😁

استفاده از ckeditor 5 در پروژه .net core

اول از همه باید یک پروژه از نوع asp.net core ایجاد کنیم

فایل ckeditor را از حالت فشرده خارج کرده و محتویات را در فایلی با نام ckeditor5 بگذارید

سپس در یکی از View های خود (ویو مد نظر) یک المان textarea به شکل زیر ایجاد کنید و id آن را برابر body بگذارید

<textarea id="body"></textarea>

بعد از ساخت textarea زمان افزودن کد های جاوااسکریپت مربوط به ckeditor فرا می رسد

در انتها ویو خود کد های زیر را قرار دهید

 <script src="/ckeditor5/build/ckeditor.js"></script>
    <script>
        ClassicEditor
            .create(document.querySelector('#body'),
                {
                    ckfinder: {
                        // Upload the images to the server using the CKFinder QuickUpload command.
                        uploadUrl: '/UploadImage'
                    },
                    htmlSupport: {
                        allow: [
                            {
                                name: /.*/,
                                attributes: true,
                                classes: true,
                                styles: true
                            }
                        ]
                    }
                })
            .catch(error => { console.error(error); });
    </script>

پیشنهاد:

سورس کد سیستم مدیریت سلف سرویس به زبان سی شارپ 

توضیحات کد:

  ClassicEditor
            .create(document.querySelector('#body'),
                {

تبدیل textarea با ای دی body به یک ckeditor

  ckfinder: {
                        // Upload the images to the server using the CKFinder QuickUpload command.
                        uploadUrl: '/UploadImage'
                    },

تنظیمات اپلود عکس (در ادامه مقاله به بخش مربوط به سرور اپلود عکس در Ckeditor نیز آموزش داده خواهد شد)

htmlSupport: {
                        allow: [
                            {
                                name: /.*/,
                                attributes: true,
                                classes: true,
                                styles: true
                            }
                        ]
                    }

قابلیت افزودن کد های html و css به محتوا ckeditor مانند تگ های ویدیو و صوت

پیشنهاد: جهت یادگیری برنامه نویسی وب با سی شارپ دوره

آموزش Asp.net core 6

را مشاهده کنید

اپلود عکس در ckeditor 5

 [HttpPost]
        [Route("UploadImage")]
        public async Task<JsonResult> UploadImage([FromForm] IFormFile upload)
        {
            if (upload.Length <= 0) return null;

            //your custom code logic here

            //1)check if the file is image

            //2)check if the file is too large

            //etc

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

            //save file under wwwroot/CKEditorImages folder

            var filePath = Path.Combine(
                Directory.GetCurrentDirectory(), "wwwroot/CKE_Images",
                fileName);

            using (var stream = System.IO.File.Create(filePath))
            {
                await upload.CopyToAsync(stream);
            }

            var url = $"{"/CKE_Images/"}{fileName}";

            var success = new uploadsuccess
            {
                Uploaded = 1,
                FileName = fileName,
                Url = url
            };

            return new JsonResult(success);
        }

در یکی از controller های خود این کد را قرار دهید (ترجیحا home)

پایان.