【CKeditor】使用SpringMVC处理CKeditor上传图片

0、了解CKeditor的相关文件以及引入js

引入ckeditor的js

<script type="text/javascript" src="<c:url value="/resources/js/ckeditor/ckeditor.js" />"></script>

1、开启CKeditor上传图片功能

官方说明

简明的说，就是只需要在创建CKeditor时，添加以下两个配置：

在用CKEDITOR.replace()中配置

filebrowserBrowseUrl: '自定义的请求',
filebrowserUploadUrl: '自定义的请求'

CKEDITOR.replace('editor',{
    filebrowserBrowseUrl: '/browser/browse.php',
    filebrowserUploadUrl: '/uploader/upload.php'
});

或,在config.js添加如下配置

config.filebrowserBrowseUrl='自定义的请求', config.filebrowserUploadUrl='自定义的请求'

2、编写自定义的请求

@RequestMapping(value="/ckeditor/uploadFile")
	public void uploadFile(@RequestParam("upload") MultipartFile multipartFile,HttpServletRequest request,HttpServletResponse response){
		response.setContentType("text/html;charset=UTF-8");
//		response.setHeader("X-Frame-Options", "SAMEORIGIN");
		String CKEditorFuncNum = request.getParameter("CKEditorFuncNum");
		PrintWriter out;
		String s = "<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction("+CKEditorFuncNum+", '"+multipartFile.getOriginalFilename()+"');</script>";
		try {
			out = response.getWriter();
			out.print(s);
			out.flush();
		} catch (IOException e) {
			e.printStackTrace();
		}
		
		
	}

问题及解决方案：

1、解决ckeditor上传，返回时显示js代码不显示图片的问题

问题解决：

未配置response的ContentType

response.setContentType("text/html;charset=UTF-8");

解决ckeditor上传，返回时显示js代码不显示图片的问题

2、跨域问题

chrome console log:

Refused to display 'http://localhost:8080/webcnmain/ifacompany/article/uploadArticleImageForCkeditor?CKEditor=articleContentZH&CKEditorFuncNum=1&langCode=zh-cn' in a frame because it set 'X-Frame-Options' to 'DENY'.

解决方法

response.setHeader("X-Frame-Options", "SAMEORIGIN");

3.spring 上传文件未配置相关的视图解析器

java.lang.IllegalArgumentException: Expected MultipartHttpServletRequest: is a MultipartResolver configured?

来源：oschina

链接：https://my.oschina.net/u/219009/blog/295636

标签

ckeditor

springmvc

图片上传