CKEditor上傳視頻

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

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

在我上一篇文章中已經(jīng)講到，使用ckeditor上傳多圖，這篇文章主要是講上傳視頻。其實(shí)ckeditor中會(huì)自帶一個(gè)插件就是flash，

就是這個(gè)按鈕，但是它默認(rèn)是不可以上傳，只可以通過(guò)第三方URL來(lái)添加圖片，并沒有上傳的按鈕，我們要做的是將上傳按鈕顯示出來(lái)，達(dá)到這樣的效果。

開始吧 ??

做這個(gè)功能你不需要下載任何插件，因?yàn)閏keditor的full版他是自帶的flash插件，當(dāng)然你需要下載一個(gè)播放器flvplayer.swf,它支持的格式有flv MP4 mov 你可以去官網(wǎng)看看.

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

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

這是視頻上傳的路徑，也就是一個(gè)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);}}

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

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

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

這里說(shuō)些小技巧：1，當(dāng)你在預(yù)覽后點(diǎn)擊確定，它會(huì)顯示成上圖2，雙擊修改屬性，

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

3，對(duì)于默認(rèn)的一些設(shè)置你也可以修改，你可以到 github上看源碼然后修改；其他的默認(rèn)選項(xiàng)也可以這樣設(shè)置。當(dāng)然我們的是壓縮的，相信你可以找到，我也會(huì)給出我已經(jīng)改好的下載包。

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

總結(jié)

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

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