TP6BearAdmin 使用wangEditor富文本自定义上传视频

1. 查看前端代码默认是没有开启上传视频的

2. 我们将上传视频代码贴在下方

// 后端上传视频地址
editor_content.config.uploadVideoServer = '{:url("admin/file/editor")}';
// 上传文件的文件名
editor_content.config.uploadVideoName = 'video';
// 自定义上传参数, 这两个参数是必不可少的, 一定要加上
editor_content.config.uploadVideoParams = {
    file_field: 'video',
    file_type: 'video'
}

3. 我们可以查看后端接口的参数要求, 上面js上传的参数最好为 video 我们查看tp6 config文件中filesystem中的 video文件名 验证, 如果前端上传的文件名不为video 就不会验证到, 除非你将 video验证名字修改, 前端上传参数也修改就可以了, 我这边没有修改使用 video

4. 我们配置完后, 就可将上方 2 中的 js 放到 下方 js 中

<div class="form-group row">
    <label for="content" class="col-sm-2 col-form-label">内容</label>
    <div class="col-sm-10">
        <div id="contentEditor">{$data.content|raw|default='<p></p>'}</div>
        <textarea id="content" name="content" style="display: none">{$data.content|raw|default=''}</textarea>
    </div>
</div>
<script>
	  var E = E || window.wangEditor;
	  if (editor_content !== undefined) {
	      editor_content.destroy();
	  }
	  var editor_content = new E('#contentEditor');
	  editor_content.config.zIndex = 1000;
	  editor_content.config.uploadImgServer = '{:url("admin/file/editor")}';
	  editor_content.config.uploadFileName = 'file';
	  // 放在这儿的 start
	  editor_content.config.uploadVideoServer = '{:url("admin/file/editor")}';
      editor_content.config.uploadVideoName = 'video';
      editor_content.config.uploadVideoParams = {
          file_field: 'video',
          file_type: 'video'
      }
      // 这儿结束 end
	  editor_content.create();
	  editor_content.config.onchange = function (newHtml) {
	      $('#content').val(newHtml);
	  };
</script>

5. 查看了wangEditor文档,图片返回为二维数组, 而我们视频返回的则是一维数组, 我们来到后端上传地址将返回json修改一下, 可以根据传递的image 和 video 来判断是图片还是视频

// 视频上传和图片上传的返回格式不一样需要做判断
if ($file_type == 'image') {
    return json([
        'errno' => 0,
        'data'  => [
            [
                'url'  => $url,
                'href' => '',
                'alt'  => $file->getOriginalName(),
                'size' => $file->getSize(),
            ],
        ]
    ]);
} else if ($file_type == 'video') {
    return json([
        'errno' => 0,
        'data'  => [
            'url'  => $url,
        ]
    ]);
}

6. 配置完成后, 我们去页面就可以查看, 再次上传, 上传成功

1.我们需要注意测试上传的视频要小, 如果过大上传不了, 就请配置 Nginx 和 PHP