一、引入依赖

// npm install @vueup/vue-quill@^1.2.0 quill@^1.3.7"@vueup/vue-quill": "^1.2.0","quill": "^1.3.7",

二、在vue文件中使用

<templete><div class="editor-container" v-if="show"><QuillEditor v-model:content="formData.CONT" contentType="html"              :options="editorOptions"  @ready="onEditorReady"  />
</div></templete>
<script setup>import { ref, watch, defineProps } from "vue";import { QuillEditor } from '@vueup/vue-quill';import '@vueup/vue-quill/dist/vue-quill.snow.css';const formData = ref({id:null,CONT: null});const editorOptions = {modules: {toolbar: [['bold', 'italic', 'underline', 'strike'],['blockquote', 'code-block'],['image','link'],  // 自定义图片上传、文件上传[{ 'header': 1 }, { 'header': 2 }],[{ 'list': 'ordered'}, { 'list': 'bullet' }],[{ 'script': 'sub'},{ 'script': 'super' }],]}}// 用于存储 Quill 实例let quillInstance = null;// 图片上传处理函数const handleImageUpload = () => {const input = document.createElement('input');input.type = 'file';input.accept = 'image/*';input.click();input.onchange = async (e) => {console.log('图片图片',e);const file = e.target.files[0];if (file) {try {// 上传图片axiosconst response = await uploadImg(file);const imageUrl = response.data; insertImageToEditor(imageUrl);} catch (error) {console.error('图片上传失败', error);}}};};// 文件上传处理函数const handleFileUpload = () => {const input = document.createElement('input');input.type = 'file';input.accept = '*/*'; // 接受所有类型的文件 .docx,.pdfinput.click();input.onchange = async (e) => {const file = e.target.files[0];if (file) {const maxSize = 10 * 1024 * 1024; // 10MBif (file.size > maxSize) {toast(t('sys.file-error-msg'), 'error');return;}try {const response = await uploadFile(file);const fileUrl = response.data.url; // 假设返回的文件 URL 在 response.datainsertFileToEditor(fileUrl, file.name); // 插入文件链接到编辑器} catch (error) {console.error('文件上传失败', error);}}};};// 将上传的图片插入编辑器const insertImageToEditor = (imageUrl) => {if (quillInstance) {const range = quillInstance.getSelection();quillInstance.insertEmbed(range.index, 'image', imageUrl);}};// 将上传的文件插入编辑器const insertFileToEditor = (fileUrl, fileName) => {if (quillInstance) {const range = quillInstance.getSelection();const link = `<a href="${fileUrl}" target="_blank">${fileName}</a>`;quillInstance.clipboard.dangerouslyPasteHTML(range.index, link); // 插入文件链接}};// 在编辑器准备好后，获取 Quill 实例const onEditorReady = (quill) => {quillInstance = quill; // 保存 quill 实例const toolbar = quill.getModule('toolbar');toolbar.addHandler('image', handleImageUpload); // 替换默认的图片上传行为toolbar.addHandler('link', handleFileUpload); // 添加自定义文件上传处理};</script><style scoped>.editor-container {width: 100%;max-height: 100%;overflow-y: auto;border: 1px solid #d8d8d8;}</style>

三、axios.js

import axios from '~/axios'// 上传图片
export function uploadImg(file) {const formData = new FormData();formData.append('file', file);return axios.post("/upload/img", formData, {headers: {'Content-Type': 'multipart/form-data'}});
}export function uploadFile(file) {const formData = new FormData();formData.append('file', file);return axios.post("/upload/file", formData, {headers: {'Content-Type': 'multipart/form-data'}});
}