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