解决ueditor上传视频、音频的一些bug
使用ueditor上传视频和音频功能之前一直没有用，也没有去搞因为用不太着。现在想上传个视频就搞了一下都是在网上找的方法一步一步的试，花了几个小时终于好了。记录下怎么改的。
首先解决插入ifame没有效的问题：
ueditor中默认是不支持ifame的，要将其加入白名单，方法如下： ueditor.config.js中，365行,whitList: {的里面加上一句 iframe : ['class' , 'style' , 'src', 'frameborder', 'width', 'height'],
上传视频问题：
修改ueditor.all.js文件 ueditor.all.js，17769行 html.push(creatInsertStr( vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, 'image'));修改为 html.push(creatInsertStr( vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, 'video')); 7343,7344,7346行，注释掉代码： var root = UE.htmlparser(html); me.filterInputRule(root); html = root.toHtml();
搜索这个me.commands["insertvideo"] 方法，大概在17762行；找到 image改成video，注释掉for...如下
me.commands["insertvideo"] = {
execCommand: function (cmd, videoObjs, type){
videoObjs = utils.isArray(videoObjs)?videoObjs:[videoObjs];
var html = [],id = 'tmpVedio', cl;
for(var i=0,vi,len = videoObjs.length;i<len;i++){
vi = videoObjs[i];
cl = (type == 'upload' ? 'edui-upload-video video-js vjs-default-skin':'edui-faked-video');
html.push(creatInsertStr( vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, 'video'));
}
me.execCommand("inserthtml",html.join(""),true);
var rng = this.selection.getRange();
/*for(var i= 0,len=videoObjs.length;i<len;i++){
var img = this.document.getElementById('tmpVedio'+i);
domUtils.removeAttributes(img,'id');
rng.selectNode(img).select();
me.execCommand('imagefloat',videoObjs[i].align)
}*/
},找到 以下方法，大概在17654行， 去掉：embed 的 type="application/x-shockwave-flash" class=" + classname + "pluginspage="http://www.macromedia.com/go/getflashplayer"' ；
switch (type){
case 'image':
str = '<img ' + (id ? 'id="' + id+'"' : '') + ' width="'+ width +'" height="' + height + '" _url="'+url+'" class="' + classname.replace(/\bvideo-js\b/, '') + '"' +
' src="' + me.options.UEDITOR_HOME_URL+'themes/default/images/spacer.gif" style="background:url('+me.options.UEDITOR_HOME_URL+'themes/default/images/videologo.gif) no-repeat center center; border:1px solid gray;'+(align ? 'float:' + align + ';': '')+'" />'
break;
case 'embed':
str = '<embed src="' + utils.html(url) + '" width="' + width + '" height="' + height + '"' + (align ? ' style="float:' + align + '"': '') +
' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >';
break;
case 'video':
var ext = url.substr(url.lastIndexOf('.') + 1);
if(ext == 'ogv') ext = 'ogg';
str = '<video' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' video-js" ' + (align ? ' style="float:' + align + '"': '') +
' controls preload="none" width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' +
'<source src="' + url + '" type="video/' + ext + '" /></video>';
break;
}
return str;上传单个视频无法保存和无法编辑问题：
在ueditor.all.js中，检索到creatInsertStr方法，就是那面那个代码，最后加个br 分行 可解决不能编辑问题。加个隐藏的文本解决单个视频无法保存问题。
改好后：
case 'video':
var ext = url.substr(url.lastIndexOf('.') + 1);
if(ext == 'ogv') ext = 'ogg';
str = '<video' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' video-js" ' + (align ? ' style="float:' + align + '"': '') +
' controls preload="none" width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' +
'<source src="' + url + '" type="video/' + ext + '" /></video><span style="display:none;">解决单个视频为空问题，后面br不能编辑问题</span><br/>';
break;ueditor.config.js中，365行,whitList: {的里面加上一句 source: ['src', 'type'],
embed: ['type', 'class', 'pluginspage', 'src', 'width', 'height', 'align', 'style', 'wmode', 'play', 'autoplay', 'loop', 'menu', 'allowscriptaccess', 'allowfullscreen', 'controls', 'preload']
修改config.json，上传视频的路径（根据自己的实际情况改）。 "videoPathFormat": "/upload/ueditorVideo/{yyyy}{mm}{dd}/{time}{ss}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */ "videoUrlPrefix": "===/===",
上传音频问题：
本地上传音频也是 在上传视频面板那里上传，所以只需判断文件类型就可以了，在 ueditor.all.js 这文件 找到 UE.plugins['video'] 这个方法，大概在17632行改成下面这样。
switch (type){
case 'image':
str = '<img ' + (id ? 'id="' + id+'"' : '') + ' width="'+ width +'" height="' + height + '" _url="'+url+'" class="' + classname.replace(/\bvideo-js\b/, '') + '"' +
' src="' + me.options.UEDITOR_HOME_URL+'themes/default/images/spacer.gif" style="background:url('+me.options.UEDITOR_HOME_URL+'themes/default/images/videologo.gif) no-repeat center center; border:1px solid gray;'+(align ? 'float:' + align + ';': '')+'" />'
break;
case 'embed':
str = '<embed type="application/x-shockwave-flash" class="' + classname + '" pluginspage="http://www.macromedia.com/go/getflashplayer"' +
' src="' + utils.html(url) + '" width="' + width + '" height="' + height + '"' + (align ? ' style="float:' + align + '"': '') +
' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >';
break;
case 'video':
var ext = url.substr(url.lastIndexOf('.') + 1);
if (ext == 'ogv') ext = 'ogg';
if (ext == "mp3") {
str = '<audio' + (id ? ' id="' + id + '"' : '') + ' class=" audio-js" autoplay="autoplay"' + (align ? ' style="float:' + align + '"' : '') +' controls preload="none" width="' + width + '" height="' + height + '" src="' + url + '">" /></audio>';
} else {
str = '<video' + (id ? ' id="' + id + '"' : '') + (align ? ' style="float:' + align + '"' : '') + 'controls width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' + '<source src="' + url + '" type="video/' + ext + '" /></video>';
}
break;
/*case 'video':
var ext = url.substr(url.lastIndexOf('.') + 1);
if(ext == 'ogv') ext = 'ogg';
str = '<video' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' video-js" ' + (align ? ' style="float:' + align + '"': '') +
' controls preload="none" width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' +
'<source src="' + url + '" type="video/' + ext + '" /></video>';
break;*/
}
return str;
}改完后的效果~~~~
http://www.zjhuiwan.cn/blogImg/upload/ueditorVideo/20181218/154511917376613006037.mp4
腾讯云开发者
