Vue3使用富文本编辑器vue-quill 自定义图片上传、文件上传

一、引入依赖

// 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 {
            // 上传图片axios
            const 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,.pdf
      input.click();

      input.onchange = async (e) => {
        const file = e.target.files[0];
        if (file) {
          const maxSize = 10 * 1024 * 1024; // 10MB
          if (file.size > maxSize) {
            toast(t('sys.file-error-msg'), 'error');
            return;
          }
          try {
            const response = await uploadFile(file);
            const fileUrl = response.data.url; // 假设返回的文件 URL 在 response.data
            insertFileToEditor(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'
      }
  });
}