在JSP中使用ckeditor以及使用SpringMVC实现图片上传

最近在做个人博客，对于这个项目而言，文本编辑器的选择相对的比较重要，在百度UEditor、MarkDown等之中最终还是选择了 CKEDITOR，对于CKeditor的介绍自不必多说，

网上对于如何配置的文章虽然很多，但大多是千篇一律或是不完整，错误百出，对于ckeditor编辑器的前台配置可以按照官网上一步一步来，这里主要想总结一下上传图片该如何操作。

一、我用的是4.47版本

CKEditor编辑器的工具栏中初始的时候应该是这样子的，没有图片上传按钮

第一步：打开ckeditor/plugins/image/dialogs/image.js文件，搜索hidden，将所有出现id:"Upload",hidden:!0的！去掉或者改为false

这一步完成之后将会看到上传按钮

第二步：完成上传图片的Controller：

/*
	 *  图片命名格式
	 */
	private static final String DEFAULT_SUB_FOLDER_FORMAT_AUTO = "yyyyMMddHHmmss";

	@Resource(name="adminServiceImpl")
	private AdminService adminService;	

	protected Logger logger = Logger.getLogger(AdminController.class);
	/*
	 * 项目绝对路径
	 */
	private static  final String PROJECT_PATH="C:/Users/Administrator/workspace/PersonalBlog/";
	/*
	 * 上传图片文件夹
	 */
	private static final String UPLOAD_PATH="WebContent/upload/img/";

	/*
	 *  上传图片
	 */
	@RequestMapping("uploadImg")
	public void uplodaImg(@RequestParam("upload")MultipartFile file,//
			HttpServletRequest request, //
			HttpServletResponse response,//
			@RequestParam("CKEditorFuncNum")String CKEditorFuncNum)//
			throws IllegalStateException, IOException{

		PrintWriter out =response.getWriter();
		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()> 600 * 1024) {
            out.println("<script type=\"text/javascript\">");
            out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum
                    + ",''," + "'文件大小不得大于600k');");
            out.println("</script>");
            return ;
		}
		DateFormat df = new SimpleDateFormat(DEFAULT_SUB_FOLDER_FORMAT_AUTO);
		fileName = df.format(new Date())+expandedName;
		file.transferTo(new File(PROJECT_PATH+UPLOAD_PATH +fileName));
        // 返回"图像"选项卡并显示图片  request.getContextPath()为web项目名
        out.println("<script type=\"text/javascript\">");
        out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum
                + ",'" + "upload/img/" + fileName + "','')");
        out.println("</script>");
        return ;
	}
	

第三步：配置点击” 上传到服务器“ 按钮之后请求的控制器，在ckeditor/config.js中加入这一段代码

config.image_previewText=‘ ‘; //预览区域显示内容

config.filebrowserImageUploadUrl= "uploadImg.html"; //要上传的action或servlet

注意：如果上传图片之后看不到图片，如图

方法一：请刷新图片的上传文件夹，因为图片是上传到绝对路径，Eclipse需要同步才能知道这一行为，

项目上线后一般不会出现这一行为

方法二：Automatically Refresh打勾，让Eclipse自动同步文件系统