CMJKC-MANAGER/src/components/WangEditor/index.vue

<template>
  <div style="border: 1px solid #ccc; z-index: 999999">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 500px; overflow-y: hidden"
      v-model="currentValue"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
      @onChange="onChange"
      @onDestroyed="onDestroyed"
      @customAlert="customAlert"
    />
  </div>

</template>
<script>
import { getToken } from "@/utils/auth";

import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default {
  components: { Editor, Toolbar },
  data() {
    return {
      editor: null,
      currentValue: '',
      toolbarConfig: {
        insertKeys:{
          index: 0,
          keys:['uploadAttachment']
        }
      },
      editorConfig: {
        hoverbarKeys: {
          attachment: {
            menuKeys: ['downloadAttachment'], // “下载附件”菜单
          },
        },
        placeholder: '请输入内容...',
        MENU_CONF:
          {
            uploadImage:{
              server: BASE_URL + "/v1/common/upload",
              fieldName: 'file',
              maxFileSize: this.fileSize * 1024 * 1024,
              headers:{
                Authorization: "Bearer " + getToken()
              },
              onBeforeUpload(file){
                return file
              },
              onProgress(progress){
                console.log('progress', progress)
              },
              onSuccess(file, res) {
                console.log(file.name + "上传成功")
              },
              onFailed(file, res) {
                console.log(file.name + "上传失败")
              },
              onError(file, err, res){
                console.log(file.name + "上传失败")
              },
              customInsert(res, insertFn) {
                insertFn(BASE_URL + res.url, res.fileName, '#')
              },
            },
            uploadVideo:{
              server: BASE_URL + "/v1/common/upload",
              fieldName: 'file',
              maxFileSize: this.fileSize * 1024 * 1024,
              headers:{
                Authorization: "Bearer " + getToken()
              },
              onBeforeUpload(file){
                return file
              },
              onProgress(progress){
                console.log('progress', progress)
              },
              onSuccess(file, res) {
                console.log(file.name + "上传成功")
              },
              onFailed(file, res) {
                console.log(file.name + "上传失败")
              },
              onError(file, err, res){
                console.log(file.name + "上传失败")
              },
              customInsert(res, insertFn) {
                insertFn(BASE_URL + res.url, res.fileName)
              },
            },
            uploadAttachment:{
              server: BASE_URL + "/v1/common/upload",
              fieldName: 'file',
              maxFileSize: this.fileSize * 1024 * 1024,
              headers:{
                Authorization: "Bearer " + getToken()
              },
              onBeforeUpload(file){
                return file
              },
              onProgress(progress){
                console.log('progress', progress)
              },
              onSuccess(file, res) {
                console.log(file.name + "上传成功")
              },
              onFailed(file, res) {
                console.log(file.name + "上传失败")
              },
              onError(file, err, res){
                console.log(file.name + "上传失败")
              },
              customInsert(res, file, insertFn) {
                insertFn(res.fileName, BASE_URL + res.url)
              },
            }
          }

      },
      mode: 'default', // or 'simple'
    }
  },
  // 接收父组件的方法
  props: {
    value: {
      type: String,
      default: ''
    },
    // 上传文件大小限制(MB)
    fileSize: {
      type: Number,
      default: 2048,
    },
  },
  watch: {
    value: {
      handler(val) {
        if (val !== this.currentValue) {
          this.currentValue = val === null ? "" : val;
        }
      },
      immediate: true,
    }
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    onChange(editor) {
      this.$emit("input", this.editor.getHtml());
    },
    onDestroyed(editor) {},
    customAlert(s, t){ //自定义弹框
      switch (t){
        case 'success':
          this.$message.success(s)
          break
        case 'info':
          this.$message.info(s)
          break
        case 'warning':
          this.$message.warning(s)
          break
        case 'error':
          this.$message.error(s)
          break
        default:
          this.$message.info(s)
          break
      }
    },
  },
  mounted() {

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

</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>