vueQuill是支持vue3的富文本编辑器组件，使用简单方便；
官方网址：https://vueup.github.io/vue-quill/
效果图：
1. 安装：（在官网有详细的安装教程）;
npm或者yran下载：
npm install @vueup/vue-quill@latest --save
或者
yarn add @vueup/vue-quill@latest2. 创建封装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。