CKEditor上傳視頻
CKEditor批量上傳圖片
flvplayer.swf播放器
CKEditor整合包(v4.6.1)

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

最近，因后臺(tái)編輯需要，原來(lái)的editor不能批量上傳圖片（拖拽）和上傳視頻，于是我花了大概一周時(shí)間研究了一下ckeditor，是現(xiàn)實(shí)圖片拖拽上傳（可多個(gè)）和視頻上傳（flv,mp4,mov等），開(kāi)始是想將這兩個(gè)功能點(diǎn)寫(xiě)在一起，后來(lái) 發(fā)現(xiàn)太亂，于是就分開(kāi)來(lái)寫(xiě)吧，這樣大家看的更清楚。

前言

ckeditor的前身是fckeditor，后來(lái)fckeditor拆分為ckeditor和ckfinder,ckeditor只是簡(jiǎn)單的編輯功能，而ckfinder是一個(gè)文件管理器，可以上傳圖片和視頻，ckeditor是開(kāi)源免費(fèi)的，我們可以在github上查看源碼：https://github.com/ckeditor ?，但是遺憾的是ckfinder是收費(fèi)的，至于cksource公司收費(fèi)這個(gè)事咱就不多討論，弊端不說(shuō)，這里夸贊一下他們的員工，我們遇到一個(gè)問(wèn)題，到他們的論壇去提問(wèn)，然后他們會(huì)收到一封郵件，及時(shí)來(lái)回復(fù)你，我想這就是人家收費(fèi)的理由吧。回到正題，當(dāng)我們用ckeditor時(shí)肯定會(huì)用到上傳圖片這個(gè)功能的，慶幸的是新版本的ckeditor有多種的類型，你可以下載full版的，也就是功能很全，目前最新的是4.6.1（如果你想用拖拽圖片批量 上傳必須是4.5以后的才行），當(dāng)你下載了full版，plugs文件夾中已經(jīng)有了image和flash文件夾了，說(shuō)明這兩個(gè)插件他已經(jīng)給你自帶了，這時(shí)候你只要讓“上傳”按鈕顯示出來(lái)就行。這就是我們要看到的效果。

開(kāi)始吧：

首先你要去官網(wǎng)下載一個(gè)最新的full 的ckeditor：點(diǎn)擊跳轉(zhuǎn)下載Ckeditor頁(yè)面。

然后將ckeditor放入到你的項(xiàng)目根中就放在webapp目錄下。

上傳單張圖片：

1，在config.js中添加?config.filebrowserImageUploadUrl = "/ckeditor/img";配置項(xiàng)。有了這個(gè)配置項(xiàng)，他才會(huì)顯示上傳的按鈕，這個(gè)url是指定圖片上傳到哪里。當(dāng)然我們一般是在頁(yè)面上賦值，這樣靈活性更大，

CKEDITOR.replace('${id}',{toolbar : 'Full',filebrowserImageUploadUrl : "${base}${baseAdminPath}/ajax/upload/webdata/${channel}"}); filebrowserImageUploadUrl?就是指定圖片上傳的controller。

2，編寫(xiě)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);}} 這里，你主要是保存圖片，并返回圖片的的訪問(wèn)地址，主要是 resp變量

3，到這里上傳單張圖片的功能就已經(jīng)實(shí)現(xiàn)了，注意這里選擇圖片時(shí)只能選單張，不能框選和Ctrl,官網(wǎng)也是如此。

上傳多張圖片：
上傳多張圖片這個(gè)功能我找了好久，基本上有兩種實(shí)現(xiàn)功能：

1，使用文件管理器，這個(gè)功能做起來(lái)比較麻煩，還要結(jié)合ckfinder。

2，使用拖拽上傳多張，簡(jiǎn)單暴力，推薦使用，注意多張圖片上傳的順序是以你鼠標(biāo)點(diǎn)擊拖動(dòng)的那一張圖片開(kāi)始向右排序如圖：。

下面我們來(lái)完成拖拽上傳多張圖片的功能吧：

1，到官網(wǎng)查看他的插件列表發(fā)現(xiàn)他有個(gè)插件叫 upload images,這個(gè)插件可以拖拽和粘貼圖片(粘貼好像不行我試過(guò)很多次)，然后你需要下載到你的plugs文件夾中，但是你會(huì)發(fā)現(xiàn)這個(gè)插件又依賴于其他的插件，最后我發(fā)現(xiàn)一共添加了9個(gè)插件config.extraPlugins = 'selectall,notification,notificationaggregator,widgetselection,filetools,lineutils,widget,uploadwidget,uploadimage';才算完成插件的添加，因?yàn)槟悴惶砑訛g覽器會(huì)報(bào)錯(cuò)，你可以根據(jù)錯(cuò)去添加插件，我整合好的ckedito包?。

2，在config.js中添加配置項(xiàng)：?config.imageUploadUrl = "/ckeditor/img"; 這是圖片拖拽后上傳到的地方，頁(yè)面正式的配置：

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

這里說(shuō)明下，頁(yè)面中的配置會(huì)將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);} 拖拽圖片上傳不和點(diǎn)擊圖片上傳一樣，它只需要以josn格式返回一些簡(jiǎn)單的信息。

4，到這里拖拽圖片傳的功能也實(shí)現(xiàn)了，但是有一個(gè)問(wèn)題就是，它會(huì)限制拖拽上傳的圖片格式，如果你需要修改的話：找到 supportedTypes: ?然后將它的值配置出來(lái)，以下是我的配置：supportedTypes: editor.config.uploadImgSupportedTypes == undefined ? /image\/(jpeg|png|gif|bmp)/ : editor.config.uploadImgSupportedTypes, ?然后在config.js中增加一項(xiàng)配置：config.uploadImgSupportedTypes = '';//可限制拖拽圖片上傳的類型 ?/image\/(jpeg|png|gif|bmp)/這樣就可以隨心所欲的配置啦~ 是不是很機(jī)智。哈哈哈。

結(jié)語(yǔ)：
在實(shí)現(xiàn)這個(gè)功能的過(guò)程中自己學(xué)習(xí)到了很多東西 ?

一，看官網(wǎng)，當(dāng)你百度或google不到你想要的，就去看看官網(wǎng)，非常棒

二，github看源碼，這是世界最大的開(kāi)源it論壇，你會(huì)發(fā)現(xiàn)它會(huì)是你一輩子的財(cái)富。

三，學(xué)會(huì)去閱讀英文文檔。

總結(jié)

以上是生活随笔為你收集整理的CkEditor批量上传图片(java)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。