CKEditor上傳視頻

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

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

在我上一篇文章中已經講到，使用ckeditor上傳多圖，這篇文章主要是講上傳視頻。其實ckeditor中會自帶一個插件就是flash，

就是這個按鈕，但是它默認是不可以上傳，只可以通過第三方URL來添加圖片，并沒有上傳的按鈕，我們要做的是將上傳按鈕顯示出來，達到這樣的效果。

開始吧 ??

做這個功能你不需要下載任何插件，因為ckeditor的full版他是自帶的flash插件，當然你需要下載一個播放器flvplayer.swf,它支持的格式有flv MP4 mov 你可以去官網看看.

1，在config.js中配置?config.filebrowserFlashUploadUrl = "/ckeditor/flash"; ?然后再頁面上替換掉它

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

這是視頻上傳的路徑，也就是一個controller，

2，contorller層：

@RequestMapping(value = "/ajax/upload/webdata/{dir}/video", method = RequestMethod.POST)public ResponseEntity<String> upload_video(Map<String, Object> model, @PathVariable String dir, @RequestParam("CKEditorFuncNum") String funNum, @RequestParam("upload") MultipartFile file,HttpServletRequest request) {if (file.getSize() > 0) {String path = FileUtil.uploadFile(file, BaseSysConf.VideoWebDataDir_Slash + dir);model.put("msg", "File '" + file.getOriginalFilename() + "' uploaded successfully");String basePath = StringUtils.isEmpty(BaseWebConf.WebImgRootPath) ? request.getContextPath() : BaseWebConf.WebImgRootPath;String videopath = basePath + BaseSysConf.VideoWebDataDir_Slash + BaseSysConf.VideoPlayerName + basePath + path;String resp = "<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction(" + funNum + ",'" + videopath + "','')</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);}}

這里要說明下，上傳視頻和上傳圖片的controller很像，但是多了一些配置，原因在于：圖片上傳之后，只需要返回圖片的訪問路徑，而視頻上傳之后，需要返回播放器的訪問路徑+視頻的訪問路徑，也就是：?http://s1.180800.cn/file/video/videoplayer.swf ?vcastr_file= http://s1.180800.cn/file/video/finance/161226140342984.mp4 ? 紅色部分就相當于一個參數，然后后面是視頻路徑，如果你只返回視頻路徑的話你就要去修改flash.js的源碼，請看這篇文章 ?

讓CKEditor支持FLV視頻播放? ?這篇文章講的很好，但是他需要修改源碼，那是一件非常麻煩的事，因為flash.js是經過壓縮的，當然你可以在github上看 ?flash.js源碼? ?但是修改很麻煩，所以我想了一個解決辦法，就是將播放器的地址和視頻的地址一并返回，這樣就做到了不需要修改源碼。String videopath = basePath + BaseSysConf.VideoWebDataDir_Slash + BaseSysConf.VideoPlayerName + ?basePath + path;

這里我將播放器和視頻放在同一個父目錄中。當然你們可以隨便放哪里，但是要讓別人必須能訪問的到。
3，到這里上傳視頻就可以了，

這里說些小技巧：1，當你在預覽后點擊確定，它會顯示成上圖2，雙擊修改屬性，

2，下次在進入時顯示成視頻，你要修改屬性的話，雙擊左上角源碼模式，又變回flash。就可以修改

3，對于默認的一些設置你也可以修改，你可以到 github上看源碼然后修改；其他的默認選項也可以這樣設置。當然我們的是壓縮的，相信你可以找到，我也會給出我已經改好的下載包。

好了關于上傳圖片和上傳視頻的教程都講完了，如果大家有疑問的可以留言

總結

以上是生活随笔為你收集整理的CKEditor上传视频(java)的全部內容，希望文章能夠幫你解決所遇到的問題。

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