遇到一個項目,客戶要求能在編輯框中上傳錄音文件。用的是Ueditor編輯器,可是卻不支持本地MP3上傳並使用audio標籤播放,只能搜索在線MP3,實在有點不方便。這裏說一下怎麼修改,主要仍是利用原來的【插入視頻】的功能:
步驟一:
上傳視頻的時候判斷格式,若是是音頻格式的話則調用原來music的處理方法
須要修改文件:dialogsvideovideo.js
位置在於:查找「function insertUpload」,314左右開始修改css
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左右開始修改html
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" >'; }
這樣就能夠在原來插入視頻的地方上傳音頻文件,而且自動判斷格式選擇正確的標籤顯示了app