Ueditor 百度编辑器利用视频插件上传音频

知兮丶青 js
阅读(92) 2021-04-01
Ueditor 百度编辑器利用视频插件上传音频
Ueditor 百度编辑器利用视频插件上传音频

百度编辑器Ueditor怎么利用视频插件上传音频呢,编辑器的上传视频插件也有mp3等音频格式上传,但是上传后的标签是video,这并不是我们想要的效果,我们想要是视频用video标签,而音频用audio标签。下面我们对ueditor.all.js和ueditor.all.min.js源码进行小改一下。



版本说明

修改的版本:UE.version "1.4.3"



修改源码

ueditor.all.js

1、约17774行,把image改为video。调整插入音频后不是一张代替图片,而是用真正的标签。

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'));

如图:

把image改成video.png


2、约17667行,加个判断把wav和mp3用audio标签,其他默认video。并加多个条件如果前端填入宽高为-1,则用audio,避免某些如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>';
//改为
if(/(wav|mp3)$/i.test(ext)||(width==-1&&height==-1)){
    str = '<audio' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' audio-js" ' + (align ? ' style="float:' + align + '"': '') +
        ' controls preload="none" src="' + url + '"></audio>';
}else{
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>';
}

如图:

判断把wav和mp3用audio标签,其他默认video.png



ueditor.all.min.js

1、找到相应位置,把image改为video

h.push(a(g.url,g.width||420,g.height||280,i+j,null,f,"image"));
//改为
h.push(a(g.url,g.width||420,g.height||280,i+j,null,f,"video"));

如图:

min版把image改成video.png


2、找到相应位置,加个判断把wav和mp3或宽高为-1用audio标签,其他默认video。

,i="<video"+(e?' id="'+e+'"':"")+' class="'+g+' video-js" '+(f?' style="float:'+f+'"':"")+' controls preload="none" width="'+b+'" height="'+d+'" src="'+a+'" data-setup="{}"><source src="'+a+'" type="video/'+j+'" /></video>'
//改为
;if(/(wav|mp3)$/i.test(j)||(b==-1&&d==-1)){i="<audio"+(e?' id="'+e+'"':"")+' class="'+g+' audio-js" '+(f?' style="float:'+f+'"':"")+' controls preload="none"  src="'+a+'"></audio>'}else{i="<video"+(e?' id="'+e+'"':"")+' class="'+g+' video-js" '+(f?' style="float:'+f+'"':"")+' controls preload="none" width="'+b+'" height="'+d+'" src="'+a+'" data-setup="{}"><source src="'+a+'" type="video/'+j+'" /></video>'}

如图:

min版判断把wav和mp3用audio标签,其他默认video.png



完成效果

完成效果-选择视频或音频.png

完成效果-编辑器内显示.png




原创文章,转载请注明出处:https://www.weizhixi.com/article/113.html