官網(wǎng)：https://www.npmjs.com/package/vue-quill-editor
quill官網(wǎng)：https://quilljs.com/docs/quickstart/
兼容：IE10以上

• 自定義toolbar和設(shè)置blots

<template>
<div>
  <button @click="handle">2222</button>
  <quill-editor 
    ref="quill"
    v-model="content"
    :options="editorOption"
    @change="onEditorChange($event)">

    <div id="toolbar" slot="toolbar">
      <!-- 自定義按鈕 -->
      <button>111</button>
    </div>
  </quill-editor>
</div>
</template>

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

class variate extends Embed {
  static blotName = 'variate';
  static tagName = 'variate';
  static create(value) {
    console.log(arguments)
    let val = value.split(',')
    const node = super.create(val[0]);
    node.innerHTML = val[0];
    node.setAttribute('id', value.split(',')[0]);
    node.setAttribute('log', value.split(',')[1]);
    return node;
  }
}
// 注冊
Quill.register(variate);

export default {
  name: "app",
  components: {
    // HelloWorld
  },
  data () {
    return {
      content: '',
      editorOption: {  // 設(shè)置所有的選項
        theme: "snow", // or 'bubble'
        placeholder: "您想說點什么坝橡？",
        modules: {
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"], // 加粗 斜體 下劃線 刪除線
              ["blockquote", "code-block"], // 引用  代碼塊
              [{ header: 1 }, { header: 2 }], // 1鹏氧、2 級標(biāo)題
              [{ list: "ordered" }, { list: "bullet" }], // 有序募谎、無序列表
              [{ script: "sub" }, { script: "super" }], // 上標(biāo)/下標(biāo)
              [{ indent: "-1" }, { indent: "+1" }], // 縮進(jìn)
              // [{'direction': 'rtl'}],                         // 文本方向
              [{ size: ["small", false, "large", "huge"] }], // 字體大小
              [{ header: [1, 2, 3, 4, 5, 6, false] }], // 標(biāo)題
              [{ color: [] }, { background: [] }], // 字體顏色嗽元、字體背景顏色
              [{ font: [] }], // 字體種類
              [{ align: [] }], // 對齊方式
              ["clean"], // 清除文本格式
              ["link", "image", "video"] // 鏈接、圖片索烹、視頻  
            ]
          }
        }
      }
    }
  },
  methods: {
    handle() {
      // 手動設(shè)置輸入的內(nèi)容陨收，作為一個blot，刪除可以刪除整個代碼塊
      let quill = this.$refs.quill.quill
      quill.insertEmbed(10, 'variate', '$bian$,1')
    },
    onEditorChange({ quill, html, text }) {
      console.log('editor change!', quill, html, text)
    }
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>