vue使用quill编辑器自定义附件上传方法，并根据上传附件名称生成链接

1、附件上传

需求：
在编辑器中上传word,pdf,excel等附件后，能根据上传附件的名称生成link链接，在展示页面能实现点击链接下载附件，效果图如下：
实现方法：
quill编辑器自身带有link，但不满足需求，需要自定义添加一个附件上传按钮，以及修改quill中的link.js，注册到quill覆盖原来的方法，实现方法如下：

1. 重新编辑link.ts，并重新register到quill编辑器
   • 到quill官网: https://github.com/quilljs/quill/tree/develop复制link.ts改写，link.ts目录为packages/quill/src/formats/link.ts
   • 保留原来的link方法，添加自定义link方法

     static create(value) {
         let node = undefined;
         if (value && !value.href) {
           // 自身Link Blot
           node = super.create(value);
           node.setAttribute("href", this.sanitize(value));
           node.setAttribute("rel", "noopener noreferrer");
           node.setAttribute("target", "_blank");
         } else {
           // 自定义Link Blot
           node = super.create(value.href);
           node.setAttribute("href", value.href); // 左键点击即下载
           node.setAttribute("download", value.innerText); // 左键点击即下载
           node.innerText = value.innerText;
         }
         return node;
       }
     

   • 修改后的link.js(这里我是复制link.ts粘贴到自己新建的link.js进行改写)

     import Quill from "quill";
     const InlineEmbed = Quill.import("blots/inline");
     // import Inline from '../blots/inline';
     
     // 自定义超链接
     class Link extends InlineEmbed {
       static blotName = "link";
       static tagName = "A";
       static SANITIZED_URL = "about:blank";
       static PROTOCOL_WHITELIST = ["http", "https", "mailto", "tel", "sms"];
     
       static create(value) {
         let node = undefined;
         if (value && !value.href) {
           // 自身Link Blot
           node = super.create(value);
           node.setAttribute("href", this.sanitize(value));
           node.setAttribute("rel", "noopener noreferrer");
           node.setAttribute("target", "_blank");
         } else {
           // 自定义Link Blot
           node = super.create(value.href);
           node.setAttribute("href", value.href); // 左键点击即下载
           node.setAttribute("download", value.innerText); // 左键点击即下载
           node.innerText = value.innerText;
         }
         return node;
       }
     
       static formats(domNode) {
         return domNode.getAttribute("href");
       }
     
       static sanitize(url) {
         return sanitize(url, this.PROTOCOL_WHITELIST) ? url : this.SANITIZED_URL;
       }
     
       format(name, value) {
         if (name !== this.statics.blotName || !value) {
           super.format(name, value);
         } else {
           // @ts-expect-error
           this.domNode.setAttribute("href", this.constructor.sanitize(value));
         }
       }
     }
     
     function sanitize(url, protocols) {
       const anchor = document.createElement("a");
       anchor.href = url;
       const protocol = anchor.href.slice(0, anchor.href.indexOf(":"));
       return protocols.indexOf(protocol) > -1;
     }
     
     export default Link;
     

   • 在vue中引入link.js

     import Quill from "quill";
     import Link from "./link";
     Quill.register(Link, true);
     

2. 在quill编辑器工具栏添加自定义附件上传
   • 引入quill编辑器，添加一个el-upload用于上传（上传附件、图片、视频都使用到改组件）
     
   • 在quill工具栏配置添加自定义附件上传按钮["uploadfile"], //自定义附件，并添加自定义附件上传功能

             modules: {
               // 工具栏配置
               toolbar: {
                 container: [
                   ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
                   ["blockquote", "code-block"], // 引用  代码块
                   [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
                   [{ indent: "-1" }, { indent: "+1" }], // 缩进
                   [{ size: ["small", false, "large", "huge"] }], // 字体大小
                   [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
                   [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
                   [{ align: [] }], // 对齐方式
                   ["clean"], // 清除文本格式
                   ["link", "image", "video"], // 链接、图片、视频
                   ["uploadfile"], //自定义附件按钮
                 ],
                 handlers: {
                   uploadfile: function (value) {
                     //自定义上传附件功能
                     _that.uploadType = "uploadfile";
                     _that.accept = "application/*";
                     setTimeout(() => {
                       if (value) {
                         document.querySelector(".el-upload input").click();
                       } else {
                         _that.quill.format("uploadfile", false);
                       }
                     }, 100);
                   },
                 },
               },
               imageResize: {
                 //放大缩小
                 displayStyles: {
                   backgroundColor: "black",
                   border: "none",
                   color: "white",
                 },
                 modules: ["Resize", "DisplaySize", "Toolbar"],
                 // Resize: 允许缩放、DisplaySize：缩放是显示像素、Toolbar：显示工具栏，用于设置图片居中等样式
               },
               // imageDrop: true, //图片拖拽
             },
     

   • 在编辑器工具栏添加自定义图标

           // 初始化时编写，
           const editor = this.$refs.editor;
           this.Quill = new Quill(editor, this.options);
           // 设置自定义工具栏图标
           this.$el.querySelector(
             ".ql-uploadfile"
           ).innerHTML = `<i class="el-icon-upload" style="font-size: 18px"/>`;
     

   • 附件上传成功后回调函数

         /** 上传成功回调函数 */
         handleUploadSuccess(res, file) {
           // 获取富文本组件实例
           let quill = this.Quill;
           // 如果上传成功
           if (res.code === 200) {
             //光标后移长度，默认是1
             let shiftLength = 1;
             // 插入链接
             quill.insertEmbed(this.lastSelection, "link", {
               href: process.env.VUE_APP_BASE_API + res.data.fileAddress,
               innerText: res.data.originalName,
             });
             this.lastSelection = res.data.originalName.length;
             // 调整光标到最后
             quill.setSelection(this.lastSelection + shiftLength);
             this.$modal.closeLoading();
           } else {
             this.$modal.closeLoading();
             this.$modal.msgError("上传失败，请重试");
           }
         },
     

3.展示效果

点击链接下载