Vue3使用WangEditor编辑器

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>