vue使用quill-editor编辑器监听a超链接点击事件

vue项目使用vue-quill-editor富文本编辑器，有时对链接或附件进行点击跳转下载会出现下载失败现象，因为quill-editor编辑器附件添加的a超链接点击是直接访问下载，但该附件资源需要cookie或其他校验信息，最后会下载失败。此时可通过addEventListener添加点击事件监听，获取到当前点击事件信息，进行额外处理以及event.preventDefault();阻止默认行为，代码如下：

<template>
  <div>
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOptions"
      style="height: 500px"
    ></quill-editor>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css"; // 引入基本的Quill样式
import "quill/dist/quill.snow.css"; // 引入Snow主题样式（可选）
export default {
  name: "PdfView",
  components: {
    quillEditor,
  },
  data() {
    return {
      content: "", // 绑定到编辑器的内容
      editorOptions: {
        // 编辑器的配置选项
        // 例如，设置placeholder等
        placeholder: "Compose an epic...",
      },
      innerText: "",
    };
  },
  mounted() {
    document.addEventListener("click", this.globalClickHandler);
  },
  beforeDestroy() {
    document.removeEventListener("click", this.globalClickHandler);
  },
  methods: {
    globalClickHandler(event) {
      let target = event.target;
      if (!target.classList.contains("ql-preview") && target.innerText) {
        this.innerText = target.innerText;
        console.log("innerText", this.innerText);
      }
      if (target.classList.contains("ql-preview")) {
        event.preventDefault();
        console.log("innerText1", this.innerText);
        console.log("href", event.target.href);
        // 进一步的处理逻辑
      }
    },
  },
};
</script>
<style scoped>
</style>

image.png