如何在 CKEditor 5 中使用 asp.net core razor Pages 上传图片答案

【问题标题】：How upload image in CKEditor 5 With asp.net core razor Pages如何在 CKEditor 5 中使用 asp.net core razor Pages 上传图片
【发布时间】：2021-01-06 16:31:08
【问题描述】：

ClassicEditor.create(document.querySelector('#News_Body'),
{
  language: 'fa',
  ckfinder: {
    uploadUrl: 'URL'
  }
}).catch(error =>
  {
    console.error(error);
  });

我有一个 Razor 页面需要这个页面通过 CKEditor 将图像上传到服务器给我一个示例

【问题讨论】：

标签： javascript asp.net asp.net-core razor-pages

【解决方案1】：

CKEditor 5中如何使用asp.net core razor Pages上传图片

您可以参考以下示例来实现上述要求。

JS 代码

@section scripts{
    <script src="https://cdn.ckeditor.com/ckeditor5/22.0.0/classic/ckeditor.js"></script>

    <script>
        ClassicEditor
            .create(document.querySelector('#News_Body'),
                {
                    language: 'fa',
                    ckfinder: { uploadUrl: '/index/UploadImage' }
                })
            .catch(error => { console.error(error); }); 
    </script>
}

页面模型类和处理程序

[IgnoreAntiforgeryToken]
public class IndexModel : PageModel
{
    private readonly ILogger<IndexModel> _logger;

    public IndexModel(ILogger<IndexModel> logger)
    {
        _logger = logger;
    }

    public void OnGet()
    {

    }

    public async Task<JsonResult> OnPostUploadImage([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/CKEditorImages",
            fileName);

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

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

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

        return new JsonResult(success);
    }
}

public class uploadsuccess
{
    public int Uploaded { get; set; } 
    public string FileName { get; set; }
    public string Url { get; set; }
}

测试结果

【讨论】：

您好，我是按照您的代码操作的，但是当我点击确定按钮时，显示错误cannot upload file。我该如何解决这个问题？@Fei Han

【解决方案2】：

上述解决方案对我有用。我只是在 ckFinder 中更改了 PATH

@section scripts{
    <script src="https://cdn.ckeditor.com/ckeditor5/22.0.0/classic/ckeditor.js"></script>

    <script>
        ClassicEditor
            .create(document.querySelector('#News_Body'),
                {
                    language: 'fa',
                    ckfinder: { uploadUrl: '/index/?handler=UploadImage' }
                })
            .catch(error => { console.error(error); }); 
    </script>
}

【讨论】：