wangEditor富文本编辑器图片/视频上传

smile@qingqing

已于 2022-09-07 11:12:18 修改

阅读量3.5k

点赞数

分类专栏：前端——vue 文章标签： vue.js 前端 wangEditor

于 2022-08-22 14:29:36 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43363871/article/details/126464889

版权

前端——vue 专栏收录该内容

30 篇文章

订阅专栏

wangEditor 有丰富的 API 和足够的扩展性，允许我们自定义开发菜单、模块、插件等。在Vue、React中运用也很方便。因此本文介绍下vue中富文本上传图片和视频。

安装引入后富文本有显示上传图片按钮，点击上传后会报没有配置上传地址的错误，如下图所示：
在这里插入图片描述
所以自定义上传如下：

自定义上传图片/视频

效果图：
在这里插入图片描述

官网地址：https://www.wangeditor.com/v5/menu-config.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8A%9F%E8%83%BD

上传图片/视频路径配置代码

data(){
	 // 自定义插入图片/视频
    const handleUpload = async (file, insertFn) => {
      let form = new FormData();
      form.append("file", file);
      form.append("dealType", this.$store.state.uploadData.dealType);
      let res = await uploadFile(form);  //此方法返回上传后的id
      // 最后插入图片 insertFn方法参数(url, alt, href)，路径根据自己的项目需求配置
      insertFn(`${http://localhost:8183/}file/preview/${res}`, '', `${http://localhost:8183/}file/preview/${res}`)
    }
    
    //上传图片/视频方法
    const uploadFile = async (form) => {
      let res = await this.$http.file.upload(form);   //此处换为自己的上传接口地址
      return res.data
    }
    
    //上传的配置
    const editorConfig = {
      placeholder: "请输入内容...",
      MENU_CONF: {
        uploadImage: {   //上传图片配置
          customUpload: handleUpload
        },
        uploadVideo: {  //上传视频配置
          customUpload: handleUpload
        }
      }
    };
    return{
		editor: null,
      	toolbarConfig: {},
      	content: "",
      	editorConfig: editorConfig,
      	mode: "default",
      	content: ""
     }
}

运用

//先引入
<script>
	import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
</script>

<div style="border: 1px solid #ccc">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor style="min-height: 500px" v-model="content" :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" />
</div>