asp.net-corerazorckeditorckeditor5ckeditor4.x

Loading an image using CKEditor takes a long time

guys, I'm having this problem. Using Net Core 6 with Razor.

I use CKEditor 5 and when I add a post all flies, but as soon as I add a picture, and the more the slower it becomes, my post begins to load instead of a second and a half where it is 15 seconds. If I go in and delete pictures, everything works instantly again.

Can you tell me how I can adjust, what I can adjust or optimize to get rid of such delays?

I Added in _Layout.cshtml

<head> 
    <script src="~/ckeditor/build/ckeditor.js"></script> 
</head>

In my Post.cshtml I added this script

<script>
    ClassicEditor
        .create(document.querySelector('#editor'))
        .catch(error => {
            console.error(error);
        });
</script>

Everything works great, no problems even when I add embed YouTube URL, no problems. But when I add a picture there is a delay of 15 seconds.

I can suppose that CKEditor 5 when upload an image, it's processed and stored on the server, which can take some time depending on the image size and server processing capabilities.

CKEditor saves to the database like this:

enter image description here

How can I improve it?

Solution

  • If you want faster to load image in Ckeditor don't save image and file in database

    First add upload action like this to controller

    [Route("file-upload")]
[HttpPost]
public  IActionResult UploadFile(IFormFile upload)
{
   if (upload.Length <= 0)
       return null;
   string fileName = DateTime.Now.ToString("yyyy-MM-dd-hh-mm-ss-fff");
   fileName += Path.GetExtension(upload.FileName);
   string filePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "upload", fileName);
   using (var stream=new FileStream(filePath,FileMode.Create))
   {
       upload.CopyTo(stream);
   }
   string url = $"{"/upload/"}{fileName}";
   return Json(new { uploaded = true, url });


}

    Next add this code to Ckeditor config file

    CKEDITOR.editorConfig = function( config ) {
    //This bottom codes help to upload file with Ckeditor
    config.filebrowserImageUploadUrl = "/file-upload";
    config.filebrowserUploadUrl = "/file-upload";
};

    for Ckeditor5 we need some changes in your code

     ClassicEditor.create(document.querySelector('#content'),
 {
     //use ckfinder to upload image
     ckfinder: { uploadUrl:'/file-upload'}
 });