1、最近想用下CKEditor5 新特性，但发现上传不上去，经调研官网调研如下：
1、首先引入js
/ckeditor5/17.0.0/classic/
2、html相关代码
<!DOCTYPE html>
<html xmlns="http:///1999/xhtml">
<head>
<script src="/ckeditor5/17.0.0/classic/"></script>
</head>
<body>
<div id="editor">
</div>
<script>
ClassicEditor.create( document.querySelector( '#editor' ), {
ckfinder:{
//后端URL
uploadUrl: '/upload'
},
toolbar: {
items: [ 'heading','|','bold','italic','link','bulletedList','numberedList','|','indent','outdent','|','imageUpload','blockQuote',
'insertTable','mediaEmbed','fontBackgroundColor','fontColor','fontSize','code','codeBlock','alignment','horizontalLine','
todoList','undo','redo']
},
language: 'zh-cn',
image: {
toolbar: [
'imageTextAlternative','imageStyle:full','imageStyle:side'
]
},
table: {
contentToolbar: [
'tableColumn','tableRow','mergeTableCells'
]
},
licenseKey: '',
} )
.then( editor => {
window.editor = editor;
} )
.catch( error => {
} );
</script>
</body>
</html>
3、后端相关代码（Java为例）
//这里必须是POST，或者自己修改CKEditor5 js源代码
@RequestMapping(value = {"upload", "upload/"}, method = RequestMethod.POST)
@ResponseBody
//接受参数不能用file 用upload js 源代码已经写死
public Map<String, String> uploadAdmin(@RequestParam("upload") MultipartFile file){
log.debug("Handling image file upload, name={}, origName={}, size={},", file.getName(),
file.getOriginalFilename(), file.getSize());
if (file.isEmpty()) {
log.error("error");
}
//固定值
Map<String, String> map = Maps.newConcurrentMap();
map.put("uploaded", "1");
map.put("url", "图片URL");
//必须这样{"uploaded":"1","url", "图片URL"} 或者自己修改CKEditor5 js源代码
return map;
}