kindeditor修改上传音视频改为生成video标签

Kindeditor修改音视频上传后生成H5 Video标签

1.前言

近期因为一个比较早的项目实用的kindeditor编辑器，里面有一个添加音视频功能，因为这两年几乎所有的浏览器都不再默认支持flashle,所以编辑器里的这个功能添加的embed标签也无用了，那么就需要将embed标签换成video，同时也把flash那个上传标签关闭了，那么为了最小修改最合适的就是修改kindeditor-all.js这个文件了。当时我的js版本是4.1.12，其他版本可能会存在一点差异，那么开始吧！

2.增加标签集

打开kindeditor-all.js，大概在第305行左右，可以看见embed标签，为了方便查找区分，在其下方插入video的相关标签及可能用到的属性，如果这里不定义，那么在编辑器处理转换的过程中video里面的属性就会丢失。

需要添加的代码：

video: ['id', 'class', 'style', 'src', 'width', 'height', 'type', 'loop', 'autoplay', 'quality', '.width', '.height', 'align', 'allowscriptaccess', 'controls'],

添加后如下图

3.修改html生成方法

在kindeditor-all.js里查找function_mediaEmbed(attrs)方法，将原来的生成embed标签代码替换成生成video的，代码如下：

var html = '

_each(attrs, function (key, val) {

html += key + '="' + val + '" ';

});

html += 'controls="controls"/>

';

return html;

其中style="max-width: 100%;"是为了解决视频在手机上播放问题，直接设置宽高在手机上是很糟糕的播放效果。

效果图如下：

4.优化

上几部完成后会发现两个问题：

1、点击上传后点击弹窗的确认按钮，发现在编辑器的编辑框里是插入了一张图而不是直接显示视频，但是点击一下显示html代码再换回来就发现显示的又是视频了。

2、如果只插入视频保存的时候会发现，虽然保存成功但是实际上没有保存到任何内容

3、视频如果制定了宽高那么在手机上的效果就相当糟糕了。

针对第一个问题，是因为原来的编辑器因为没法直接显示视频所以将embed标签加上了一个默认背景图的样式。修改方法如下：

首先通过搜索找到KindEditor.plugin('media', function(K) {，可以在这个方法里的生成dialog方法里找到yesBtn方法，在里面有个”var html=K. mediaImg(“,将“mediaImg”替换成“mediaEmbed”，替换后效果如下：

这个修改后在视频上传的弹窗上点击保存的时候就会在编辑器的编辑框里直接生成video 的播放代码了。

第二个问题这个是编辑器有个一个过滤设置，如果只插入视频那么kindeditor的isEmpty方

法则会返回空，这个时候需要在kindeditor-all.js里搜索isEmpty，在其上方有个text方法，在里面的embed后增加|video,这样只有video的时候不会被判断成空了。

第三个问题我除了在生成video代码时增加一个style="max-width: 100%;",另外就是在KindEditor.plugin('media', function(K)方法里将width和height的输入框注释掉，这样弹窗里就不需要输入宽高了，通过style默认给了max-height :100%效果。

以上全部处理OK，另外video的自动播放是autoplay,原来的时aotuStart，注意修改。

另外我考虑视频上传只需要一个即可，可以把原来flash的那个删了，删除方法如下：

如果没有在调用kindeditor的地方单独设置options的话,那么在kindeditor-all.js里搜索K.options，找到items,将里面的flash删掉即可。