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

来源：互联网发布：当当和淘宝买书哪个好编辑：程序博客网时间：2024/04/28 18:58

最近在做个人博客，对于这个项目而言，文本编辑器的选择相对的比较重要，在百度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自动同步文件系统

0 0