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

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>