ckeditor富文本编辑器上传图片的具体步骤

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

【总结】 突然接触到新的富文本编辑器，有些不熟悉，不知道正确的用法。出错了只能自己慢慢摸索，不过这也是进步的过程，趟过的坑越多，经验也变得愈加深厚。加油！