CkEditor批量上传图片(java)

CKEditor上传视频
CKEditor批量上传图片
flvplayer.swf播放器
CKEditor整合包(v4.6.1)

————————————————————————————————————

最近，因后台编辑需要，原来的editor不能批量上传图片（拖拽）和上传视频，于是我花了大概一周时间研究了一下ckeditor，是现实图片拖拽上传（可多个）和视频上传（flv,mp4,mov等），开始是想将这两个功能点写在一起，后来 发现太乱，于是就分开来写吧，这样大家看的更清楚。

前言

ckeditor的前身是fckeditor，后来fckeditor拆分为ckeditor和ckfinder,ckeditor只是简单的编辑功能，而ckfinder是一个文件管理器，可以上传图片和视频，ckeditor是开源免费的，我们可以在github上查看源码：https://github.com/ckeditor  ，但是遗憾的是ckfinder是收费的，至于cksource公司收费这个事咱就不多讨论，弊端不说，这里夸赞一下他们的员工，我们遇到一个问题，到他们的论坛去提问，然后他们会收到一封邮件，及时来回复你，我想这就是人家收费的理由吧。回到正题，当我们用ckeditor时肯定会用到上传图片这个功能的，庆幸的是新版本的ckeditor有多种的类型，你可以下载full版的，也就是功能很全，目前最新的是4.6.1（如果你想用拖拽图片批量 上传必须是4.5以后的才行），当你下载了full版，plugs文件夹中已经有了image和flash文件夹了，说明这两个插件他已经给你自带了，这时候你只要让“上传”按钮显示出来就行。这就是我们要看到的效果。

开始吧：

首先你要去官网下载一个最新的full 的ckeditor：点击跳转下载Ckeditor页面。

然后将ckeditor放入到你的项目根中就放在webapp目录下。

上传单张图片：

1，在config.js中添加 config.filebrowserImageUploadUrl = "/ckeditor/img";配置项。有了这个配置项，他才会显示上传的按钮，这个url是指定图片上传到哪里。当然我们一般是在页面上赋值，这样灵活性更大，

 CKEDITOR.replace('${id}',{        toolbar : 'Full',        filebrowserImageUploadUrl : "${base}${baseAdminPath}/ajax/upload/webdata/${channel}"    });

filebrowserImageUploadUrl 就是指定图片上传的controller。

2，编写controller层，

@RequestMapping(value = "/ajax/upload/webdata/{dir}", method = RequestMethod.POST)public ResponseEntity<String> upload(Map<String, Object> model, @PathVariable String dir, @RequestParam("CKEditorFuncNum") String funNum, @RequestParam("upload") MultipartFile file, HttpServletRequest request) {if (file.getSize() > 0) {        String path = FileUtil.uploadImg(file, BaseSysConf.ImgWebDataDir_Slash + dir, BaseSysConf.ImgUploadBasePath);        model.put("msg", "File '" + file.getOriginalFilename() + "' uploaded successfully");        String basePath = StringUtils.isEmpty(BaseWebConf.WebImgRootPath) ? request.getContextPath() : BaseWebConf.WebImgRootPath;        String imgpath = basePath + path;        String resp = "<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction(" + funNum + ",'" + imgpath + "','')</script>";        HttpHeaders headers = new HttpHeaders();        headers.setContentType(MediaType.TEXT_HTML);        return new ResponseEntity<String>(resp,headers, HttpStatus.OK);    } else {        HttpHeaders headers = new HttpHeaders();        String resp = "";        return new ResponseEntity<String>(resp,headers, HttpStatus.BAD_REQUEST);    }}

这里，你主要是保存图片，并返回图片的的访问地址，主要是 resp变量

3，到这里上传单张图片的功能就已经实现了，注意这里选择图片时只能选单张，不能框选和Ctrl,官网也是如此。

上传多张图片：
上传多张图片这个功能我找了好久，基本上有两种实现功能：

1，使用文件管理器，这个功能做起来比较麻烦，还要结合ckfinder。

2，使用拖拽上传多张，简单暴力，推荐使用，注意多张图片上传的顺序是以你鼠标点击拖动的那一张图片开始向右排序如图：。

下面我们来完成拖拽上传多张图片的功能吧：

1，到官网查看他的插件列表发现他有个插件叫 upload images,这个插件可以拖拽和粘贴图片(粘贴好像不行我试过很多次)，然后你需要下载到你的plugs文件夹中，但是你会发现这个插件又依赖于其他的插件，最后我发现一共添加了9个插件config.extraPlugins = 'selectall,notification,notificationaggregator,widgetselection,filetools,lineutils,widget,uploadwidget,uploadimage';才算完成插件的添加，因为你不添加浏览器会报错，你可以根据错去添加插件，我整合好的ckedito包 。

2，在config.js中添加配置项： config.imageUploadUrl = "/ckeditor/img"; 这是图片拖拽后上传到的地方，页面正式的配置：

CKEDITOR.replace('${id}',{        toolbar : 'Full',        imageUploadUrl: "${base}${baseAdminPath}/ajax/upload/webdata/${channel}/dropimg"    });

这里说明下，页面中的配置会将config.js的配置替换掉 

3，contorller层：

@RequestMapping(value = "/ajax/upload/webdata/{dir}/dropimg", method = RequestMethod.POST)@ResponseBodypublic String dropped_img(Map<String, Object> model, @PathVariable String dir, @RequestParam("upload") MultipartFile file, HttpServletRequest request) {Map<String, Object> map = new HashMap<>(); if (file != null && file.getSize() > 0) { String path = FileUtil.uploadImg(file, BaseSysConf.ImgWebDataDir_Slash + dir, BaseSysConf.ImgUploadBasePath); String fileName = path.substring(path.lastIndexOf("/") + 1); String basePath = StringUtils.isEmpty(BaseWebConf.WebImgRootPath) ? request.getContextPath() : BaseWebConf.WebImgRootPath;     String imgpath = basePath + path;     map.put("uploaded", 1);     map.put("fileName", fileName);     map.put("url", imgpath); } else { map.put("uploaded", 0); map.put("error", "upload img failed"); }return JsonUtil.toJson(map);}

拖拽图片上传不和点击图片上传一样，它只需要以josn格式返回一些简单的信息。

4，到这里拖拽图片传的功能也实现了，但是有一个问题就是，它会限制拖拽上传的图片格式，如果你需要修改的话：找到 supportedTypes:  然后将它的值配置出来，以下是我的配置：supportedTypes: editor.config.uploadImgSupportedTypes == undefined ? /image\/(jpeg|png|gif|bmp)/ : editor.config.uploadImgSupportedTypes,  然后在config.js中增加一项配置：config.uploadImgSupportedTypes = '';//可限制拖拽图片上传的类型  /image\/(jpeg|png|gif|bmp)/这样就可以随心所欲的配置啦~ 是不是很机智。哈哈哈。

结语：
在实现这个功能的过程中自己学习到了很多东西  

一，看官网，当你百度或google不到你想要的，就去看看官网，非常棒

二，github看源码，这是世界最大的开源it论坛，你会发现它会是你一辈子的财富。

三，学会去阅读英文文档。