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/jpegexpandedName = ".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;}

 

转载于:https://www.cnblogs.com/MrSaver/p/6597278.html

总结

以上是生活随笔为你收集整理的SpringMVC:学习笔记(10)——整合Ckeditor且实现图片上传的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。