Vue+Vite+TS quill-editor粘贴图片上传并删除原图片

yuwenwenwenwenyu

于 2024-07-25 16:05:21 发布

阅读量348

点赞数 4

文章标签： vue.js okhttp 前端

本文链接：https://blog.csdn.net/yuwenwenwenwenyu/article/details/140691467

版权

Vue+Vite+TS quill-editor粘贴图片上传并删除原图片

近期项目中富文本编辑器 quill-editor需要支持复制图片上传，代码如下：

<template>
  <div>
    <div class="editor">
      <quill-editor ref="quillEditorRef" v-model:content="content" contentType="html"
        @textChange="(e) => $emit('update:modelValue', content)" :options="options" :style="styles" />
    </div>
  </div>
</template>
<script>
import { QuillEditor, Quill } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { getToken } from "@/utils/auth";

const { proxy } = getCurrentInstance();
// 上传的图片服务器地址
const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + "/system/oss/upload");
const headers = ref({ Authorization: "Bearer " + getToken() });
const quillEditorRef = ref();

// 上传图片的函数
function uploadImage(blob) {
  // 创建FormData
  const formData = new FormData();
  formData.append('file', blob);
  const baseUrl = import.meta.env.VITE_APP_BASE_API;
  // 使用fetch或者其他Ajax库上传图片
  fetch(baseUrl + '/system/oss/upload', {
    method: 'POST',
    body: formData,
    headers: {
      Authorization: "Bearer " + getToken()
    }
  }).then(response => response.json())
    .then(data => {
      let quill = toRaw(quillEditorRef.value).getQuill();
      const imageUrl = baseUrl + data.data.url;
      // 删除原图片
      quill.deleteText(quill.getSelection().index - 1, 1)
      // 在Quill中插入上传之后的图片
      quill.insertEmbed(quill.getSelection().index, 'image', imageUrl);
    })
    .catch(error => {
      console.error('Upload failed', error);
    });
}
// 复制图片粘贴上传
function init() {
  let quill = toRaw(quillEditorRef.value).getQuill();
  // 粘贴事件
  quill.root.addEventListener("paste", (evt) => {
    const clipboardData = event.clipboardData || window.clipboardData;
    console.log(clipboardData)
    if (clipboardData) {
      const items = clipboardData.items;
      if (items && items.length > 0) {
        for (let i = 0; i < items.length; i++) {
          if (items[i].type.indexOf('image') !== -1) {
            const blob = items[i].getAsFile();
            uploadImage(blob);
          }
        }
      }
    }
  })
}
onMounted(() => {
  init()
})
</script>

inith()方法中“let quill = toRaw(quillEditorRef.value).getQuill()"获取当前富文本编辑器；
quill.root.addEventListener(“paste”, (evt) => {}）触发粘贴事件；”quill.deleteText(quill.getSelection().index - 1, 1)“删除原图片；”quill.insertEmbed(quill.getSelection().index, ‘image’, imageUrl);“插入上传成功的图片;
init()方法需要放在dom元素创建完成的”onMounted中“。