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)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。