ckeditor 图片上传填坑记
今天一天的主要做了ckeditor 图片上传,为了防止以后再遇到,记录一下经验
注:使用CKEditor版本为js版本的CKEditor 4.11.2 ,所有配置均参考自CKEditor官方API:https://docs.ckeditor.com/,以及实践经验
一、快速使用
CKEditor官网下载js插件
进入官网https://ckeditor.com/ckeditor-4/download/点击Release notes选择4.11.2 版本点击Download.Zip下载
以上为复制内容 我用的最新版本ckeditor_4.11.2
引入js <script src="/static/js/ckeditor/ckeditor.js"></script>
使用 <textarea name="ckeditor" id="ckeditor">
出现问题:
1遇到的主要问题点击ckeditor图片上传 出现一大堆英文字符 缺少上传按钮
js加上
CKEDITOR.replace('ckeditor',{
filebrowserImageUploadUrl : '/console/upload/upload', //作用 上传图片的action路径
language : 'zh-cn',
image_previewText:' '//作用 去掉英文字符
});
上传图片action 要返回json数据 并且要包含下面三个参数
params.put("uploaded", 1);
params.put("fileName", file.getOriginalFilename());
params.put("url", "/person/info/showPhotoByPath?path=" + imgUrl);//相对路径 我的这个是为了回显,加的方法action路 //径+url
String result = JSONArray.toJSONString(params);
out.println(result);