CKEditor的使用，並實現圖片上傳

ckeditor是一款富文本編輯器，相似於論壇帖子下邊的回覆輸入框。

---

一、先要下載相應js文件，點我下載。根據本身的需求選擇插件的豐富程度，下載後解壓獲得一個文件夾，放到webRoot目錄下。

二、在jsp頁面或html頁面引入核心js。

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

 

三、在須要引入富文本的地方加入一個textarea標籤。

<textarea name="ckeditor"></textarea></td>

 

四、注意name屬性，而後在頁面中加下下面js代碼，效果就出來了。

 

<script>
    CKEDITOR.replace('ckeditor'});
</script>

 

五、很簡單，可是此時咱們發現，編輯器上的上傳圖片功能沒有。因此代碼須要改爲下面這樣。

 

<script>
    CKEDITOR.replace('ckeditor',{   
        filebrowserImageUploadUrl : '${ctx}/uploadImg/uploadImg',  
        language : 'zh-cn',  
    });
</script>

 

六、這裏的filebrowserImageUploadUrl 是我寫的一個上傳圖片的接口，代碼以下。

 1 @Controller
 2 @RequestMapping("uploadImg")
 3 public class FileUploadController {
 4     /*
 5      * 圖片命名格式
 6      */
 7     private static final String DEFAULT_SUB_FOLDER_FORMAT_AUTO = "yyyyMMddHHmmss";
 8 
 9     protected Logger logger = Logger.getLogger(FileUploadController.class);
10 
11     /*
12      * 上傳圖片文件夾
13      */
14     private static final String UPLOAD_PATH = "/upload/CKimg/";
15 
16     /*
17      * 上傳圖片
18      */
19     @RequestMapping(value = "uploadImg")
20     public void uplodaImg(@RequestParam("upload") MultipartFile file,//
21             HttpServletRequest request, //
22             HttpServletResponse response)//
23     {
24 
25         try {
26 
27             String proPath = request.getSession().getServletContext()
28                     .getRealPath("/");
29             String proName = request.getContextPath();
30             String path = proPath + UPLOAD_PATH;
31             PrintWriter out = response.getWriter();
32             String CKEditorFuncNum = request.getParameter("CKEditorFuncNum");
33             String fileName = file.getOriginalFilename();
34             String uploadContentType = file.getContentType();
35             String expandedName = "";
36             if (uploadContentType.equals("image/pjpeg")
37                     || uploadContentType.equals("image/jpeg")) {
38                 // IE6上傳jpg圖片的headimageContentType是image/pjpeg，而IE9以及火狐上傳的jpg圖片是image/jpeg
39                 expandedName = ".jpg";
40             } else if (uploadContentType.equals("image/png")
41                     || uploadContentType.equals("image/x-png")) {
42                 // IE6上傳的png圖片的headimageContentType是"image/x-png"
43                 expandedName = ".png";
44             } else if (uploadContentType.equals("image/gif")) {
45                 expandedName = ".gif";
46             } else if (uploadContentType.equals("image/bmp")) {
47                 expandedName = ".bmp";
48             } else {
49                 out.println("<script type=\"text/javascript\">");
50                 out.println("window.parent.CKEDITOR.tools.callFunction("
51                         + CKEditorFuncNum + ",'',"
52                         + "'文件格式不正確（必須爲.jpg/.gif/.bmp/.png文件）');");
53                 out.println("</script>");
54                 return;
55             }
56             if (file.getSize() > 1024 * 1024 * 2) {
57                 out.println("<script type=\"text/javascript\">");
58                 out.println("window.parent.CKEDITOR.tools.callFunction("
59                         + CKEditorFuncNum + ",''," + "'文件大小不得大於2M');");
60                 out.println("</script>");
61                 return;
62             }
63             DateFormat df = new SimpleDateFormat(DEFAULT_SUB_FOLDER_FORMAT_AUTO);
64             fileName = df.format(new Date()) + expandedName;
65             file.transferTo(new File(path + "/" + fileName));
66             out.println("<script type=\"text/javascript\">");
67             out.println("window.parent.CKEDITOR.tools.callFunction("
68                     + CKEditorFuncNum + ",'" + proName + "/upload/CKimg/"
69                     + fileName + "','')");
70             out.println("</script>");
71             return;
72         } catch (IllegalStateException e) {
73             e.printStackTrace();
74         } catch (IOException e) {
75             e.printStackTrace();
76         } catch (Exception e) {
77             e.printStackTrace();
78         }
79     }

 

至此，全部功能都已經實現。

 

 

 

 

 

 2737