Quill富文本自定义上传附件

实现流程：

①富文本工具栏添加一个自定义功能，可以修改样式，为该功能按钮添加背景图片

②添加一个组件库的上传组件，通过设置功能按钮事件调上传组件的click事件

③上传附件成功后，通过富文本的插入方法，将附件以a标签的形式插入内容中

1、安装使用富文本

官网地址：http://doc.quilljs.cn/1409423

2、使用自定义方法，重写插入链接方法

import Quill from 'quill'
var Link = Quill.import('formats/link')
class FileBlot extends Link {
    static create(value) {
        let node = undefined
        if(value && !value.href) {
            node = super.create(value)
        } else{
            node = super.create(value.href)
            node.innerText = value.innerText
            node.download = value.innerText
        }
        return node
    }
}
FileBlot.blotName = 'link'
FileBlot.tagName = 'A'
Quill.register(FileBlot)

3、修改富文本配置项

options: {
        theme: "snow",
        bounds: document.body,
        debug: "warn",
        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", "upload", "image", "video"]             // 链接、附件、图片、视频
            ],
            // 自定义添加一个upload功能项，监听对应的事件处理
            handlers: {
              'upload': value => {
                this.$nextTick(() => {
                  this.$refs.uploadFileRef.click()
                })
              }
            }
          },
        },
        placeholder: "请输入内容",
        readOnly: this.onlyRead,
      },

4、upload组件的成功事件监听，上传成功后进行插入链接

// this.Quill：富文本实例；
// window.filePublicUrl：自定义文件服务器地址
// file：上传的文件对象
uploadChange(file) {
    let length = this.Quill.getSelection().index // 获取内容长度
    this.Quill.insertEmbed(length, 'link', { href: window.filePublicUrl + file.filefullPath, innerText: file.filestoredname}) // 插入链接
    const num = file.filestoredname && file.filestoredname.length || 0
    this.Quill.insertText(length + num, '、', true)
    this.Quill.setSelection(length + num + 1) // 设置光标位置
}
// 组件初始化
init() {
    const editor = this.$refs.editor
    this.Quill = new Quill(editor, this.options)
}