CKEditor上传视频(java)

版权声明:猪哥原创,禁止转载,违者必纠! https://blog.csdn.net/u014044812/article/details/53897024

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上看源码然后修改;其他的默认选项也可以这样设置。当然我们的是压缩的,相信你可以找到,我也会给出我已经改好的下载包




好了关于上传图片和上传视频的教程都讲完了,如果大家有疑问的可以留言

展开阅读全文

没有更多推荐了,返回首页