基于layui社区模板编辑器，增加视频音频上传功能发布

来源：互联网发布：淘宝怎么设置地区不卖编辑：程序博客网时间：2024/06/08 19:24

此功能展示请查看 http://fly.layui.com/jie/8077.html

具体实现代码如下：
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 头部引入即可；

技术帮助：

阅读全文

1 0