首页 前端知识 vue3中使用vueQuill富文本编辑器详细教程,图片上传-图片压缩

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

2024-01-29 13:01:13 前端知识 前端哥 724 680 我要收藏

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。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/732.html
标签
typescript
评论
会员中心 联系我 留言建议 回顶部
复制成功!