ckeditor+jsp+spring配置圖片上傳

時間 2019-12-04

標籤 ckeditor+jsp+spring ckeditor jsp spring 配置圖片上傳欄目 JSP 简体版

原文原文鏈接

CKEditor用於富文本輸入是極好的，它還有一些插件支持擴展功能，其中圖片上傳就是比較經常使用到的。本文簡單記錄個人實現步驟。javascript

1.CKEditor除了提供三種標準版壓縮包下載，還可根據本身的需求進行個性化打包下載。不管採起何種方式，從CKEditor官網下載帶ImgUpload功能的壓縮包，解壓放在web工程resource目錄下，例如我是放在：html

webapp/resources/ckeditor

2.CKEditor配置文件（java）：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裏web

@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/app

注意：前兩行代碼放在<HTML>標籤以前，其餘隨意webapp

 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。