第一步 下载ckeditor 进入官网https://ckeditor.com/ckeditor-4/download/点击Release notes选择4.8.0版本点击Download.Zip下载
第二步 加入ckeditor文件夹到项目下 引入
描述:
上面的js中description可以是id也可以是name
第三步 就是设置图片上传ckeditor文件夹下的config.js中添加:
//设置预览页面为空
config.image_previewText=’ ';
//设置上传路径
config.filebrowserUploadUrl='/f/cms/util/uploadImage';
//设置高和宽
config.width=500;
config.height =380;
/**
* 富文本编辑器图片上传
* @param file
* @return
*/
@RequestMapping(value = “/uploadImage”, method = RequestMethod.POST)
public void uploadImage(@RequestParam(“upload”)MultipartFile[] file, HttpServletResponse response,HttpServletRequest request,HttpSession session) {
response.setCharacterEncoding(“UTF-8”);
PrintWriter out = null;
// CKEditor提交的很重要的一个参数 ,回调函数的序号
String callback = request.getParameter(“CKEditorFuncNum”);
try {
out = response.getWriter();
} catch (IOException e1) {
e1.printStackTrace();
}
UploadFileEntity fileInfo = null;
//上传目录地址
// String uploadDir = session.getServletContext().getRealPath("/") + “upload/”;
filePath = “D:\dpicmsUploadFile\imagesForAll\”;
下面的100就是去找的filePath
String uploadDir = UidUtil.getFilePath(100);
//如果目录不存在,自动创建文件夹
File dir = new File(uploadDir);
try {
List uploadFileEntityList = null;
try {
uploadFileEntityList = UidUtil.springUpload(request,100);
} catch (IOException e) {
e.printStackTrace();
}
if (null != uploadFileEntityList && uploadFileEntityList.size() > 0) {
boolean isSuccess = utilService.saveUploadFileList(uploadFileEntityList);
if (!isSuccess){
System.out.println(“上传成功”+uploadFileEntityList.get(0).getNewFileName());
}
}
// 返回"图像"选项卡并显示图片 request.getContextPath()为web项目名 4.8.0使用
out.println("<script type=“text/javascript”>");
out.println(“window.parent.CKEDITOR.tools.callFunction(” + callback
+ “,’/dpicmsUploadFile/imagesForAll/” + uploadFileEntityList.get(0).getNewFileName() + “’,’’)”);
out.println("");
//4.11.4使用
// String url = “/dpicmsUploadFile/imagesForAll/”+uploadFileEntityList.get(0).getNewFileName();
// JSONObject obj = new JSONObject();
// obj.put(“uploaded”, 1);
// obj.put(“fileName”, uploadFileEntityList.get(0).getNewFileName());
// obj.put(“url”, url);
// out.write(obj.toString());
} catch (Exception e) {
out.println("<script type=“text/javascript”>");
out.println(“window.parent.CKEDITOR.tools.callFunction(” + callback + “,’’,” + “‘文件上传失败!’);”);
out.println("");
}
}
/**
* 上传
* @param request
* @return
* @throws IllegalStateException
* @throws IOException
*/
public static List springUpload(HttpServletRequest request, int fileType) throws IllegalStateException, IOException {
long startTime = System.currentTimeMillis();
// 将当前上下文初始化给 CommonsMutipartResolver (多部分解析器)
CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(
request.getSession().getServletContext());
List<UploadFileEntity> uploadFileEntities = new ArrayList<>();
// 检查form中是否有enctype="multipart/form-data"
if (multipartResolver.isMultipart(request)) {
// 将request变成多部分request
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
// 获取multiRequest 中所有的文件名
Iterator<String> iter = multiRequest.getFileNames();
while (iter.hasNext()) {
// 一次遍历所有文件
List<MultipartFile> files = multiRequest.getFiles(iter.next());
if (null == files){break;}
for (int i = 0; i < files.size(); i++) {
MultipartFile file = files.get(i);
if(StringUtils.isBlank(file.getOriginalFilename())){
continue;
}
UploadFileEntity uploadFileEntity = new UploadFileEntity();
if (file != null) {
uploadFileEntity.setId(getUUID());
uploadFileEntity.setCreateDate(new Date());
uploadFileEntity.setFileFormat(file.getContentType());
uploadFileEntity.setFileType(fileType);
uploadFileEntity.setOldFileName(file.getOriginalFilename());
uploadFileEntity.setSize(String.valueOf(file.getSize()));
String newFileName = new Date().getTime() +"-"+ file.getOriginalFilename();
String filePath = getFilePath(fileType) + newFileName;
uploadFileEntity.setFilePath(filePath);
uploadFileEntity.setNewFileName(newFileName);
// 上传
file.transferTo(new File(filePath));
}
uploadFileEntities.add(uploadFileEntity);
}
}
}
long endTime = System.currentTimeMillis();
System.out.println("运行时间:" + String.valueOf(endTime - startTime) + "ms");
return uploadFileEntities;
}
/**
* 批量新增上传文件
* @param uploadFileEntities
* @return
*/
@Transactional
public boolean saveUploadFileList(List uploadFileEntities){
int result = utilDao.saveUploadFileList(uploadFileEntities);
if (result > 0)return true;
return false;
}
第四步 将前台的数据传入后台
在获取textaera值前js添加下面代码,不然获取不到值
for (instance in CKEDITOR.instances){
CKEDITOR.instances[instance].updateElement();
}
第五步,如果有编辑页面,则需要 CKEDITOR.instances.editContent.setData(text)给textaera赋值
总结
上传图片传到后台的参数CKEditorFuncNum为空
// CKEditor提交的很重要的一个参数 ,回调函数的序号
String callback = this.request.getParameter(“CKEditorFuncNum”);
将CKEditor版本由CKEditor 4.9.0换成CKEditor 4.8.0解决问题
上传图片传到后台的参数MultipartFile[]为空
添加参数注解@RequestParam(“upload”)后解决,代码如下:
public void uploadImage(@RequestParam(“upload”)MultipartFile[] file)