• 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;
        }
  • 相关阅读:
    svg圆弧进度条demo
    canvas圆弧、圆环进度条实现
    angularjs与pagination插件实现分页功能
    CSS布局:居中的多种实现方式
    新闻滚动demo
    移动端rem设置字体
    angularjs自定义指令通用属性详解
    浅谈angularjs绑定富文本出现的小问题
    jquery.validate使用攻略(表单校验)
    Typescript 享元模式(Flyweight)
  • 原文地址:https://www.cnblogs.com/sdgtxuyong/p/12222230.html
Copyright © 2020-2023  润新知