CKEditor 4 和 ASP.NET 核心 MVC：如何在 ckeditor 中更改图像 url

Question

我正在为博客使用 CKEditor 4 post。我正在上传图片并返回图片 url。每当我在我的 ckeditor 上单击 SOURCE 时，我都会看到 "https://localhost:5001/88e4174d-8d8f-b041-8af0-9503a0ec7dfd" width="1776" />" 我如何将来源更改为 url 返回的图像？

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 ?

我用下面的代码示例做了测试，在我这边效果很好，你可以参考。

在查看页面

<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>
}

注意: 为 CKEditor

设置 filebrowserImageUploadUrl property 和自定义 ImageUpload Url

上传图片操作

[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);
}

测试结果

1) select 并上传本地文件

2) CKEditor中的图片来源

CKEditor 4 和 ASP.NET 核心 MVC：如何在 ckeditor 中更改图像 url

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

c#

asp.net-core-mvc

ckeditor4.x