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' //引入上传图片的apiimport { 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);//富文本配置项，将模块功能一起写入到配置项内，也可以单独配置Modulesconst 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。
