基於layui社群模板編輯器，增加視訊音訊上傳功能釋出
阿新 • • 發佈：2019-01-09
此功能 展示 請檢視 http://fly.layui.com/jie/8077.html
具體實現程式碼如下：
1、查詢官方 demo/res/mods/index.js
超找程式碼
上面新增以下程式碼；
下面開始處理內容轉移工作；
查詢
注意以上圖片 我是增加了幾個回車，注意分割的時候的 .replace 前面回車， 注意前面的 點 ；
在回車出新增以下程式碼：
另外付一個 附件 請自行去我百度雲盤系在（css 和 js） ；
連結：http://pan.baidu.com/s/1jHGqHDk 密碼：sfdw
js 檔案放入 demo/res/mods 中；與 index.js 同級目錄；
具體實現程式碼如下：
1、查詢官方 demo/res/mods/index.js
超找程式碼
<span type="code" title="插入程式碼"><i class="iconfont icon-daima"></i>程式碼</span>下面插入
+'<span type="video" title="視訊"><i class="layui-icon"></i>視訊</span>' +'<span type="audio" title="音訊"><i class="layui-icon"></i>音訊</span>'
查詢程式碼
,yulan: function(editor){ //預覽上面新增以下程式碼；
,video: function(editor){ //插入視訊
layer.open({
type: 1
,id: 'fly-jie-video-upload'
,title: '插入視訊'
,shade: false
,area: '465px'
,skin: 'layui-layer-border'
,content: ['<ul class="layui-form layui-form-pane" style="margin: 20px;">'
,'<li class="layui-form-item">'
,'<label class="layui-form-label">封面</label>'
,'<div class="layui-input-inline">'
,'<input type="text" required name="cover" placeholder="支援直接貼上遠端圖片地址" value="" class="layui-input">'
,'</div>'
,'<input required type="file" name="file" lay-type="image" class="layui-upload-file" value="">'
,'</li>'
,'<li class="layui-form-item">'
,'<label class="layui-form-label">URL</label>'
,'<div class="layui-input-inline">'
,'<input type="text" required name="video" placeholder="支援直接貼上遠端視訊地址" value="" class="layui-input">'
,'</div>'
,'<input required type="file" name="file" lay-type="video" class="layui-upload-file" value="">'
,'</li>'
,'<li class="layui-form-item" style="text-align: center;">'
,'<button type="button" lay-submit lay-filter="uploadImages" class="layui-btn">確認</button>'
,'</li>'
,'</ul>'].join('')
,success: function(layero, index){
var loding, video = layero.find('input[name="video"]'), cover = layero.find('input[name="cover"]');
layui.upload({
url: '/Ajax/ThreadUpload/'
,before: function(input){ loding = layer.msg('檔案上傳中,請稍等哦', { icon: 16 ,shade:0.3,time:0 }); }
,elem: '#fly-jie-video-upload .layui-upload-file'
,success: function(res,input){
layer.close(loding);
if(res.status == 1){
if($(input).attr('lay-type') == 'image'){
cover.val(res.data);
}else{
video.val(res.data);
}
} else {
layer.msg(res.msg, {icon: 5});
}
}
});
form.on('submit(uploadImages)', function(data){
var field = data.field;
if(!field.video) return video.focus();
layui.focusInsert(editor[0], 'video('+field.cover+')['+ field.video + '] ');
layer.close(index);
});
}
});
}
,audio: function(editor){ //插入音訊
layer.open({
type: 1
,id: 'fly-jie-audio-upload'
,title: '插入音訊'
,shade: false
,area: '465px'
,skin: 'layui-layer-border'
,content: ['<ul class="layui-form layui-form-pane" style="margin: 20px;">'
,'<li class="layui-form-item">'
,'<label class="layui-form-label">URL</label>'
,'<div class="layui-input-inline">'
,'<input required name="audio" placeholder="支援直接貼上遠端音訊地址" value="" class="layui-input">'
,'</div>'
,'<input required type="file" name="file" lay-type="audio" class="layui-upload-file" value="">'
,'</li>'
,'<li class="layui-form-item" style="text-align: center;">'
,'<button type="button" lay-submit lay-filter="uploadImages" class="layui-btn">確認</button>'
,'</li>'
,'</ul>'].join('')
,success: function(layero, index){
var loding,image = layero.find('input[name="audio"]');
layui.upload({
url: '/Ajax/ThreadUpload/',elem: '#fly-jie-audio-upload .layui-upload-file'
,before: function(input){ loding = layer.msg('檔案上傳中,請稍等哦', { icon: 16 ,shade:0.3,time:0 }); }
,success: function(res){
layer.close(loding);
if(res.status == 1){
image.val(res.data);
} else {
layer.msg(res.msg, {icon: 5});
}
}
});
form.on('submit(uploadImages)', function(data){
var field = data.field;
if(!field.audio) return image.focus();
layui.focusInsert(editor[0], 'audio['+ field.audio + '] ');
layer.close(index);
});
}
});
}
下面開始處理內容轉移工作；
查詢
注意以上圖片 我是增加了幾個回車，注意分割的時候的 .replace 前面回車， 注意前面的 點 ；
在回車出新增以下程式碼：
.replace(/video\(.*?\)\[([^\s]+?)\]/g, function(str){
var cover = (str.match(/video\(([\s\S]+?)\)\[/)||[])[1];
var video = (str.match(/\)\[([^\s]+?)\]/)||[])[1];
cover = cover ? cover : '/Public/Topic/images/video_cover.jpg';
return '<video poster="'+ cover + '" controls crossorigin><source src="'+ video + '" type="video/mp4"></video>';
})
.replace(/audio\[([^\s]+?)\]/g, function(audio){
return '<audio controls><source src="'+ audio.replace(/(^audio\[)|(\]$)/g, '')+ '" type="audio/mp3"></audio>';
})
//載入編輯器
gather.layEditor({
elem: '.fly-editor'
});
下面新增 layui.use('plyr', function(plyr){
plyr.setup();
});
在有編輯器的頁面 頭部 引入 css 樣式檔案；另外付一個 附件 請自行去我百度雲盤系在（css 和 js） ；
連結：http://pan.baidu.com/s/1jHGqHDk 密碼：sfdw
js 檔案放入 demo/res/mods 中；與 index.js 同級目錄；
css 檔案放入 demo/res/css 中 html 頭部 引入即可；
技術幫助：