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

最新推荐文章于 2022-05-18 16:01:23 发布

原创最新推荐文章于 2022-05-18 16:01:23 发布 · 1.1w 阅读

4 ·

CC 4.0 BY-SA版权

本文介绍如何在layui富文本编辑器中增加视频和音频插入功能，并提供具体实现步骤与代码示例。

此功能展示请查看 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 头部引入即可；

技术帮助：