Quill Editor vue3组件封装

Quill Editor vue3组件封装

components/RichEditor/index.vue

// template
<template>
    <QuillEditor ref="editorRef" v-model:content="qlContent" @update:content="onUpdate" @ready="onReady" :options="options"
        contentType="html" :toolbar="toolbar" :modules="modules"
        style="width: 100%;min-height: 15rem;max-height: 15rem;overflow: scroll;" />
</template>

// script
<script setup>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { ref,  watch, onMounted } from 'vue'
const editorRef = ref(null);
const qlContent = ref('');
const props = defineProps({
    content: {
        type: String,
        default: ''
    }
})
onMounted(() => {
    console.log(props);
})
const emits = defineEmits(['update:content'])

watch(props, (newValue, oldValue) => {
    console.log(newValue);
    qlContent.value = newValue.content;
})
function onReady() {
    qlContent.value = props.content
}
function onUpdate(value) {
    emits("update:content", value);
}
const options = {}
// 配置工具栏
const toolbar = [['bold', 'italic', 'underline', 'strike'], [{ 'list': 'ordered' }, { 'list': 'bullet' }], [{ 'indent': '-1' }, { 'indent': '+1' }], [{ 'direction': 'rtl' }], [{ 'header': [1, 2, 3, 4, 5, 6, false] }], [{ 'color': [] }, { 'background': [] }], [{ 'align': [] }], ['image'], ['clean'],]
</script>

// 图片上传 modules
<script>
import ImageUploader from 'quill-image-uploader';

const modules = {
    name: 'imageUploader',
    module: ImageUploader,
    options: {
        upload: file => {
            return new Promise(resolve => {
                // upload
                resolve([图片链接])
            })
        }
    }
}
</script>

// style
.ql-toolbar {
    width: 100%;
}

.ql-editor.ql-blank {
    min-height: 15rem;
}

组件内使用

<RichEditor  v-model:content="content" />