最近在弄CKeditor富文字編輯器，到上傳圖片的配置這一步時，發現網上的教程都不適合我現在的版本，於是決定自己上官網看相關的文件，好在有瀏覽器幫我自動翻譯了網頁，很快我便找到了圖片上傳的配置，下面是相關教程。

第一步：下載CKeditor（這不廢話嗎？），本文針對的版本是CKeditor-4.9.2，其他版本沒有試過。

第二步：解壓下載好的壓縮包，放到自己的應用目錄下，在config.js的CKEDITOR.editorConfig = function( config ) {}中加入如下全域性配置：

/*將編輯器的語言設定為中文*/
config.language = 'zh-cn';
/*去掉圖片預覽框的文字*/
config.image_previewText = ' ';
/*開啟工具欄“影象”中檔案上傳功能，後面的url為圖片上傳要指向的的action或servlet*/
config.filebrowserImageUploadUrl= "/blog/uploadEditorImage";
 

第三步：在要使用CKeditor的html中引入如下js

<script src="ckeditor-4.9.2/ckeditor.js" type="text/javascript" charset="utf-8"></script>
<script src="ckeditor-4.9.2/config.js" type="text/javascript" charset="utf-8"></script>

第四步：在html中使用CKeditor

<textarea id="content">Hello World</textarea>
		
<script type="text/javascript">
    CKEDITOR.replace('content',{
	removePlugins:'elementspath,resize',
	codeSnippet_theme: 'zenburn',
	height:'300'
    });
</script>
 

第五步：伺服器端（Java）上傳圖片配置，這裡要特別注意，此版本的CKeditor在圖片上傳成功後不再使用window.parent.CKEDITOR.tools.callFunction了，而是返回一個json字串物件：

    上傳成功時，返回：

        {

            "uploaded":1,

            "fileName":"圖片名稱",

            "url":"圖片訪問路徑"

        }

    上傳失敗時，返回

            {

                    "uploaded":0,

            "error":{

                "message":"失敗原因"

            }

            }

以下伺服器端的完整程式碼

	@RequestMapping("/uploadEditorImage")
	public void uploadEditorImage(HttpServletResponse response, HttpServletRequest request,@RequestParam("upload")MultipartFile file) {
		PrintWriter out = null;
		String imageUrl = "";
		String msg = "";
		String fileName = "";
		JSONObject result = new JSONObject();
		try {
			out = response.getWriter();
			String imagesViewUrlPrefix = CommonResource.get("imagesViewUrlPrefix");
			String fileType = FileUtil.getFileSuffixFromContentType(file.getContentType());
			fileName = UUIDFactory.getUUID() + "." + fileType;
			BaseResult uploadResult = FileUtil.uploadFile(fileName, file.getInputStream());
			if(uploadResult.getCode() == ResultType.CODE_NORMAL) {
				String imagePath = (String) uploadResult.getData();
				imageUrl = imagesViewUrlPrefix + imagePath;
			}else {
				msg = "檔案上傳失敗";
			}
		} catch (Exception e) {
			e.printStackTrace();
			logger.error("富文字編輯器上傳圖片時發生異常", e);
			msg = "伺服器異常";
		} finally {
			if(!StringUtil.isNullOrEmpty(msg)) {
				//上傳失敗
				result.put("uploaded", 0);
				JSONObject errorObj = new JSONObject();
				errorObj.put("message", msg);
				result.put("error", errorObj);
			}else {
				//上傳成功
				result.put("uploaded", 1);
				result.put("fileName", fileName);
				result.put("url", imageUrl);
			}
			out.println(result.toJSONString());
		}