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;
    }