Avue2 wangeditor(富文本) 支持视频上传

1.默认效果

2.修改后的效果

3.具体步骤如下

3.1 源码copy到我们的组件模块下，删掉无用代码，结构如下

3.2 修改项目引用，直接引用我们本地组件

import AvueUeditor from '@/components/avue-plugin-ueditor';

3.3 修改main.vue文件，主要修改两个方法

1.initEdit()方法中增加一下代码

// 配置 server 接口地址
this.editor.config.uploadVideoServer = '/front-api/file/upload';

2.增加initUploadVideo()方法

// 上传视频
initUploadVideo() {
  this.editor.config.customUploadVideo = (resultFiles, insertVideoFn) => {
    // resultFiles 是 input 中选中的文件列表
    // insertVideoFn 是获取视频 url 后，插入到编辑器的方法

    // 上传视频，返回结果，将视频地址插入到编辑器中
    this.uploadFile(resultFiles[0]).then(res => {
      insertVideoFn(res);
    });
  };
},

3.initEdit()方法中调用一下上传视频的方法

this.initUploadVideo();

4.wangeditor官方文档