Ckeditor配置上传音频视频

这两天公司的小系统有需求,就是在富文本编辑器(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配置上传图片

 

注意:

配置音频与配置视频同理,但由于视频插件是由音频插件转换而来,

所以它们无法同时存在。

 

第一次写博客,写的不好,请指教,谢谢

 

 

 

  • 6
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 12
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值