ckeditor相關配置和應用可以參考：https://blog.csdn.net/sayoko06/article/details/81450441

第一步：引入ckeditor的js

<td>
    <textarea name="description" id="description"/></textarea>
</td>

<!-- 富文字編輯器 -->
<script th:src="@{/plugins/ckeditor/ckeditor.js}"></script>
<script type="text/javascript">
    window.onload = function(){
        	CKEDITOR.replace( 'description',{
			filebrowserImageUploadUrl : '/xxx/uploadimg',//點選上傳檔案
			uploadUrl : '/xxx/uploadimg',//貼上圖片上傳
			language : 'zh-cn'
		});
    };
</script>
 

 我下載的ckeditor引入好之後長這個樣：

 第二步：上傳圖片

此時我們點選上傳圖片或者直接截圖在文字框內進行貼上，即可觸發“xxx/uploadimg”的方法，進入到後臺Controller進行圖片的上傳。

後臺Controller的具體寫法：

注意：返回到前端一定要返回JSONObject 格式，上傳成功時具體返回資料  { "uploaded":1, "url":"圖片訪問路徑"}

          ，前端根據url在文字框內插入一個<img>標籤，src就是你的url地址，uploaded：1代表上傳成功

/**
 * 上傳文章圖片
 */
@RequestMapping("/uploadimg")
@ResponseBody
public JSONObject uploadimg(@RequestParam("upload") MultipartFile file, HttpServletRequest request, HttpSession session, HttpServletResponse response) {
		JSONObject jsonObject = new JSONObject();

		try {
			/* 上傳檔案到伺服器 ，得到返回的完整url */
			String url = super.uploadFile(file);

			/* 動態獲取系統配置的ftp地址字首 */
			String ftpurl = ftpConfig.getFileserverUrl();
			url = ftpurl + url;// 字首+相對路徑拼完整url

			jsonObject.put("uploaded", 1);
			jsonObject.put("fileName", file.getName());
			jsonObject.put("url", url);
		} catch (IOException e) {
			e.printStackTrace();
		}
		return jsonObject;
	}
 

 上傳成功後長這個樣：

 嗯，圖的確是編輯，不要在意這些細節，上傳完成後確實也是這個樣，雙擊圖片可以進行寬高設計、url地址的修改等

 很好，這個時候，問題就來了，可以點選富文字編輯器左上角的檢視 原始碼 ，發現不過是一堆html標籤嘛，相當於文字值，直接點儲存就可以了...

錯！

實際上點 儲存 ，後臺會報錯，說是你有非法字元，仔細檢視發現是有反斜槓。

就是這貨  \

那怎麼辦呢？繼續往下看

 第三步：js內的上傳

最開始我直接把content丟進vue的物件（cmsArticle）裡，通過post的方式丟給後臺，後來就報錯了。除錯過程中，打印出來的資料全是正常的，沒有發現反斜槓！

在我除錯了大半天之後，發現ajax將物件傳到後臺時會做一次JSON.stringify()意思是把json轉成json字串，所以我手動把content轉成字串：

JSON.stringify(content);

再列印，發現url等資訊果然被加上了反斜槓

知道了問題就好辦了

用replace()把反斜槓替換成空

var contentJSON = JSON.stringify(content);//文章內容
contentJSON = contentJSON.replace(/\\/g,"");//格式化掉轉成json後的反斜槓。注意此處是雙反斜槓，逗號左邊沒有雙引號。鬼知道我趟了多少坑...TAT

這個時候還不能把它還給物件傳到後端，其中還有特殊字元，再將其進行加碼操作，後端接收後再解碼就好了

百度說要加碼兩次，但我的專案實際操作中加碼一次就好了~ 如果出錯請多試幾次。

//取得富文字編輯器文字
var editorIframe = document.getElementsByTagName('iframe')[0];//iframe
var editorBody = editorIframe.contentDocument.body.innerHTML;//body
vm.cmsArticle.content = editorBody;
			
if(editorBody == "<p><br></p>"){
    layer.msg("請輸入文章內容！",{icon:0,time:2000});
    return false; 
}
			
var contentJSON = JSON.stringify(vm.cmsArticle.content);//文章內容
contentJSON = contentJSON.replace(/\\/g,"");//格式化掉轉成json後的反斜槓
/* 	實際測試中發現：
 * 	JSON.stringify()時，
 * 	首尾多出了雙引號，刪除之 */
contentJSON = contentJSON.substr(1);//刪除第一個字元
contentJSON = contentJSON.substr(0, contentJSON.length-1);//刪除最後一個字元
			
contentJSON = encodeURIComponent(contentJSON);//對特殊字元進行加碼，便於傳參
vm.cmsArticle.content = contentJSON;//替換為加碼後的文章內容
			
$.SaveForm({
    url: '/xxx/save',
   	param:vm.cmsArticle,
   	success: function(data) {
   		$.currentIframe().vm.load();
   	}
});

第四步：Controller內的儲存

/**
 * 新增
 * @param cmsArticle
 * @return
 */
	@SysLog("新增內容管理-文章管理")
	@RequestMapping(value = "/save", method = RequestMethod.POST)
	public R save(@RequestBody CmsArticleEntity cmsArticle) {
		try {
			String content = cmsArticle.getContent();
			// 對加碼過的文章內容，進行解碼
			content = java.net.URLDecoder.decode(content, "UTF-8");
			// 替換為解碼後的的文章內容
			cmsArticle.setContent(content);
		} catch (UnsupportedEncodingException e) {
			e.printStackTrace();
		}
        /* 進行新增操作 */
		return cmsArticleService.saveCmsArticle(cmsArticle);
	}

【總結】 突然接觸到新的富文字編輯器，有些不熟悉，不知道正確的用法。出錯了只能自己慢慢摸索，不過這也是進步的過程，趟過的坑越多，經驗也變得愈加深厚。加油！