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
·
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();
更多推荐
已为社区贡献1条内容
所有评论(0)