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

Question

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

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

Answer 1

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

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

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

测试结果

Answer 2

上述解决方案对我有用。我刚刚更改了 ckFinder 中的路径

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

Answer 3

先生，我已在我的 Razor 页面上尝试过此代码。当页面为 Index.cshtml 时它工作正常，但它在任何其他页面中不起作用。此外，我想在我的 CRUD 输出页面中使用它。因此，请指导解决方案并强制执行。 谢谢你。等待您的回复。