ckeditor富文本编辑器上传图片的具体步骤
ckeditor相关配置和应用可以参考：https://blog.csdn.net/sayoko06/article/details/81450441
第一步：引入ckeditor的js
我下载的ckeditor引入好之后长这个样：
第二步：上传图片
此时我们点击上传图片或者直接截图在文本框内进行粘贴，即可触发“xxx/uploadimg”的方法，进入到后台Controller进行图片的上传。
后台Controller的具体写法：
注意：返回到前端一定要返回JSONObject 格式，上传成功时具体返回数据 { "uploaded":1, "url":"图片访问路径"}
，前端根据url在文本框内插入一个标签，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 == "
"){
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);
}【总结】 突然接触到新的富文本编辑器，有些不熟悉，不知道正确的用法。出错了只能自己慢慢摸索，不过这也是进步的过程，趟过的坑越多，经验也变得愈加深厚。加油！