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上看源码而后修改；其余的默认选项也能够这样设置。固然咱们的是压缩的，相信你能够找到，我也会给出我已经改好的下载包。

好了关于上传图片和上传视频的教程都讲完了，若是你们有疑问的能够留言