vue3封装wangEditor包含图片以及视频上传

文档地址：wangEditor

第一步：下载并安装

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save

yarn add @wangeditor/editor-for-vue@next
# 或者 npm install @wangeditor/editor-for-vue@next --save

第二部：在项目components文件夹新建XYEdit.vue 文件，名字可以自定义

<template>
    <div style="border: 1px solid #ccc">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="overflow-y: hidden;"
        :style="{height}"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>
</template>
<script setup lang="ts">
    import '@wangeditor/editor/dist/css/style.css'
    import { onBeforeUnmount, ref, shallowRef, onMounted,watch } from 'vue'
    import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
    import {getToken} from "@/utils/auth";
    import { getFullImageUrl } from '@/utils/xinyin';
    const mode = ref('default')
    const editorRef = shallowRef()
    const emits = defineEmits(['update:modelValue'])
    const props:any = defineProps({
        modelValue:{
            type:String,
            default:''
        },
        height:{
            type:String,
            default:'400px'
        }
    })
    // 内容 HTML
    const valueHtml:any = ref(props.modelValue)
    
    watch(valueHtml,(nValue:any)=>{
        emits('update:modelValue',nValue)
    })

    // 模拟 ajax 异步获取内容
    onMounted(() => {
        console.log(`${import.meta.env.PROD?'/prod-api':'/dev-api'}/sys/file/fileUpload`)
    })

    const toolbarConfig = {}
    const editorConfig = {
        MENU_CONF:{
            uploadImage:{
                server:`${import.meta.env.PROD?'/prod-api':'/dev-api'}/sys/file/fileUpload`,
                fieldName: 'file',
                maxFileSize:5 * 10241 * 1024,
                meta: {
                    bucketName: 'system',
                },
                headers:{
                    clientType:0,
                    Authorization:"Bearer " + getToken()
                },
                customInsert(res: any, insertFn: any) {
                    insertFn(getFullImageUrl(res.data), '', '')
                },
            },
            uploadVideo:{
                server:`${import.meta.env.PROD?'/prod-api':'/dev-api'}/sys/file/fileUpload`,
                fieldName: 'file',
                maxFileSize:10 * 10241 * 1024,
                meta: {
                    bucketName: 'system',
                },
                headers:{
                    clientType:0,
                    Authorization:"Bearer " + getToken()
                },
                customInsert(res: any, insertFn: any) {
                    insertFn(getFullImageUrl(res.data), '')
                },
            }
        },
        placeholder: '请输入内容...'
     }

    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
        const editor = editorRef.value
        if (editor == null) return
        editor.destroy()
    })

    const handleCreated = (editor:any) => {
      editorRef.value = editor // 记录 editor 实例，重要！
    }
</script>
<style lang="scss" scoped>

</style>

第三步：引入使用

<div style="width: 800px;height: 550px;">
  <XYEdit v-model="slotValue.slotValue.paramsValue" height="500px">        
   </XYEdit>
</div>