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且实现图片上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。