CKEditor 4 and ASP.NET core MVC : How to change image url in ckeditor

Question

I'm using CKEditor 4 for blog post. I'm uploading image and returning the image url. Whenever i click SOURCE on my ckeditor, i see "https://localhost:5001/88e4174d-8d8f-b041-8af0-9503a0ec7dfd" width="1776" />" how do i change the source to the image url returned ?

Answer 1

Whenever i click SOURCE on my ckeditor, i see "https://localhost:5001/88e4174d-8d8f-b041-8af0-9503a0ec7dfd" width="1776" />" how do i change the source to the image url returned ?

I did a test with following code sample, which work well on my side, you can refer to it.

In view page

<textarea name="blog_input"></textarea>

@section scripts{

    <script src="https://cdn.ckeditor.com/4.10.1/standard/ckeditor.js"></script>
    <script>
        CKEDITOR.replace('blog_input', {
            filebrowserImageUploadUrl: '/Home/UploadImage'
        });
    </script>
}

Note: set filebrowserImageUploadUrl property with custom ImageUpload Url for CKEditor

UploadImage action

[HttpPost]
public async Task<ActionResult> UploadImage(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/CKEditorImages",
        fileName);

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

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

    var successMessage = "image is uploaded";

    dynamic success = Newtonsoft.Json.JsonConvert.DeserializeObject("{ 'uploaded': 1,'fileName': \"" + fileName + "\",'url': \"" + url + "\", 'error': { 'message': \"" + successMessage + "\"}}");
    return Json(success);
}

Test Result

1) select and upload local file

2) source of image in CKEditor