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

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

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编辑器工具栏添加自定义附件上传

引入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.展示效果
 
 点击链接下载
 
				原文：https://www.jianshu.com/p/9e4e4d955d0f
需求一 图片上传
就是要一个富文本编辑器，然后有图片上传功能，因为vue-quill-editor是将图片转为base64编码，所以当图片比较大时，提交后台时参数过长，导致提交失败。
将图片先上传至服务器，再将图片链接插入到富文本中
图片上传的话可以使用element或者iview，这里我以iview举例
图片上传区域要隐藏，自定义vue-quill-editor的图片上传，点击图片上传时调用iview或者elem
最近要做个移动端富文本，但是需求比较简单，只需要能够上传图片和实现文字位置自定义
找了蛮多文章都建议使用quill。既然大伙儿都推荐它，想必它是有过人之处的。话不多说，开始代码。
先看下移动端效果图
参考链接
vue-quill-editor在线使用
quilljs官网快速开始
ImgText.vue
<template>
  <div class="example">
    <quill-editor
      class="editor"
本篇文章将介绍vue-quill-editor上传图片的那些事，通常来说，我们数据库内都是保存图片路径的，所以上传完图片之后，要回传一个路径给前端，这才是完整的上传步骤。
第一步：上传图片，第二步：保存到服务器，并且生成路径保存到数据库，第三步：回传前端，后台图片路径，前端显示图片。
本文中使用了element-ui框架来帮助我完成前端展示工作。
上传图片
上传图片也有几种方式，比如直接使用file控件上传到指定地址，又或者是借助封装好的上传按钮上传图片，如果是base64传到后台，还需要转回图片原格式加以保存，如果是二进制图片流则直接传到服务器即可。
我使用的是element-ui框
cnpm install vue-quill-editor -S
cnpm install quill -S
cnpm install quill-image-resize-module -S
cnpm install quill-image-drop-module -S
在project.config.js下写入如下代码
const webpack = require("webpack")
const
<template>
		<quill-editor v-model="content" ref="quill" :options="editorOption" class="editor">
		</quill-editor>
		<input type="file" @change="onEditorChange" id="upload" style=";" />