CKEditor上傳視頻(java)

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上看源碼而後修改；其餘的默認選項也能夠這樣設置。固然咱們的是壓縮的，相信你能夠找到，我也會給出我已經改好的下載包。

好了關於上傳圖片和上傳視頻的教程都講完了，若是你們有疑問的能夠留言