C# Mvc部署CKEditor5插件，包含传图

一、具体问题

1、开发时，在使用CKEditor5富文本编辑器插件时，发现部署后，上传图片功能无效

二、问题解析

    CKEditor5官方文档的示例中，并没有图片上传的具体说明，官方文档也是中文，个人英语渣，实在是解读不能。在网上查找之后，多是一些php，vue，java之类的答案。解析后得到图片上传的大致流程。

        CKEditor5在点击图片，选择后，会根据配置的"uploadUrl”去上传图片，再依据上传返回的结果，展示图片。因此，第一步，我先设置uploadUrl

ClassicEditor.create(document.querySelector('#editor'), {
        ckfinder: {
            uploadUrl: "https://localhost:44365//Manager/UploadImage"//图片上传路径
        },
        /*toolbar: ['heading', '|', 'bold', 'italic', 'link'],*/
    }).then(editor => {
        window.editor = editor;
    }).catch(err => {
        console.error(err.stack);
    });

注意：从php的代码中得知，这里设置的uploadUrl，应该是全网络路径的，只写控制器/方法是请求不到的。这是因为CKEditor5上传图片时触发的是直接请求。

        而后，在对应的后台控制器中，加入图片上传保存。

public ActionResult UploadImage()
        {
            var files = Request.Files;
            var file = files.Get("upload");
            if (file == null)
            {
                //没上传文件
                return Json(new
                {
                    uploaded = 0,
                    fileName = file.FileName,
                    error = new
                    {
                        number = 201,
                        message = "没有上传图片"
                    }
                });
            }
            var fileName = Guid.NewGuid() + Path.GetExtension(file.FileName);
            var filePath = AppDomain.CurrentDomain.BaseDirectory + Path.Combine("Images", "editors", fileName);
            file.SaveAs(filePath);
            var url = Configs.GetValue("base_url") + Path.Combine("Images", "editors", fileName);
            return Json(new
            {
                uploaded = 1,
                url,
                fileName
            });
        }

这里的获取文件方式，是因为CKEditor5上传图片请求统一的名字（也就是key）为“upload”，所以我通过这种方式去获取。同时保存文件的filepath指向的是具体的路径。在保存完成后，返回的url则是图片保存后的网络路径，这样才能时站点在部署后可以正常访问。

三、备注项

        CKEditor5的图片上传返回结果是固定两种

        

//上传成功
{
    "uploaded":1,
    "url":"图片地址(如：/upload/xxx/abc.jpg)",
    "fileName":"图片名称（如：a.jpg）"
}

//上传失败
{
    "uploaded":0,
    "fileName":"abc.jpg",
    "error":{
        "number":201,
        "message":"图片超大，限制宽度500px"
    }
}