springmvc 集成 ckeditor,附带图片上传功能。

一、ckeditor,必须选择4.8版本,高版本的在取得CKEditorFuncNum时,无效,进而无法回显文件地址。

另外需要,下载4.8的Full版本,http://download.cksource.com/CKEditor/CKEditor/CKEditor%204.8.0/ckeditor_4.8.0_full.zip ,

标准版standard版本缺少文字左右对齐,居中,等功能。

二、 集成。在jsp页面,内嵌一个textarea,id为“content”,然后在他下方加入如下代码

<script type="text/javascript" src="${APP_PATH}/ckeditor/ckeditor.js"></script>
<script type="text/javascript"> var editor = CKEDITOR.replace('content', { "filebrowserUploadUrl" : "${APP_PATH}/imageUpload", //要处理的控制器名称 uiColor: '#ffffff', //工具栏白色,可以删除本行,默认的淡灰白色也很难好看 enterMode :CKEDITOR.ENTER_BR //换行直接加br }); function save(){ editor.updateElement(); //非常重要的一句代码 //前台验证工作 //提交到后台 return true ; } </script>

此段代码,为置换ckeditor,并且直接把上传的控制器,写明,${APP_PATH}/imageUpload,且此段代码在修改业务页面时,会自动回显数据。

三、springmvc的控制器部分。 在取得CKEditorFuncNum的值时,高版本的ck,有bug,必须切换至4.8版本,否则娶不到值。进而,在上传后,无法回显文件地址。本段可以写任何控制器中,不过便于查找我把它写道了该业务所处的单页处理的控制器中

@RequestMapping("/imageUpload")
    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;
    }
原文地址:https://www.cnblogs.com/sdgtxuyong/p/12222230.html