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('afficheContent',{   
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();
        }
    }

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