Vue2 使用wangEditor5 上传图片

一、安装

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

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

官网: https://www.wangeditor.com/v5/menu-config.html#%E5%9B%9E%E8%B0%83%E5%87%BD%E6%95%B0

二、直接上代码

<template>
  <div class="addpost_course">
    <div id="editorComponent" style="border: 1px solid #ccc">
      <toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editor"
        :default-config="toolbarConfig"
        :mode="mode"
      />
      <editor
        v-model="html"
        style="overflow-y: hidden"
        :default-config="editorConfig"
        :mode="mode"
        @onCreated="onCreated"
        @onChange="onChange"
      />
    </div>
  </div>
</template>

<script>
import { attachmentsGetUrl } from '../api';
import '@wangeditor/editor/dist/css/style.css';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';

export default {
  name: 'editorComponent',
  components: {
    Editor,
    Toolbar,
  },
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  watch: {
    value(val) {
      this.html = val;
    },
  },
  data() {
    return {
      editor: null,
      html: '',
      toolbarConfig: {},
      editorConfig: {
        placeholder: '请输入内容',
        MENU_CONF: {
          uploadImage: {
            // 自定义图片上传功能
            customUpload: (resultFile, insertImgFn) => {
              const formData = new FormData();
              formData.append('file', resultFile);
              // 将文件上传至服务器，res.data返回服务器存放文件的url
              attachmentsGetUrl(formData).then(res => {
                // 插入图片，三个参数分别对应，url alt href
                insertImgFn(res.data, '', res.data);
              });
            },
          },
          uploadVideo: {
            // 自定义视频上传功能
            customUpload: (resultFile, insertImgFn) => {
              const formData = new FormData();
              formData.append('file', resultFile);
              // 将文件上传至服务器，res.data返回服务器存放文件的url
              attachmentsGetUrl(formData).then(res => {
                // 插入视频，三个参数分别对应，url alt href
                insertImgFn(res.data, '', res.data);
              });
            },
          },
        },
      },
      mode: 'default', // or 'simple'
      useLen: 0,
    };
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    onChange() {
      const text = this.editor.getText();
      // 计算当前输入了多少文字
      this.useLen = (text || '').length;
      // 每次富文本内容改变，触发change事件
      this.$emit('change', this.html);
    },
  },
  beforeDestroy() {
    // editor销毁
    const editor = this.editor;
    if (editor == null) {
      return;
    }
    editor.destroy();
  },
};
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="scss">
#editorComponent {
  width: 100%;
  position: relative;
  z-index: 0;
  font-size: 18px;
  .toolbar {
    border: 1px solid #ccc;
  }
  .editorText {
    border: 1px solid #ccc;
    min-height: 500px;
  }
  video {
    width: 350px;
  }
  // .w-e-text-container .w-e-scroll {
  //   height: 350px;
  // }
}

html,
body {
  height: 100%;
  overflow: auto;
  margin: 0;
}

html {
  overflow: scroll;
}
.w-e-toolbar {
  flex-wrap: wrap;
}
</style>

链接: https://segmentfault.com/a/1190000042513365