JavaScript
x
11
11
1
ClassicEditor.create(document.querySelector('#News_Body'),
2
{
3
language: 'fa',
4
ckfinder: {
5
uploadUrl: 'URL'
6
}
7
}).catch(error =>
8
{
9
console.error(error);
10
});
11
I Have A Razor Page Ineed this Page UPload image to server by CKEditor give me a sample
Advertisement
Answer
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
JavaScript
1
14
14
1
@section scripts{
2
<script src="https://cdn.ckeditor.com/ckeditor5/22.0.0/classic/ckeditor.js"></script>
3
4
<script>
5
ClassicEditor
6
.create(document.querySelector('#News_Body'),
7
{
8
language: 'fa',
9
ckfinder: { uploadUrl: '/index/UploadImage' }
10
})
11
.catch(error => { console.error(error); });
12
</script>
13
}
14
Page model class and handler
JavaScript
1
60
60
1
[IgnoreAntiforgeryToken]
2
public class IndexModel : PageModel
3
{
4
private readonly ILogger<IndexModel> _logger;
5
6
public IndexModel(ILogger<IndexModel> logger)
7
{
8
_logger = logger;
9
}
10
11
public void OnGet()
12
{
13
14
}
15
16
public async Task<JsonResult> OnPostUploadImage([FromForm]IFormFile upload)
17
{
18
if (upload.Length <= 0) return null;
19
20
//your custom code logic here
21
22
//1)check if the file is image
23
24
//2)check if the file is too large
25
26
//etc
27
28
var fileName = Guid.NewGuid() + Path.GetExtension(upload.FileName).ToLower();
29
30
//save file under wwwroot/CKEditorImages folder
31
32
var filePath = Path.Combine(
33
Directory.GetCurrentDirectory(), "wwwroot/CKEditorImages",
34
fileName);
35
36
using (var stream = System.IO.File.Create(filePath))
37
{
38
await upload.CopyToAsync(stream);
39
}
40
41
var url = $"{"/CKEditorImages/"}{fileName}";
42
43
var success = new uploadsuccess
44
{
45
Uploaded = 1,
46
FileName = fileName,
47
Url = url
48
};
49
50
return new JsonResult(success);
51
}
52
}
53
54
public class uploadsuccess
55
{
56
public int Uploaded { get; set; }
57
public string FileName { get; set; }
58
public string Url { get; set; }
59
}
60
Test Result