WangEditor的基本使用，图片上传功能
没详细讲解，只是做个记录。

Componets 下定义 WangEditor.vue 文件

<template><div style="border: 1px solid #ccc;"><Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" mode="default" /><Editor :style="{ 'height': height + 'px', 'overflow': 'hidden' }" v-model="newValue" :defaultConfig="editorConfig"mode="default" @onCreated="handleCreated" /></div>
</template><script setup>
import { defineProps, computed, shallowRef, defineEmits } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import Cookies from 'js-cookie'
import '@wangeditor/editor/dist/css/style.css' // 引入 css const props = defineProps({// 父组件 v-model 绑定的值modelValue: {type: String},// 富文本的高height: {type: [Number, String],default: 400}
})const editorRef = shallowRef()const emit = defineEmits(['update:modelValue'])const toolbarConfig = {}const editorConfig = { placeholder: '请输入内容...', MENU_CONF: {} }editorConfig.MENU_CONF['uploadImage'] = {// 上传图片fieldName: 'file',// headers头部 需要添加不需要删掉headers: {Authorization: Cookies.get('Token'),ContentType: 'application/json;charset=utf-8'},// 图片上传的路径server: import.meta.env.VITE_APP_BASE_API + '/image/upload',// 图片上传返回的数据customInsert(res, insertFn) {let src = import.meta.env.VITE_APP_BASE_API + res.data.url // 有的会返回带域名的路径也有不带的根据自己的实际情况insertFn(src)},
}editorConfig.MENU_CONF['uploadVideo'] = {}const newValue = computed({get() {return props.modelValue},set(value) {emit('update:modelValue', value)}
})const handleCreated = (editor) => {editorRef.value = editor // 记录 editor 实例，重要！// console.log(editor.getAllMenuKeys()) // 这里输出可以看到 富文本中所有的功能
}</script><style lang="scss" scoped></style>