ClassicEditor.create(document.querySelector('#News_Body'),
{
language: 'fa',
ckfinder: {
uploadUrl: 'URL'
}
}).catch(error =>
{
console.error(error);
});
我有一个 Razor 页面 我需要此页面 通过 CKEditor 将图像上传到服务器 给我一个示例
如何使用asp.net core razor Pages在CKEditor 5中上传图像
您可以参考以下示例来实现上述需求。
JS code
@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; }
}
测试结果
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)