WangEditor自定义上传插入图片

import '@wangeditor/editor/dist/css/style.css'

import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
// 富文本实例对象
const editorRef = shallowRef()
// 菜单配置
const toolbarConfig: Partial<IToolbarConfig> = {}
// 编辑器配置
const editorConfig = ref({
  placeholder: '请输入内容...',
  readOnly: false,

  MENU_CONF: {
    uploadImage: {
      fieldName: 'multipartFile',
      allowedFileTypes: [],
      headers: {
        Token: token
      },
      customUpload(file: any, insertFn: any) {
        const loading = ElLoading.service({
          lock: true,
          text: 'Loading',
          background: 'rgba(0, 0, 0, 0.7)',
        })
        ApiService.file
          .getAuthorizationLink(file.name, file.type)
          .then(response => {
            const { content } = response.data
            const reader = new FileReader()
            reader.onload = event => {
              const textContent = event.target.result
              ApiService.file
                .upload(textContent, content.authorizationLink, file.type)
                .then(res_ => {
                  fileUrl.value = content.fileUrl
                  editorRef.value.dangerouslyInsertHtml(`<p><img src="${fileUrl.value}"></p>`)
                  loading.close()
                })
            }
            reader.readAsArrayBuffer(file)
          })
      },
      onError(file: any, err: any, res: any) {
        ElMessage({
          message: `${file.name} 上传出错`,
          type: 'warning',
        })
      },
    }
  },
})
const onCreated = (editor: any) => {
  editorRef.value = editor;
  nextTick(() => {
    editorRef.value = editor
  })
}