vue3中使用vueQuill富文本编辑器详细教程，图片上传-图片压缩

vueQuill是支持vue3的富文本编辑器组件，使用简单方便；

官方网址：https://vueup.github.io/vue-quill/ 

效果图：

1. 安装：（在官网有详细的安装教程）;

npm或者yran下载：

npm install @vueup/vue-quill@latest --save
或者
yarn add @vueup/vue-quill@latest复制

2. 创建封装vue-quill文件：

在公共组件components中创建QuillEditor文件夹index.vue

3. 引入vue-quill组件，可以全局注册和局部注册，此处介绍局部注册：

import { QuillEditor, Quill } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'复制

4. 图片压缩（图片太大会导致上传失败）

进行图片压缩需要使用到第三方插件 compressorjs，官网：GitHub - fengyuanchen/compressorjs: JavaScript image compressor.

①安装compressorjs

npm install compressorjs复制

②引入compressorjs

import Compressor from 'compressorjs';复制

③使用 compressorjs

// 图片压缩事件回调
const compressImage = (file: any) => {
    return new Promise((resolve, reject) => {
        new Compressor(file, {
            quality: 0.6, // 设置压缩质量
            maxWidth: 400, // 设置图片最大宽度
            maxHeight: 400, // 设置图片最大高度
            success(result) {
                resolve(result);
            },
            error(error) {
                reject(error);
            },
        });
    });
}
 
// 上传图片
const compressedFile: any = await compressImage(file); // 压缩图片
return new Promise((resolve, reject) => {
   const formData = new FormData();
   formData.append("file", compressedFile);
   uploadFile(formData).then((res: any) => {
       resolve(res.data.url);
   }).catch(err => {
       reject("Upload failed");
       console.error("Error:", err)
   })
})复制

5. 封装组件(完整代码)：

html部分：

<template>
    <QuillEditor ref="quillRef" v-model:content="content" :options="myOptions" contentType="html" @update:content="setValue()"/>
</template>复制

js部分：

<script setup lang="ts">
import { uploadFile } from '@/api/common/index' //引入上传图片的api
import { QuillEditor, Quill } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import '@/styles/quill.font.css'
import 'quill-image-uploader/dist/quill.imageUploader.min.css';
 
import ImageUploader from 'quill-image-uploader';
import BlotFormatter from 'quill-blot-formatter'
 
const props = withDefaults(defineProps<{
    modelValue: any, // 双向绑定值
}>(), {
    modelValue: '', // 双向绑定值
})
const emit = defineEmits<{
    (e: 'update:modelValue', val: any): void
}>()
const content = ref<string>('')
const quillRef = ref<any>(null)
 
Quill.register(fontSizeStyle, true)
Quill.register("modules/imageUploader", ImageUploader);
Quill.register('modules/blotFormatter', BlotFormatter);
 
//富文本配置项，将模块功能一起写入到配置项内，也可以单独配置Modules
const myOptions = reactive({
    modules: {
        toolbar: [ //自定义toolbar，或者可以通过essential ,minimal ,full ,以及"" 使用默认选项
            [{ 'align': [] }],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            ['image'],
            [{ 'direction': 'rtl' }],
            [{ 'color': [] }, { 'background': [] }],
            [{ 'size': fontSizeStyle.whitelist }],  // 字体大小
            ['clean']
        ],
        // 上传图片
        imageUploader: {
            upload: async (file: any) => {
                try {
                    const compressedFile: any = await compressImage(file); // 压缩图片
                    return new Promise((resolve, reject) => {
                        const formData = new FormData();
                        formData.append("file", compressedFile);
                        uploadFile(formData).then((res: any) => {
                            resolve(res.data.url);
                        }).catch(err => {
                            reject("Upload failed");
                            console.error("Error:", err)
                        })
                    })
                } catch (error) {
                    console.error('压缩和上传图像时出错:', error);
                }
            }
        },
        // 图片缩放
        blotFormatter: {
        },
    },
    placeholder: '请输入内容...'
})
 
// 图片压缩
const compressImage = (file: any) => {
    return new Promise((resolve, reject) => {
        new Compressor(file, {
            quality: 0.6, // 设置压缩质量
            maxWidth: 400, // 设置图片最大宽度
            maxHeight: 400, // 设置图片最大高度
            success(result) {
                resolve(result);
            },
            error(error) {
                reject(error);
            },
        });
    });
}
 
const setValue = () => { //用于设置双向绑定值
    const text = toRaw(quillRef.value).getHTML()
    emit('update:modelValue', text)
}
 
watch(() => props.modelValue, (val: any) => { 
    if (val) {
        content.value = val //用于监听绑定值进行数据回填
    } else {
        toRaw(quillRef.value).setContents('') //可用于弹窗使用富文本框关闭弹窗清除值
    }
})
 
</script>复制

css部分:

<style>
.ql-container { //通过calc函数动态设置富文本高度，前提父容器有具体高度
    height: calc(100% - 42px);
}
</style>复制

6. 子组件使用：

引入封装好的QuillEditor组件

const QuillEditor = defineAsyncComponent(() => import('@/components/QuillEditor/index.vue'))复制

使用

 <QuillEditor v-model="xxx" />复制

7. 模块

此处用到的模块功能有上传图片，和调整图片缩放，具体可以参考官网，安装后，进行通过Quill.register()注册模块，然后在配置项进行使用

注意：目前版本暂不支持表格，如果需要使用表格模块，需要安装quill@2.0.0-dev.4。