富文本框vue-quill-editor的使用

vue-quill官網：https://www.npmjs.com/package/vue-quill-editor

quill官網：https://quilljs.com/docs/quickstart/

基本用法這里就不介紹了，這里介紹下特殊用法：

怎么添加 自定義blots 和 自定義toolbar控件

<template>
<QuillEditor ref="editor" v-model="content" :options="editorOption">
  <div id="toolbar" slot="toolbar">
    <select class="ql-size">
          <option value="small">小</option>
          <option selected>常規</option>
          <option value="large">大</option>
          <option value="huge">特大</option>
        </select>
    <button type="button" class="ql-bold"></button>
    <button type="button" class="ql-italic"></button>
    <button type="button" class="ql-underline"></button>
    <select class="ql-color"></select>
    <button type="button" class="ql-image"></button>
    <button type="button" class="ql-list" value="ordered"></button>
    <button type="button" class="ql-list" value="bullet"></button>
    <select class="ql-align"></select>
    <!-- 自定義控件 -->
    <button  @click="addMyBlot">自定義按鈕</button>
  </div>
</QuillEditor>
</template>

<script>
import { Quill } from 'vue-quill-editor';
// 拿到內嵌
const Embed = Quill.import('blots/embed');

class myBlot extends Embed {
  static blotName = 'myblot';
  static tagName = 'myblot';
  static create(value) {
    const node = super.create(value);
    node.innerHTML = value;
    node.setAttribute('id', value);
    return node;
  }
}
// 注冊
Quill.register(myBlot);

export default {
  data() {
    return {
      content: '',
      editorOption: {
        placeholder: '請輸入文本...',
        modules: {
          toolbar: '#toolbar',
        },
      },
    }
  },
  method: {
    // vue-quill的小bug
    // 雖然是雙向綁定，但不能直接改content，ql-editor的innerHTML，不然blot的value會變為true
    setContent(innerHTML) {
      setTimeout(() => {
        const quill = this.$refs['editor'].quill;
        quill.container.querySelector('.ql-editor').innerHTML = innerHTML
      })
    },
    addMyBlot() {
      const quill = this.$refs['editor'].quill;
      quill.insertEmbed(index, 'myblot', 'balabala。。。');
    }
  }
}

</script>