Ueditor上传本地音频MP3 - 爱码网

遇到一个项目，客户要求能在编辑框中上传录音文件。用的是Ueditor编辑器，但是却不支持本地MP3上传并使用audio标签播放，只能搜索在线MP3，实在有点不方便。这里说一下怎么修改，主要还是利用原来的【插入视频】的功能：

步骤一：
上传视频的时候判断格式，如果是音频格式的话则调用原来music的处理方法
需要修改文件：dialogsvideovideo.js
位置在于：查找“function insertUpload”，314左右开始修改

if (count) {
     $(\'.info\', \'#queueList\').html(\'<span style="color:red;">\' + \'还有2个未上传文件\'.replace(/[\d]/, count) + \'</span>\');
            return false;
        } else {
            var is_music = 0;
            var ext = file.url.split(\'.\').pop().toLowerCase() ;
            var music_type = [\'mp3\',\'wav\'];
            for(var i in music_type){
                if(music_type[i]== ext){
                    is_music = 1;
                }
            }
            if (is_music) {
                editor.execCommand(\'music\', {
                    url: uploadDir + file.url,
                    width: 400,
                    height: 95
                });
            } else {
                editor.execCommand(\'insertvideo\', videoObjs, \'upload\');
            }
        }

步骤二：
修改原来music插件返回的标签格式从embed改成audio，如果你引用的是ueditor.all.min.js则需要重新压缩一次
需要修改文件：ueditor.all.js
查找位置：查找“UE.plugin.register(\'music\',”，23607左右开始修改

function creatInsertStr(url,width,height,align,cssfloat,toEmbed){
        return  !toEmbed ?
                \'<img \' +
                    (align && !cssfloat? \'align="\' + align + \'"\' : \'\') +
                    (cssfloat ? \'style="float:\' + cssfloat + \'"\' : \'\') +
                    \' width="\'+ width +\'" height="\' + height + \'" _url="\'+url+\'" class="edui-faked-music"\' +
                    \' src="\'+me.options.langPath+me.options.lang+\'/images/music.png" />\'
            :
            \'<audio class="edui-faked-music" controls="controls" src="\'+ url+\'" width="\'+width+\'" height="\'+height+\'" \'+(align&&!cssfloat?\'align="\'+align+\'"\':"")+(cssfloat?\'style="float:\'+cssfloat+\'"\':"")+\'>\';
            // \'<embed type="application/x-shockwave-flash" class="edui-faked-music" pluginspage="http://www.macromedia.com/go/getflashplayer"\' +
            //     \' src="\' + url + \'" width="\' + width  + \'" height="\' + height  + \'" \'+ (align && !cssfloat? \'align="\' + align + \'"\' : \'\') +
            //     (cssfloat ? \'style="float:\' + cssfloat + \'"\' : \'\') +
            //     \' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >\';
    }

这样就可以在原来插入视频的地方上传音频文件，并且自动判断格式选择正确的标签显示了

本文转载于:猿2048➽https://www.mk2048.com/blog/blog.php?id=habk1hcikhj