这两天公司的小系统有需求,就是在富文本编辑器(ckeditor)中配置能上传视频和音频
看了很多人写的博客,视频上传都采用的是flash+flvplayer.swf返回swf地址及视频上传地址来实现功能
但...但搁我手里,就突然间不好使了,迫于无奈只好换个方式----html5video
htmlvideo(视频)是由html5audio(音频插件)转换而来
现在开始:
1.首先下载需要的东西(html5video插件,及其依赖插件)
https://ckeditor.com/cke4/addon/html5video (html5video插件)
下载依赖插件
至此需要的东西都下载好了,开始配置
2.配置
将下载好的所有插件导入ckeditor下的plugins目录下
导入后进行config.js配置
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.removeDialogTabs = 'image:advanced;image:Link';//隐藏超链接与高级选项
config.filebrowserImageUploadUrl = "/HmCode/Shop/upload";//上传图片的地址
config.filebrowserHtml5videoUploadUrl = "/HmCode/Shop/uploads";//上传视频的地址
config.extraPlugins = 'html5video';
config.image_previewText = ' '//设置图片预览默认值为' '
};
启动项目访问页面就可以看到
但默认是没有上传的
PS:配置出来的上传视频样式 一半为中文 一半为英文是因为html5video下的en.js与zh-ch.js不一致,改成中文就行
修改html5video的配置文件
配置完成后就出现上传。
关于在后台上传视频是如何实现的,请百度自行搜素ckeditor配置上传图片
注意:
配置音频与配置视频同理,但由于视频插件是由音频插件转换而来,
所以它们无法同时存在。
第一次写博客,写的不好,请指教,谢谢