CKEditor的使用，并实现图片上传

ckeditor是一款富文本编辑器，类似于论坛帖子下边的回复输入框。

---

1、先要下载相应js文件，点我下载。根据自己的需求选择插件的丰富程度，下载后解压得到一个文件夹，放到webRoot目录下。

2、在jsp页面或html页面引入核心js。

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

3、在需要引入富文本的地方加入一个textarea标签。

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

4、注意name属性，然后在页面中加下下面js代码，效果就出来了。

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

5、很简单，但是此时我们发现，编辑器上的上传图片功能没有。所以代码需要改成下面这样。

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

6、这里的filebrowserImageUploadUrl 是我写的一个上传图片的接口，代码如下。

 @Controller
 @RequestMapping("uploadImg")
 public class FileUploadController {
     /*
      * 图片命名格式
      */
     private static final String DEFAULT_SUB_FOLDER_FORMAT_AUTO = "yyyyMMddHHmmss";

     protected Logger logger = Logger.getLogger(FileUploadController.class);

     /*
      * 上传图片文件夹
      */
     private static final String UPLOAD_PATH = "/upload/CKimg/";

     /*
      * 上传图片
      */
     @RequestMapping(value = "uploadImg")
     public void uplodaImg(@RequestParam("upload") MultipartFile file,//
             HttpServletRequest request, //
             HttpServletResponse response)//
     {

         try {

             String proPath = request.getSession().getServletContext()
                     .getRealPath("/");
             String proName = request.getContextPath();
             String path = proPath + UPLOAD_PATH;
             PrintWriter out = response.getWriter();
             String CKEditorFuncNum = request.getParameter("CKEditorFuncNum");
             String fileName = file.getOriginalFilename();
             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;
             }
             if (file.getSize() > 1024 * 1024 * 2) {
                 out.println("<script type=\"text/javascript\">");
                 out.println("window.parent.CKEDITOR.tools.callFunction("
                         + CKEditorFuncNum + ",''," + "'文件大小不得大于2M');");
                 out.println("</script>");
                 return;
             }
             DateFormat df = new SimpleDateFormat(DEFAULT_SUB_FOLDER_FORMAT_AUTO);
             fileName = df.format(new Date()) + expandedName;
             file.transferTo(new File(path + "/" + fileName));
             out.println("<script type=\"text/javascript\">");
             out.println("window.parent.CKEDITOR.tools.callFunction("
                     + CKEditorFuncNum + ",'" + proName + "/upload/CKimg/"
                     + fileName + "','')");
             out.println("</script>");
             return;
         } catch (IllegalStateException e) {
             e.printStackTrace();
         } catch (IOException e) {
             e.printStackTrace();
         } catch (Exception e) {
             e.printStackTrace();
         }
     }

至此，所有功能都已经实现。

 

 

 

 

 2737