此功能 展示 请查看
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); }); } }); }其中 /Ajax/ThreadUpload/ 为上传地址,后台接受自己去处理保存图片;
下面开始处理内容转移工作;
查找
注意以上图片 我是增加了几个回车,注意分割的时候的 .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 头部 引入即可;
技术帮助: