最近在做个人博客，对于这个项目而言，文本编辑器的选择相对的比较重要，在百度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/jpegexpandedName = ".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自动同步文件系统
成功是奋斗的结果，而奋斗是成功的必经之路。
