****wangeditor在vue2.7中使用，

"@wangeditor/editor": "5.0.1","@wangeditor/editor-for-vue": "1.0.1",

  <div class="editor_container">
    <Toolbar
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      class="editor_toolbar"
    />
    <Editor
      v-model="contentHtml"
      :defaultConfig="editorConfig"
      :class="{ disabled: disabled, editor_content: true }"
      @onChange="doChange"
      @onCreated="doCreate"
    />
  </div>
</template>

<script>
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
  import { uploadFile } from '@/utils'
  import { baseURL } from '@/config'
  import store from '@/store'
  import { onBeforeUnmount, defineComponent, shallowRef, watch } from 'vue-demi'
  import { useRoute } from '@/hooks'

  const USER_TOKEN = store.getters['user/token']

  export default defineComponent({
    name: 'BaseEditor',
    components: { Editor, Toolbar },
    props: {
      value: {
        type: String,
        default: '',
      },
      disabled: {
        type: Boolean,
        default: false,
      },
    },
    setup(props, { emit }) {
      const route = useRoute()
      const editorRef = shallowRef(null)
      const contentHtml = shallowRef('')

      const toolbarConfig = {}
      const editorConfig = {
        placeholder: '请输入内容...',
        MENU_CONF: {
          uploadImage: {
            async customUpload(file, insertFn) {
              const { url, name } = await uploadFile(file, route.value.path)
              const imgUrl = `${baseURL}/tfle/v1/0/file-preview/by-url?url=${url}&access_token=bearer ${USER_TOKEN}&bucketName=tof`
              insertFn(imgUrl, name, imgUrl)
            },
          },
        },
      }

      watch(
        () => props.value,
        (value) => {
          if (!value) return
          contentHtml.value = replaceToken(decodeURIComponent(value))
        }
      )

      watch(() => props.disabled, doDisable, { immediate: true })

      const doCreate = (editor) => {
        editorRef.value = editor
        doDisable(props.disabled)
      }

      const doChange = (editor) => {
        const content = encodeURIComponent(editor.getHtml())
        emit('input', content)
        emit('change', content)
      }

      onBeforeUnmount(() => {
        const editor = editorRef.value
        if (editor === null) return
        editor.destroy()
      })

      function doDisable(value) {
        if (value) {
          editorRef.value?.disable()
        }
      }

      function replaceToken(html) {
        let newHtml = ''
        const regex = /\bbearer \b(.*?)\b&bucketName\b/g
        const matches = Array.from(new Set(html.match(regex)))

        if (!matches.length) {
          return html
        }

        matches.forEach((match) => {
          newHtml = html.replaceAll(match, `bearer ${USER_TOKEN}&bucketName`)
        })

        return newHtml
      }
      return {
        contentHtml,
        editorConfig,
        editorRef,
        toolbarConfig,
        doChange,
        doCreate,
      }
    },
  })
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="scss" scoped>
  .editor_container {
    border: 1px solid #ccc;
    margin-top: 10px;
    height: 500px;
  }

  .editor_toolbar {
    border-bottom: 1px solid #ccc;
  }

  .editor_content {
    border: 1px solid #ccc;
    height: 80%;
  }
  .w-e-full-screen-container {
    z-index: 9999 !important;
  }
  ::v-deep {
    .disabled {
      .w-e-text-container {
        background-color: #f5f7fa;
        border-color: #dfe4ed;
        color: #333;
        cursor: not-allowed;
      }
    }
  }
</style>