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论坛，你会发现它会是你一辈子的财富。

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

CkEditor批量上传图片(java)相关推荐

java批量上传图片预览_SpringMVC批量上传图片，实现上传前图片预览
最近有个功能需要实现批量上传图片,然后实现图片预览,因为项目比较老,同时对界面和用户操作体验也要求不太高,就没去找网上的开源插件,直接写了个简单的功能,这里做个记录备份因为这个是实验性的小代码,就没 ...
【java】批量上传图片并回显功能
一.前言在电商的网站中,图片上传功能必不可少,小编在最近的项目中就有遇到了一个批量上传图片并且要回显的功能.可以说这是一个很常见的功能了,已经烂大街了,但是小编还是要认真的分析一下,以便日后用到. ...
java上传图片回显_【java】批量上传图片并回显功能
一.前言在电商的网站中,图片上传功能必不可少,小编在最近的项目中就有遇到了一个批量上传图片并且要回显的功能.可以说这是一个很常见的功能了,已经烂大街了,但是小编还是要认真的分析一下,以便日后用到. ...
c#a服务器上传文件b服务器,C#_c#批量上传图片到服务器示例分享，客户端代码：复制代码代码 - phpStudy...
c#批量上传图片到服务器示例分享客户端代码: /// /// 批量上传图片 /// /// 服务器路径 /// 图片文件夹路径 /// 图片名称 public void UpLoadFile(str ...
android批量上传图片（模仿QQ空间和微信发表说说）
android批量上传图片(模仿QQ空间和微信发表说说) **请大家关注下我的微信公众号:哦哦猿 QQ群:552123831** 首先我们来看下效果这个是启动方法:HttpPostUtil.save ...
ASP.net（C#）批量上传图片（完整版）
来自:http://blog.itpub.net/9869521/viewspace-667955/ 这篇关于ASP.Net批量上传图片的文章写得非常好,偶尔在网上看到想转载到这里,却费劲了周折.为了 ...
批量删除java注释_怎样批量去掉java文件中的注释
展开全部批量去掉Java文件中的注释,可以e69da5e887aa3231313335323631343130323136353331333337396231使用正则表达式进行批量操作,代码如下:i ...
linux find批量替换java文件中字符串
linux批量替换java文件中字符串find ./ -name '*.java' | xargs perl -pi -e 's|MoonlightL|ZXL|g' find ./ -name '*. ...
linux 批量kill java进程
linux 批量kill java进程 ps -ef |grep java |grep -v grep|awk '{print $2}'|xargs kill -9

CkEditor批量上传图片(java)

CkEditor批量上传图片(java)相关推荐

最新文章

热门文章