微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

更改kindeditor编辑器,改用支持h5的video标签替换原有embed标签

kindeditor是一款不错的可视化编辑器,不过最近几年似乎没在更新,现在h5趋于主流,正好有个业务需要编辑器支持mp4视频的播放,考虑到现在h5中的video标签的强大,于是决定将原来系统中的embed标记更改好video。具体操作方法如下:

1、在296行

embed : [‘id‘,‘class‘,‘src‘,‘width‘,‘height‘,‘type‘,‘loop‘,‘autostart‘,‘quality‘,‘.width‘,‘.height‘,‘align‘,‘allowscriptaccess‘],

下面增加以下代码

video : [‘id‘,‘allowscriptaccess‘,‘controls‘],

修改后的效果如下图:

分享图片

2、在893-895行代码

if (/.(swf|flv)(?|$)/i.test(src)) {
	return ‘application/x-shockwave-flash‘;
}

下面增加以下代码:

if (/.(mp4|mp5)(?|$)/i.test(src)) {
	return ‘video/mp4‘;
}

分享图片

3、然后修改901-903行代码

if (/flash/i.test(type)) {
	return ‘ke-flash‘;
}

在下面增加

if (/video/i.test(type)) {
	return ‘ke-video‘;
}

修改后的效果如下图:

  

分享图片

4、在917行代码function _mediaimg(blankPath,attrs) {

在其上面增加代码

function _mediaVideo(attrs) {
	var html = ‘<video  ‘
	_each(attrs,function(key,val) {
	html += key + ‘="‘ + val + ‘" ‘;
	});

	html += ‘ controls="controls" />‘;
	return html;
}

 

分享图片

5、在955行代码:K.mediaEmbed = _mediaEmbed;的下面

增加代码 :K.mediaVideo = _mediaVideo;

好了,这样当我们上传视频时,就会使用video标记来引用视频了。取代以前的embed标签 。不过,这里还有一个问题,就是上传视频后,编辑器中为空白的(其实已经上传成功,切换到代码模式也能看到有内容)。使用chrome调试,发现问题在样式上。经过对比发现问题在这里
之前使用embed标签显示视频的效果

 

分享图片

所以我们增加样式即可,找到3528行的代码:‘img.ke-media {‘,
将其修改为‘img.ke-media,img.ke-video {‘,
这句话的含义就是ke-video样式与ke-media一样。好了,文件修改好,清除浏览器缓存(也可以按ctr+f5),再次上传视频查看效果解决

分享图片

分享图片

 

 

 引用: http://www.totcms.com/html/201901-30/20190130094548.htm

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。