Official tutorial on using wangeditor to encapsulate and custom upload files

/**
   initValue: The initial value of the rich text box passed by the parent component. It will be listened in real time, updated in the initial value, placed in the pop-up window, and no hook function updates.
   getEditorContent() method, the parent component uses this method to obtain the content of the rich text editor, including the contents of the array format and html formats.
 */
<template>
  <div v-html="valueHtml"></div>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="min-height: 100px; overflow-y: hidden; text-align: left;"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
      @onChange="handleChange"
    />
  </div>
</template>
<script setup>
import '@wangeditor/editor/dist/css/' //Introduce cssimport { onBeforeUnmount, ref, shallowRef, onMounted, nextTick, watch } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import axios from 'axios'
// Initial valueconst props = defineProps({
  initValue: String
})
const emits = defineEmits(['getEditorContent'])
// const emits = defineEmits([''])
let mode = ref('default')
// Editor instance must use shallowRefconst editorRef = shallowRef()
// Content HTMLconst valueHtml = ref('')
// Simulate ajax asynchronously to get contentonMounted(() => {
  nextTick(() => { // Change the value after the interface node is updated.     = 
  })
})
// Toolbar configurationconst toolbarConfig = {
  toolbarKeys: [
    // Menu key    'headerSelect',
    'bold', // Bold    'italic', // Italic    'through', // Delete line    'underline', // Underline    'bulletedList', // Unordered list    'numberedList', // Ordered list    'color', // Text color    'insertLink', // Insert link    'fontSize', // Font size    'lineHeight', //Ride height    'uploadImage', // Upload pictures    'delIndent', // Indent    'indent', // Improve    'deleteImage',//Delete the picture    'divider', // Dividing line    'insertTable', // Insert the table    'justifyCenter', // Align center    'justifyJustify', // Align both ends    'justifyLeft', // Left aligned    'justifyRight', // Right aligned    'undo', // Revoke    'redo', // Rework    'clearStyle', // Clear format    'fullScreen' // full screen  ]
}
const editorConfig = {
  placeholder: 'Please enter content...', //Configuration default prompt  // readOnly: true,
  MENU_CONF: {                // Configure the upload server address    uploadImage: {
      // If the value is less than this, the base64 format is inserted (not uploaded), the default is 0      base64LimitSize: 5 * 1024, // 5kb
      // The maximum volume limit for a single file, default is 2M      // maxFileSize: 1 * 1024 * 1024, // 1M
      // // Up to several files can be uploaded, the default is 100      // maxNumberOfFiles: 5,
      // The type limit when selecting a file, the default is ['image/*'] .  If you do not want to limit it, set to []      allowedFileTypes: ['image/*'],
      // Custom upload      async customUpload(file, insertFn) { // File upload        const formData = new FormData();
        ('file', file)
        // Here you can set the upload address according to your project packaging situation        ['Authorization'] = 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6IjVhYzc3MDQxLTE3NGItNDEwZC1hOTJlLTVkYzU0YmRhMjllNiIsInVzZXJuYW1lIjoiYWRtaW4ifQ.GhdthjLmw4NP2WV2owYQS70tacRM-pX7NqI7Mo0_j_hatiqtSrqAr0RJC40osRETiQo_dacZcvNqATLsJHL77A'
        let result = await ('/file/upload', formData)
         // Insert into a rich text editor, the three parameters here are required, otherwise the console will report an error: typeError: Cannot read properties of undefined (reading 'replace')        insertFn(, , )
      }
    }
  }
}
// When components are destroyed, the editor will be destroyed in timeonBeforeUnmount(() => {
    const editor = 
    if (editor == null) return
    ()
})
const handleCreated = (editor) => {
   = editor // Create a rich text editor}
const handleChange = (info) => {
  // Array contains data type and content, and the html format of the content  emits('getEditorContent', , )
}
watch(()=>, (value) => {  // Parent component gets the initial value   = value
})
</script>

Parent component
<wang-editor :initValue="" @getEditorContent="onEditorChange"></wang-editor>
import WangEditor from '@/components/WangEditor'
const onEditorChange = (arr, html) => {
    (arr, html)
}