wangeditor上传图片并展示在输入框内方法（vue3）

 安装vue3组件

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

页面中创建一个新的组件 

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

<script lang="ts" setup>
import "@wangeditor/editor/dist/css/style.css"; // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
const valueHtml = ref("");
// 模拟 ajax 异步获取内容
onMounted(() => { });

const toolbarConfig = {};
const ImgUrl = ref<string>("");
const editorConfig = {
    placeholder: "请输入内容...",
    MENU_CONF: {
        uploadImage: {
            //上传图片配置
            server: import.meta.env.VITE_BASE_URL + "/common/file/upload", //上传接口地址
            fieldName: "file", //上传文件字段名
            methods: "post",
            // headers: {
            //     token: sessionStorage.getItem('XNZtoken'),
            // },
            // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
            allowedFileTypes: ["image/*"],
            // metaWithUrl: true, // 参数拼接到 url 上
            // 单个文件上传成功之后
            onSuccess(file: { name: any; }, res: { data: string; }, insertFn: any) {
                console.log(`${file.name} 上传成功`, res.data);
                ImgUrl.value = res.data;
            },
            // // 自定义插入图片
            customInsert(res: { data: any; }, insertFn: (arg0: any) => void) {
                insertFn(res.data); //插入图片
            },
        },
    },
};

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

const handleCreated = (editor: any) => {
    editorRef.value = editor; // 记录 editor 实例，重要！
};
defineExpose({
    valueHtml
});
</script>

<style lang="scss" scoped>
:deep(.text-editor) {
    .w-e-bar-item {
        text-align: left !important;

        &:nth-child(32) {
            display: none;
        }

        &:nth-child(21) {
            display: none;
        }

        &:nth-child(24) {
            display: none;
        }

        &:nth-child(22) {
            display: none;
        }

        &:nth-child(25) {
            display: none;
        }

        &:nth-child(26) {
            display: none;
        }
    }
}
</style>

如何使用

import noticeEdit from "./wangEdit.vue";

 <notice-edit ref="valueHtml">

const valueHtml = ref<any>(null)  //拿到valueHtml直接用就行