ckeditor+jsp+spring配置图片上传

CKEditor用于富文本输入是极好的，它还有一些插件支持扩展功能，其中图片上传就是比较常用到的。本文简单记录我的实现步骤。

1.CKEditor除了提供三种标准版压缩包下载，还可根据自己的需求进行个性化打包下载。无论采取何种方式，从CKEditor官网下载带ImgUpload功能的压缩包，解压放在web工程resource目录下，例如我是放在：

webapp/resources/ckeditor

 

2.CKEditor配置文件（java）：

 1 import com.ckeditor.CKEditorConfig;
 2 import com.ckeditor.EventHandler;
 3 import com.ckeditor.GlobalEventHandler;
 4 
 5 public class CKEditorHelper
 6 {
 7     public static CKEditorConfig createConfig() {
 8         CKEditorConfig config = new CKEditorConfig();

10         config.addConfigValue("filebrowserImageUploadUrl","uploadImg");//uploadImg是处理上传图片的url
12 
13         return config;
14     }
15 
16     public static EventHandler createEventHandlers() {
17         EventHandler handler = new EventHandler();
18         return handler;
19     }
20 
21     public static GlobalEventHandler createGlobalEventHandlers() {
22         GlobalEventHandler handler = new GlobalEventHandler();
23         return handler;
24     }
25 }

3.处理上传图片（java），随便写在一个controller里

@RequestMapping(value = "/uploadImg", method = RequestMethod.POST)
    public ModelAndView uploadImg(@RequestParam("upload") CommonsMultipartFile upload,
                                  String CKEditor,String CKEditorFuncNum,String langCode,
                                  HttpServletResponse response) {
//        System.out.println("-----file name is :" + file.getOriginalFilename());
        String currentFileName= String.valueOf(System.currentTimeMillis());
        String url="";
        if (!upload.isEmpty()) {
            String picId =  UtilDate.getID();
            try {
                FileHelper.saveImg(upload, picId);
            } catch (IOException e) {
                e.printStackTrace();
            }
            url="getImg?imgId="+picId;
        }

//        return "<script>window.opener.CKEDITOR.tools.callFunction( "+CKEditorFuncNum+", "+ url+" );</script>" ;
        String message = "成功上传图片"+upload.getOriginalFilename();
        try {
            response.setContentType("text/html; charset=gbk");
            PrintWriter out = response.getWriter();
            out.println("<html>");
            out.println("<script type=\"text/javascript\">");
            out.println("//<![CDATA[");
            String call = "window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ",'" + StringEscapeUtils.escapeJavaScript(url)
                    + "'" + (message != null ? ",'" + StringEscapeUtils.escapeJavaScript(message) + "'" : "") + ");";
            out.println(call);
            out.println("//]]>");
            out.println("</script>");
            out.println("</html>");
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;

    }

4.页面配置（jsp）：这里只列出关键代码。这段代码的意思是，将id="content"的textarea替换为ckeditor的输入框，其配置文件为CKEditorHelper，资源文件为resources/ckeditor/

注意：前两行代码放在<HTML>标签之前，其他随意

 1 <%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>
 2 <%@ page import="CKEditorHelper" %>
 3 
 4 
 5 <form:textarea class="form-control" path="content" placeholder="内容" name="content" rows="5"/>
 7 
 8 <ckeditor:replace replace="content" basePath="resources/ckeditor/"
 9                   config="<%= CKEditorHelper.createConfig() %>"
10                   events="<%= CKEditorHelper.createEventHandlers() %>"/>
11 
12 <script src="resources/ckeditor/ckeditor.js"></script>

 

posted @ 2016-01-15 12:40  iaac  阅读(330)  评论(0)  编辑  收藏  举报