vue使用quill编辑器自定义附件上传方法,并根据上传附件名称生成链接
【代码】vue使用quill编辑器自定义附件上传方法,并根据上传附件名称生成链接。
·
1、附件上传
需求:
在编辑器中上传word,pdf,excel等附件后,能根据上传附件的名称生成link链接,在展示页面能实现点击链接下载附件,效果图如下:
实现方法:
quill编辑器自身带有link,但不满足需求,需要自定义添加一个附件上传按钮,以及修改quill中的link.js,注册到quill覆盖原来的方法,实现方法如下:
- 重新编辑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);
- 到quill官网: https://github.com/quilljs/quill/tree/develop复制link.ts改写,link.ts目录为
- 在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("上传失败,请重试"); } },
- 引入quill编辑器,添加一个el-upload用于上传(上传附件、图片、视频都使用到改组件)
3.展示效果
点击链接下载
更多推荐
已为社区贡献2条内容
所有评论(0)