wangeditor 富文本编辑器 自定义图片上传

本示例使用了 vue3 ，element plus ， axios
一开始安装了tinymce富文本编辑器，发现断网就不能用了。后来安装了wangEditor，还是国产的好用
1.先安装 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

代码如下：

<template>
    <div style="border: 1px solid #ccc">
        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" mode="default" />
        <Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig" mode="default"
            @onCreated="handleCreated" />
    </div>
</template>
<script lang='ts' setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { IEditorConfig, IToolbarConfig } from '@wangeditor/editor';
import { ElMessage } from 'element-plus'
import axios from '@/utils/axios';


type InsertFnType = (url: string, alt: string, href: string) => void

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// 内容 HTML
const valueHtml = ref('')
const toolbarConfig: Partial<IToolbarConfig> = {}

const baseURL = import.meta.env.VITE_API_URL
// 自定义 MENU_CONF 属性
const editorConfig: Partial<IEditorConfig> = {  // TS 语法
    MENU_CONF: {
        uploadImage: {
            async customUpload(file: File, insertFn: InsertFnType) {  // TS 语法              
                if (file.type != "image/jpeg") return ElMessage.error('只能上传图片')
                if (file.size > 1 * 1024 * 1024) return ElMessage.error('图片不能大于1M!')

                const formData = new FormData();
                formData.append('file', file);
                (async () => {
                    await axios({
                        url: '/api/file/upload_img',
                        method: 'post',
                        data: formData,
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    }).then(res => {
                        if (res.data.code === 200) {
                            insertFn(res.data.data.url, res.data.data.filename, res.data.data.href)
                            // 最后插入图片
                            // insertFn(url, alt, href)
                        }
                    })
                })()
            },
        },
        uploadVideo: {
            onBeforeUpload(file: File) { // TS 语法
                console.log(`output->file`, file)
                // file 选中的文件，格式如 { key: file }
                return file
               }
        },
    }
}
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

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

</style>