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

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

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

前言

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

開始吧：

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

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

上傳單張圖片：

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

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

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

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

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

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

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

2，在config.js中添加配置項(xiàng)：?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);} 拖拽圖片上傳不和點(diǎn)擊圖片上傳一樣，它只需要以josn格式返回一些簡單的信息。

4，到這里拖拽圖片傳的功能也實(shí)現(xiàn)了，但是有一個問題就是，它會限制拖拽上傳的圖片格式，如果你需要修改的話：找到 supportedTypes: ?然后將它的值配置出來，以下是我的配置：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é)語：
在實(shí)現(xiàn)這個功能的過程中自己學(xué)習(xí)到了很多東西 ?

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

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

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

總結(jié)

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

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