wangEditor封装富文本编辑器组件

<template>
  <div style="border: 1px solid #ccc;">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 300px; overflow-y: hidden;"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
    />
  </div>
</template>

<script>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { getCurrentInstance, defineComponent, onBeforeUnmount, ref, shallowRef, watch } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { _signature } from '@/utils/utils.js'

export default defineComponent({
  components: { Editor, Toolbar },
  props: {
    editContent: {
      type: String,
      default: ''
    }
  },
  setup (props, { emit }) {
    const { proxy } = getCurrentInstance()
    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef()
    const valueHtml = ref('')
    // 内容 HTML
    watch(() => props.editContent, (newV) => {
      valueHtml.value = newV
    }, { immediate: true })
    const toolbarConfig = {}
    // 上传文件
    const uploadFile = (file, insertFn, type) => {
      // 上传图片相关声明
      const { VUE_APP_APPKEY, VUE_APP_BASE_URL } = process.env
      const uploadData = {
        file,
        app_key: VUE_APP_APPKEY,
        timestamp: new Date().getTime(),
        token: sessionStorage.getItem('token') ? sessionStorage.getItem('token') : '',
        type,
        sign: _signature({
          app_key: VUE_APP_APPKEY,
          timestamp: new Date().getTime(),
          token: sessionStorage.getItem('token') ? sessionStorage.getItem('token') : '',
          type
        })
      }
      const formData = new FormData()
      formData.append('file', file)
      formData.append('app_key', uploadData.app_key)
      formData.append('timestamp', uploadData.timestamp)
      formData.append('token', uploadData.token)
      formData.append('type', uploadData.type)
      formData.append('sign', uploadData.sign)
      const uploadUrl = VUE_APP_BASE_URL + '/services/vp/motorcade-backofficews/uploadFile'
      const xhr = new XMLHttpRequest()
      xhr.open('POST', uploadUrl, true)
      xhr.send(formData)
      xhr.addEventListener('load', () => {
        const { code, message, result } = JSON.parse(xhr.response)
        if (code !== 200) return proxy.$message.warning(message)
        if (type === 'image') {
          insertFn(result, file.name, result)
        }
        if (type === 'video') {
          insertFn(result)
        }
      })
    }
    const editorConfig = {
      placeholder: '请输入内容...',
      MENU_CONF: {
        uploadImage: {
          customUpload: (file, insertFn) => {
            uploadFile(file, insertFn, 'image')
          }
        },
        uploadVideo: {
          customUpload: (file, insertFn) => {
            uploadFile(file, insertFn, 'video')
          }
        }
      }
    }
    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
      const editor = editorRef.value
      if (editor == null) return
      editor.destroy()
    })
    const handleCreated = (editor) => {
      editorRef.value = editor // 记录 editor 实例，重要！
    }
    return {
      editorRef,
      valueHtml,
      mode: 'default', // 或 'simple'
      toolbarConfig,
      editorConfig,
      handleCreated
    }
  }
})
</script>