Ueditor上傳本地音訊MP3

iamhungry2發表於2019-02-16
音訊
遇到一個專案，客戶要求能在編輯框中上傳錄音檔案。用的是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" >`;
    }

這樣就可以在原來插入視訊的地方上傳音訊檔案，並且自動判斷格式選擇正確的標籤顯示了

相關文章