vue-quill-editor富文本组件二次封装，上传图片是base64的图片回显异常，进行自定义上传

<template>
    <div>
        <QuillEditor ref="myQuillEditor" theme="snow" :content="modelValue" :options="data.editorOption" contentType="html" @update:content="setValue" />
        <!-- 使用自定义图片上传 -->
        <input type="file" hidden accept=".jpg,.png" ref="fileBtn" @change="handleUpload" />
    </div>
</template>

下面为示例代码： 

<script setup>
import { QuillEditor, Quill } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import { ImageDrop } from 'quill-image-drop-module';
// import * as imageResize from 'quill-image-resize-module';
// import imageResize from 'quill-image-resize-module';

Quill.register('modules/ImageDrop', ImageDrop);
// Quill.register('modules/imageResize', imageResize);
// Quill.register('modules/imageResize', imageResize);
import { reactive, onMounted, ref, toRaw, watch } from 'vue'
import { client } from "@sxbettem/bettem-micro-utils";

const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
const myQuillEditor = ref()
const fileBtn = ref()
const toolbarOptions = [
    // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
    ['bold', 'italic', 'underline', 'strike'],
    // 引用  代码块-----['blockquote', 'code-block']
    // ['blockquote', 'code-block'],
    // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
    [{ header: 1 }, { header: 2 }],
    // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
    [{ list: 'ordered' }, { list: 'bullet' }],
    // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
    // [{ script: 'sub' }, { script: 'super' }],
    // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
    [{ indent: '-1' }, { indent: '+1' }],
    // 文本方向-----[{'direction': 'rtl'}]
    // [{ direction: 'rtl' }],
    // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
    // [{ size: ['small', false, 'large', 'huge'] }],
    // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
    // [{ header: [1, 2, 3, 4, 5, 6, false] }],
    // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
    [{ color: [] }, { background: [] }],
    // 字体种类-----[{ font: [] }]
    // [{ font: [] }],
    // 对齐方式-----[{ align: [] }]
    [{ align: [] }],
    // 清除文本格式-----['clean']
    ['clean'],
    // 链接、图片、视频-----['link', 'image', 'video']
    [ 'image' ],
    // ['table'] // 表格
]
const data = reactive({
    content: '',
    editorOption: {
        modules: {
            toolbar: {
                container: toolbarOptions,
                handlers: {
                    'image': function (value) {
                        if (value) {
                            fileBtn.value.click()
                        } else {
                            this.quill.format('image', false);
                        }
                    }
                }
            },
            ImageDrop: true,
        },
        placeholder: '请输入内容...'
    }
})
const setValue = (val) => {
    emit('update:modelValue', val)
}
const handleUpload = (e) => {
    const files = Array.prototype.slice.call(e.target.files)
    if (!files) {
        return
    }
    const formdata = new FormData()
    formdata.append('file', files[0])
    //url为自定义的上传地址
    client.upload('url...', {
        type: "szxcApp"
    }, files[0]).then(res => {
        if (res.url) {
            const quill = toRaw(myQuillEditor.value).getQuill()
            const length = quill.getSelection().index
            // 插入图片，res为服务器返回的图片链接地址
            quill.insertEmbed(length, 'image', res.url)
            // 调整光标到最后
            quill.setSelection(length + 1)
        }
    })
}
</script>