layui富文字編輯器layedit增加上傳視訊與音訊功能
阿新 • • 發佈：2018-12-26
改動效果：
layui2.4.3並沒有視訊、音訊等上傳功能，不過還好，目前有一個基於layui2.4.3的layedit擴充套件,增加了視訊上傳、字型顏色等等。
首先去下載一個layedit擴充套件檔案：中轉站
根據說明替換layedit.js，直接呼叫就會出現上面的效果，注意，編輯器中點選html會出錯，那是因為少引入了一個ace,js，需要擴充套件檔案中的Content/ace/ace.js，把Content資料夾貼上到專案中layui目錄下，然後在呼叫的介面引入ace.js即可。
... <body> <script src="/public/layui/layui.js"></script> <script src="/public/layui/lay/modules/Content/ace/ace.js"></script> <textarea id="demo" style="display: none;"></textarea> <script type="text/javascript"> layui.use('layedit', function(){ var layedit = layui.layedit; layedit.build('demo',{ tool: [ 'html', 'code', 'strong', 'italic', 'underline', 'del', 'addhr', '|', 'fontFomatt', 'colorpicker', 'face' , '|', 'left', 'center', 'right', '|', 'link', 'unlink', 'image_alt', 'video', 'anchors' , '|', 'fullScreen' ], uploadImage: { url: '/admin/base/upload' }, uploadVideo: { url: '/admin/base/upload', accept: 'video', acceptMime: 'video/*', exts: 'mp4|flv|avi|rm|rmvb' } }); //建立編輯器 }); </script> </body> ...
現在雖然有視訊了，但是專案還缺少音訊，去網上查了一下，有那麼零星的幾個人去改原始碼實現，雖然把程式碼貼了出來，但是不知版本還是怎麼實在看不懂，程式碼完全對不上，沒辦法，只有自己動手了。
同樣是改原始碼的思路，首先檢視layedit.js中檢視上傳視訊的程式碼，試想加入流程，發現有三處程式碼塊的邏輯，如果新增音訊，那麼就只新增這三處的程式碼塊。
按步驟應當是：
1、增加標籤
搜尋video查詢下方程式碼
增加一個audio標籤
//注意，如果複製的video需要把標籤中的內容去掉，i標籤樣式修改layui-icon-headset，否則會造成樣式錯亂 audio: '<i class="layui-icon layui-icon-headset" title="插入音訊" layedit-event="audio" style="font-size:18px"></i>'
2、增加config配置
搜尋uploadVideo查詢下方程式碼：
增加程式碼：
uploadAudio: {
url: "",
accept: "audio",
acceptMime: "audio/*",
exts: "mp3|m4a|wma|amr|ape|flac|aac",
size: "20480"
},
3增加上傳音訊處理函式：
搜尋video:查詢程式碼：
加入相同格式的函式:
audio: function(n) { i.open({ type: 1, id: "fly-jie-audio-upload", title: "音訊", shade: !1, area: "600px", offset: "100px", skin: "layui-layer-border", content: ['<ul class="layui-form layui-form-pane" style="margin: 20px;">', '<li class="layui-form-item">', '<button type="button" class="layui-btn" id="LayEdit_InsertAudio"> <i class="layui-icon"></i>上傳音訊</button>', '<input type="text" name="audio" placeholder="請選擇檔案" style="width: 79%;position: relative;float: right;" class="layui-input">', "</li>", '<li class="layui-form-item" style="text-align: center;">', '<button type="button" lay-submit class="layui-btn layedit-btn-yes"> 確定 </button>', '<button style="margin-left: 20px;" type="button" class="layui-btn layui-btn-primary"> 取消 </button>', "</li>", "</ul>"].join(""), success: function(l, o) { layui.use("upload", function(s) { var r, c = l.find('input[name="audio"]'), s = layui.upload, f = a.uploadAudio || {}; s.render({ elem: "#LayEdit_InsertAudio", url: f.url, accept: f.accept, acceptMime: f.acceptMime, exts: f.exts, size: f.size, before: function(t) { r = i.msg("檔案上傳中,請稍等哦", { icon: 16, shade: .3, time: 0 }) }, done: function(t, e, n) { if (i.close(r), 0 == t.code) t.data = t.data || {}, c.val(t.data.src); else var a = i.open({ type: 1, anim: 2, icon: 5, title: "提示", area: ["390px", "260px"], offset: "t", content: t.msg + "<div><audio src='" + t.data.src + "' controls='controls'/></div>確定使用該檔案嗎？", btn: ["確定", "取消"], yes: function() { t.data = t.data || {}, c.val(t.data.src), i.close(a) }, btn2: function() { i.close(a) } }) } }), l.find(".layui-btn-primary").on("click", function() { i.close(o) }), l.find(".layedit-btn-yes").on("click", function() { var a = y(n); e(a).parent(); h.call(t, "p", { text: ' <audio src="' + c.val() + '" controls="controls" >您的瀏覽器不支援audio播放</audio> ' }, n), i.close(o) }) }) } }) },
到此步驟就算在layedit.js檔案增加了一個上傳音訊處理的功能，接下來就是呼叫了
layedit.build('demo',{
tool: [
'html', 'code', 'strong', 'italic', 'underline', 'del', 'addhr', '|', 'fontFomatt', 'colorpicker', 'face'
, '|', 'left', 'center', 'right', '|', 'link', 'unlink', 'image_alt','audio', 'video', 'anchors'
, '|', 'fullScreen'
],
uploadImage: {
url: '/admin/base/upload'
},
uploadVideo: {
url: '/admin/base/upload',
accept: 'video',
acceptMime: 'video/*',
exts: 'mp4|flv|avi|rm|rmvb'
},
uploadAudio: {
url: '/admin/base/upload',
accept: 'audio',
acceptMime: 'audio/*',
exts: 'mp3|m4a|wma|amr|ape|flac|aac'
}
});
//這有一個提示語的問題，如果把uploadAudio引數中url下方的三個配置項註釋掉，那麼再選擇除去音訊之外的檔案會報“選擇的圖片中包含不支援的格式”，這樣的效果並不好，所以加上這三項等於把其他檔案遮蔽掉了，這樣使用者只能選擇音訊檔案。同理，視訊也是如此。