vue-quill-editor 自定义 img 标签，给标签添加 href 属性

需求：上传图片成功之后，给图片标签插入 href 属性，内容为自定义的一段字符串，格式大概如下：<img src="xxxxx" href="abcdefg"/>

传统插入图片方法是图片上传到服务器成功之后，在编辑器里插入图片，传入图片url，如下：

    uploadSuccess (res) {
   
      // 获取富文本组件实例
      let quill = this.$refs.QuillEditor.quill
      // 如果上传成功
      if (res) {
   
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片，res为服务器返回的图片链接地址
        quill.insertEmbed(length, 'image', res.result[0].url)
        // 调整光标到最后
        quill.setSelection(length + 1)
      } else {
   
        // 提示信息，需引入Message
        this.$message.error('图片插入失败！')
      }
    }

这里需要给 img 标签添加 href 属性，所以，就想着使用插入节点的方式去实现：

    uploadSuccess (res) {
   
      // 获取富文本组件实例
      let quill = this.$refs.QuillEditor.quill
      // 如果上传成功
      if (res) {
   
        let imgUrl = res.result[0].url
        let obj = 'abcdefg'
        let selection = window.getSelection(true)
        // getRangeAt(index)：返回一个包含当前选区内容的区域对象。
        let range = selection.getRangeAt(0)
        let insertNode = document.createElement('img')
        // 设置标签属性
        insertNode.setAttribute('src', imgUrl)
        insertNode.setAttribute('href', obj)
        quill.setSelection(quill.selection.savedRange.index + 1)  // 这个方法可以获取光标位置
        // setStart(startNode, startOffset)：用于设置 Range的开始位置
        // startNode 用于设定 Range的起始位置
        // startOffset 必须为不小于0的整数，表示从startNode的开始位置算起的偏移量
        range.setStart(range.endContainer, range.endOffset)
        // insertNode()：用来在选区的开头插入节点
        range.insertNode(insertNode)
        // setEnd(endNode, endOffset)：用于设置 Range的结束位置
        // endNode 用于设定 Range的结束位置
        // endOffset 必须为不小于0的整数，表示从endNode的结束位置算起的偏移量
        // Range.endContainer 是一个只读属性。它会返回Range对象结束的Node。如果要改变一个节点结束的位置
        range.setEnd(range.endContainer, range.endOffset)
        selection.collapse(range.endContainer, range.endOffset) // 合并范围至末尾
      } else {
   
        // 提示信息，需引入Message
        this.$message.error('图片插入失败！')
      }
    }

可以看到，在插入图片后，图片标签上面有一个 href 属性，效果如下：