SpringMVC:学习笔记(10)——整合Ckeditor且实现图片上传
SpringMVC:学习笔记(10)——整合Ckeditor且实现图片上传
配置CKEDITOR
精简文件
- 解压之后可以看到ckeditor/lang下面有很多语言的js,如果不需要那么多种语言的,可以只剩下en.js,zh.js,zh-cn.js
- 图片上传时图像信息中的预览会显示一堆英文信息,会干扰预览。找到ckeditor/plugins/image/dialogs/image.js,搜索“d.config.image_previewText”就能找到这段鸟语了,(d.config.image_previewText||”)引号中的内容全删除。
配置上传路径
默认的插入图片对话框不显示上传选项
第一步:image.js文件搜索“upload”可以找到这一段 id:'Upload',hidden:true或id:"Upload",hidden:!0,将其改为false
第二步:打开config.js文件,加入下面一句话
config.filebrowserImageUploadUrl = "imageUpload.do"; //用于接收上传文件并处理的Servlet
处理上传的Controller
代码
@RequestMapping("/imageUpload.do") public String imageUpload(@RequestParam("upload") MultipartFile file, @RequestParam("CKEditorFuncNum") String CKEditorFuncNum, HttpServletResponse response, HttpServletRequest request) throws IOException { System.out.println("有文件想要上传"); PrintWriter out = response.getWriter(); String name = null; name = new String(file.getOriginalFilename().getBytes("iso-8859-1"), "UTF-8"); String uploadContentType = file.getContentType(); //处理文件后缀 String expandedName = ""; if (uploadContentType.equals("image/pjpeg") || uploadContentType.equals("image/jpeg")) { // IE6上传jpg图片的headimageContentType是image/pjpeg,而IE9以及火狐上传的jpg图片是image/jpeg expandedName = ".jpg"; } else if (uploadContentType.equals("image/png") || uploadContentType.equals("image/x-png")) { // IE6上传的png图片的headimageContentType是"image/x-png" expandedName = ".png"; } else if (uploadContentType.equals("image/gif")) { expandedName = ".gif"; } else if (uploadContentType.equals("image/bmp")) { expandedName = ".bmp"; } else { //文件格式不符合,返回错误信息 out.println("<script type=\"text/javascript\">"); out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ",''," + "'文件格式不正确(必须为.jpg/.gif/.bmp/.png文件)');"); out.println("</script>"); return null; } //文件命名并保存到服务器 DateFormat df = new SimpleDateFormat("yyyyMMddHHmmss"); name = df.format(new Date()) +expandedName; String DirectoryName =request.getContextPath()+"/tempImag"; System.out.println(DirectoryName); try { File file1 = new File(request.getServletContext().getRealPath("/tempImag"),name); System.out.println(file1.getPath()); file.transferTo(file1); } catch (Exception e) { e.printStackTrace(); } String fileURL =request.getContextPath() + "/tempImag/"+name; // 返回"图像"选项卡和图像在服务器的地址并显示图片 out.println("<script type=\"text/javascript\">"); out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ",'" +fileURL+"','')"); out.println("</script>"); out.close(); return null; }