【CKeditor】使用SpringMVC處理CKeditor上傳圖片

0、瞭解CKeditor的相關文件以及引入js

    引入ckeditor的js

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

一、開啓CKeditor上傳圖片功能

官方說明

簡明的說，就是隻須要在建立CKeditor時，添加如下兩個配置：

在用CKEDITOR.replace()中配置

filebrowserBrowseUrl: '自定義的請求',
filebrowserUploadUrl: '自定義的請求'

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

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

config.filebrowserBrowseUrl='自定義的請求', config.filebrowserUploadUrl='自定義的請求' 

二、編寫自定義的請求

@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();
		}
		
		
	}

問題及解決方案：

一、解決ckeditor上傳，返回時顯示js代碼不顯示圖片的問題

問題解決：

未配置response的ContentType

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

解決ckeditor上傳，返回時顯示js代碼不顯示圖片的問題  

二、跨域問題

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?