在JSP中使用ckeditor以及使用SpringMVC實現圖片上傳

標籤：

最近在做個人部落格，對於這個項目而言，文字編輯器的選擇相對的比較重要，在百度UEditor、MarkDown等之中最終還是選擇了 CKEDITOR，對於CKeditor的介紹自不必多說，

網上對於如何配置的文章雖然很多，但大多是千篇一律或是不完整，錯誤百出，對於ckeditor編輯器的前台配置可以按照官網上一步一步來，這裡主要想總結一下上傳圖片該如何操作。

一、我用的是4.47版本

      CKEditor編輯器的工具列中初始的時候應該是這樣子的，沒有圖片上傳按鈕

第一步：開啟ckeditor/plugins/image/dialogs/image.js檔案，搜尋hidden，將所有出現id:"Upload",hidden:!0的！去掉或者改為false

這一步完成之後將會看到上傳按鈕

第二步：完成上傳圖片的Controller：

/* *  圖片命名格式 */private static final String DEFAULT_SUB_FOLDER_FORMAT_AUTO = "yyyyMMddHHmmss";@Resource(name="adminServiceImpl")private AdminService adminService;protected Logger logger = Logger.getLogger(AdminController.class);/* * 項目絕對路徑 */private static  final String PROJECT_PATH="C:/Users/Administrator/workspace/PersonalBlog/";/* * 上傳圖片檔案夾 */private static final String UPLOAD_PATH="WebContent/upload/img/";

/* *  上傳圖片 */@RequestMapping("uploadImg")public void uplodaImg(@RequestParam("upload")MultipartFile file,//HttpServletRequest request, //HttpServletResponse response,//@RequestParam("CKEditorFuncNum")String CKEditorFuncNum)//throws IllegalStateException, IOException{PrintWriter out =response.getWriter();String fileName=file.getOriginalFilename();String uploadContentType =file.getContentType();String expandedName ="";if (uploadContentType.equals("image/pjpeg")                  || uploadContentType.equals("image/jpeg")) {              // IE6上傳jpg圖片的headimageContentType是image/pjpeg，而IE9以及Firefox上傳的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 ;          }  if (file.getSize()> 600 * 1024) {              out.println("<script type=\"text/javascript\">");              out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum                      + ",''," + "'檔案大小不得大於600k');");              out.println("</script>");              return ;  }DateFormat df = new SimpleDateFormat(DEFAULT_SUB_FOLDER_FORMAT_AUTO);fileName = df.format(new Date())+expandedName;file.transferTo(new File(PROJECT_PATH+UPLOAD_PATH +fileName));        // 返回"映像"選項卡並顯示圖片  request.getContextPath()為web項目名           out.println("<script type=\"text/javascript\">");          out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum                  + ",'" + "upload/img/" + fileName + "','')");          out.println("</script>");          return ;  }

第三步：配置點擊” 上傳到伺服器“ 按鈕之後請求的控制器，在ckeditor/config.js中加入這一段代碼

    config.image_previewText=‘ ‘; //預覽地區顯示內容
    config.filebrowserImageUploadUrl= "uploadImg.html"; //要上傳的action或servlet   

注意：如果上傳圖片之後看不到圖片，

方法一：請重新整理圖片的上傳檔案夾，因為圖片是上傳到絕對路徑，Eclipse需要同步才能知道這一行為，

項目上線後一般不會出現這一行為

方法二：Automatically Refresh打勾，讓Eclipse自動同步檔案系統

在JSP中使用ckeditor以及使用SpringMVC實現圖片上傳