---

化石原创文章，转载请注明来源并保留原文链接

---

本文适用于使用CKEditor5的官方默认向导生成的CKEditor5，但也可能对其他方式的有同样的意义。

对于上传图片这一块，这个默认的带上了ckfinder作为前端的上传插件。

假设我们的上传api，url是：/api/upload

那么，客户端只要这么配置：

var uploadApi = document.location.origin + "/api/upload";

ClassicEditor.create( document.querySelector( '#article-editor' ), {

				toolbar: {
					items: [
						'heading',
						'|',
						'bold',
						'italic',
						'link',
						'bulletedList',
						'numberedList',
						'|',
						'indent',
						'outdent',
						'|',
						'imageUpload',
						'blockQuote',
						'insertTable',
						'mediaEmbed',
						'undo',
						'redo'
					]
				},
				language: 'en',
				image: {
					toolbar: [
						'imageTextAlternative',
						'imageStyle:full',
						'imageStyle:side'
					]
				},
				ckfinder: {
                    uploadUrl: uploadApi,
				},
				table: {
					contentToolbar: [
						'tableColumn',
						'tableRow',
						'mergeTableCells'
					]
				},
				licenseKey: '',

			} )
			.then( editor => {
				window.editor = editor;
			} )
			.catch( error => {
				console.error( 'Oops, something gone wrong!' );
				console.error( 'Please, report the following error in the https://github.com/ckeditor/ckeditor5 with the build id and the error stack trace:' );
				console.warn( 'Build id: k2i30chx32nf-8o65j7c6blw0' );
				console.error( error );
			} );

其实对于前端，就是给ckfinder配上一个url，就这么简单。

后台这块ASP.net，Java，PHP官方有文档，不过说实话一点都不友好。所以自给自足：

    @PostMapping("/api/upload")
    private String uploadImage(@RequestParam MultipartFile[] upload) {
        String originalFileName = upload[0].getOriginalFilename();
        String fileExtensionName = originalFileName.substring(originalFileName.lastIndexOf("."), originalFileName.length()).toLowerCase();;//上传图片的文件扩展名

        String newFileName = java.util.UUID.randomUUID().toString()+fileExtensionName;
        String uploadPath = imageUploaPath;
        String imageUrl = imageUploaPath + newFileName;
        File pathFile = new File(uploadPath);
        if (!pathFile.exists()) { // 如果路径不存在，创建
            pathFile.mkdirs();
        }
        try {
            File dest = new File(imageUrl);
            upload[0].transferTo(dest);
        } catch (IOException e) {

        }

        JSONObject jo = new JSONObject();
        jo.put("uploaded", true);
        jo.put("url", newFileName);

        return jo.toJSONString();
    }

代码是SpringBoot工程萃取出来的，已经删去了不必要的代码。尽量只展现这部分的有效信息。

最有用的信息是返回值格式：ckeditor5希望的格式其实是这样的json

{
    "uploaded": true,
    "url": "xxxxx"
}

这个是成功的返回格式。如果错误，则是下面：

 {
    "uploaded": false,
    "error": {
        "message": "xxxx"
    }
} 

代码中，imageUploadPath是@Autowired来的

@Value("${web.upload-path}")
private String imageUploaPath;

在application.properties是这样：

web.upload-path=f:/imageUpload/
spring.mvc.static-path-pattern=/**
spring.resources.static-locations=classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,file:${web.upload-path}

那个JSONObject用了Maven里面的json-simple

<!-- https://mvnrepository.com/artifact/com.googlecode.json-simple/json-simple -->
<dependency>
    <groupId>com.googlecode.json-simple</groupId>
    <artifactId>json-simple</artifactId>
    <version>1.1.1</version>
</dependency>

---

化石原创文章，转载请注明来源并保留原文链接

---