【vue】vue-quill-editor富文本编辑器实现自定义

在项目中需求在文本框中添加一个链接，链接的a标签要带有href、id、data-value等自定义属性，但是通过富文本定义的链接只能添加href绑定在a标签上。
之前在百度上面找到类似的文章但是都出现一些小问题，目前都处理ok。在此留个笔记，提提神哈
参考文章：引路文章之vue-quill-editor 如何用insertEmbed插入一个a标签

代码实现如下：

<template>
    <div class="editor">
        <quillEditor v-model="content" ref="rishTextEditor"  :options="editorOption" >
              <div id="toolbar" slot="toolbar">
                     <span  title="自定义链接" class="ql-formats">
                          <button type="button"  @click="customLinkClick" class="ql-link"></button>
                     </span>
              </div>  
        </quillEditor>
    </div> 
</template>
<script>
//引入富文本编辑器
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
//引入Qill插件
import Quill from "quill";
var Link = Quill.import("formats/link");
// 自定义a链接
class FileBlot extends Link {
  // 继承Link Blot
  static create(value) {
    let node = undefined;
    if (value && !value.href) {
      // 适应原本的Link Blot
      node = super.create(value);
    } else {
      // 自定义Link Blot
      node = super.create(value.href);
      node.innerText = value.innerText;
      node.href = value.href;
      node.id= value.id;
      node.setAttribute("title", value.innerText);
      node.setAttribute("data-value", value.dataValue);
    }
    return node;
  }
}
FileBlot.blotName = "link";
FileBlot.tagName = "A";
//注册FileBlot
Quill.register(FileBlot);
export default {
   name: 'editor',
   components: { quillEditor },
   props: {
      value: {
        type: String
       },
    },
    data() {
        return {
            content: null,
            editorOption: {
                modules: {
                    toolbar: '#toolbar'
                }
            }
        }
    },
    methods: {
     //显示自定义链接在富文本框上
      customLinkClick(){ 
          //获取焦点
          this.editor.focus();
          this.editor.insertEmbed(
          this.editor.getSelection().index,
          "link",
          {
            href: exportUrl,
            innerText: data.title,
            id: data.id,
            dataValue: data.dataValue,
          },
          "api"
        );
      }
    },
    computed: {
        editor() {
            return this.$refs.vueQuillEditor.quill;
        }
    }
}

【其他问题1】 自定义链接要如何重新渲染在富文本里呢？

使用innerHTML 渲染,实现如下：

mounted() {
    //编辑时进行文本框赋值
    this.$refs.rishTextEditor.quill.container.querySelector(
      ".ql-editor"
    ).innerHTML = this.value;
  }

【其他问题2】解决文本框赋值后获取焦点

mounted() {
    //【富文本的坑】解决文本框赋值后获取焦点
    this.$refs.rishTextEditor.quill.enable(false);
    this.$nextTick(function() {
      this.$refs.rishTextEditor.quill.enable(true);
      this.$refs.rishTextEditor.quill.blur();
    });

小棨留言：文章描述或者语法理解不到位的地方，请大家多多指教！