Vue中使用wangEditor实现自定义上传图片和视频

之前没用过wangEditor真是一脸懵，做自己没做过的东西总是心里没谱，既然项目已经结束了那来总结一下吧

看着官网的demo发现简单了好多

官网地址：快速开始 | wangEditor

这里可以选自己的框架，我用的vue2.0

然后按照demo示例一步步开整！

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save

yarn add @wangeditor/editor-for-vue
# 或者 npm install @wangeditor/editor-for-vue --save

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" 
      :defaultConfig="toolbarConfig" :mode="mode" ref="toolbar"
    />
    <Editor
      style="height: 500px; overflow-y: hidden"
      v-model="html"
      id="wangEdit"
      :defaultConfig="editorConfig"
      :mode="mode"
      ref="editor"
      @onCreated="onCreated" />
  </div>
</template>

<script>
import Vue from 'vue';
import { getStore } from '@/util/store';
import { uploadFile } from '@/api/system/post';
import { Boot } from '@wangeditor/editor';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import attachmentModule from '@wangeditor/plugin-upload-attachment';
import { createEditor } from '@wangeditor/editor'
import { DomEditor } from '@wangeditor/editor';
Boot.registerModule(attachmentModule);
export default Vue.extend({
  components: { Editor, Toolbar },
  data() {
    return {
      editor: null,
      html: '',
      // 工具栏配置
      toolbarConfig: {
        //自定义配置上传附件功能
        insertKeys: {
          index: 22, // 自定义插入的位置
          keys: ['uploadAttachment'], // “上传附件”菜单
        },
        excludeKeys: ['insertImage','insertVideo'],//去掉网络上传图片和视频
      },
      editorConfig: {
        placeholder: '请输入内容...',
        hoverbarKeys: {
          attachment: {
            menuKeys: ['downloadAttachment'], // “下载附件”菜单
          },
          image:{
            menuKeys: [],
          }
        },

        MENU_CONF: {         
          // 上传图片
          uploadImage: {
            fieldName: 'file',
            // base64LimitSize: 10 * 1024 * 1024, // 10M 以下插入 base64
            server: window.location.origin + '/api/xxx/xxx',//自定义的接口地址
            headers: {
              'Spang-Auth': getStore({ name: 'access_token' }),
            },
            async customUpload(file, insertFn) {
              const form = new FormData();
              form.append('file', file);
              uploadFile(form).then(res => {
                let { code, data } = res.data;
                if (code == 200) {
                  insertFn(data.link, data.originalName, data.domain + data.domain.name);
                } else if (code == 413) {
                  this.$message({
                    type: 'success',
                    message: res.data.message,
                  });
                }
              });
            },
          },
          // 上传视频
          uploadVideo: {
            fieldName: 'file',
            server: window.location.origin + '/apiapi/xxx/xxxx',
            headers: {
              'Spang-Auth': getStore({ name: 'access_token' }),
            },
            async customUpload(file, insertFn) {
              const form = new FormData();
              form.append('file', file);
              uploadFile(form).then(res => {
                let { code, data } = res.data;
                if (code == 200) {
                  insertFn(data.link, data.originalName, data.domain + data.domain.name);
                } else if (code == 413) {
                  this.$message({
                    type: 'success',
                    message: res.data.message,
                  });
                }
              });
            },
          },
          // 上传附件
          uploadAttachment: {
            fieldName: 'file',
            server: window.location.origin + '/api/xxx/xxxx',
            headers: {
              'Spang-Auth': getStore({ name: 'access_token' }),
            },
            // 超时时间，默认为 10 秒
            timeout: 100 * 1000, // 5 秒
            async customUpload(file, insertFn) {
              const form = new FormData();
              form.append('file', file);
              uploadFile(form).then(res => {
                let { code, data } = res.data;
                if (code == 200) {
                  insertFn(data.originalName, data.link);
                } else if (code == 413) {
                  this.$message({
                    type: 'success',
                    message: res.data.message,
                  });
                }
              });
            },
          },
        },
      },
      mode: 'default', // or 'simple'
    };
  },
  mounted() {
    const editor = createEditor({})
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
  },

  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
});
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="scss" scoped>
/deep/ .w-e-modal button {
  height: auto;
}
</style>