vue3使用quilleditor富文本框

参考官方文档：https://vueup.github.io/vue-quill/
1、先安装插件

npm install @vueup/vue-quill@latest --save

npm install quill-image-uploader --save

2、局部引入

import { Quill, QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css'// 使用snow主题
import ImageUploader from 'quill-image-uploader';
Quill.register('modules/imageUploader', ImageUploader);

3、全部代码

<template>
    <QuillEditor
        ref="myQuillEditor"
        class="quill-editor"
        :style="{ height: height + 'px' }"
        contentType="html"
        v-model:content="innerContent"
        :options="options"
        @update:content="handleUpdate"
    >
    </QuillEditor>
</template>

<script setup>
/**
 * 官方文档： https://vueup.github.io/vue-quill/
 */
import { Quill, QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css'; //snow主题使用次样式
// import '@vueup/vue-quill/dist/vue-quill.bubble.css'; //bubble主题使用次样式
import ImageUploader from 'quill-image-uploader';
import { computed, getCurrentInstance, reactive } from 'vue';
import { customerUpload, DownloadBaseUrl } from '@/utils';

Quill.register('modules/imageUploader', ImageUploader);
const props = defineProps({
    height: {
        type: Number,
        default: 200
    },
    content: {
        type: String,
        default: ''
    },
    toolbar: {
        type: Array,
        default() {
            return [
                ['bold', 'italic', 'underline', 'strike'], // toggled buttons
                ['blockquote', 'code-block'],
                [{ header: 1 }, { header: 2 }], // custom button values
                [{ list: 'ordered' }, { list: 'bullet' }],
                [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
                [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
                [{ direction: 'rtl' }],
                [{ size: ['small', false, 'large', 'huge'] }], // text direction // custom dropdown
                [{ header: [1, 2, 3, 4, 5, 6, false] }],
                [{ color: [] }, { background: [] }], // dropdown with defaults from theme
                [{ font: [] }],
                [{ align: [] }],
                ['link', 'video', 'image'],
                ['clean'] // remove formatting button
            ];
        }
    }
});
const emit = defineEmits(['update:content']);
const innerContent = computed({
    get() {
        return props.content;
    },
    set(value) {
        emit('update:content', value);
    }
});

const { proxy } = getCurrentInstance();
const options = reactive({
    modules: {
        toolbar: props.toolbar,
        imageUploader: {
            upload: (file) => {
                return new Promise((resolve, reject) => {
                    customerUpload(file)
                        .then((res) => {
                            console.log('res:', res);
                            resolve(`${DownloadBaseUrl}pk=${res.data[0].pk}`);
                        })
                        .catch((err) => {
                            proxy.$message.error(err);
                            reject(err);
                        });
                });
            }
        }
    },
    placeholder: '请输入内容',
    readOnly: false,
    theme: 'snow'
});
const handleUpdate = (content) => {
    console.log(content, innerContent.value);
};
</script>

<style></style>