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官方文档

Logo

前往低代码交流专区

更多推荐