ClassicEditor.create(document.querySelector('#News_Body'),
{
language: 'fa',
ckfinder: {
uploadUrl: 'URL'
}
}).catch(error =>
{
console.error(error);
});
I Have A Razor Page Ineed this Page UPload image to server by CKEditor give me a sample
How upload image in CKEditor 5 With asp.net core razor Pages
You can refer to the following example to achieve above requirement.
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>
}
Page model class and handler
[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; }
}
Test Result