vue-quill-editor

官网：https://www.npmjs.com/package/vue-quill-editor
quill官网：https://quilljs.com/docs/quickstart/
兼容：IE10以上

• 自定义toolbar和设置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';
// 拿到内嵌
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: {  // 设置所有的选项
        theme: "snow", // or 'bubble'
        placeholder: "您想说点什么？",
        modules: {
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
              ["blockquote", "code-block"], // 引用  代码块
              [{ header: 1 }, { header: 2 }], // 1、2 级标题
              [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
              [{ script: "sub" }, { script: "super" }], // 上标/下标
              [{ indent: "-1" }, { indent: "+1" }], // 缩进
              // [{'direction': 'rtl'}],                         // 文本方向
              [{ size: ["small", false, "large", "huge"] }], // 字体大小
              [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
              [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
              [{ font: [] }], // 字体种类
              [{ align: [] }], // 对齐方式
              ["clean"], // 清除文本格式
              ["link", "image", "video"] // 链接、图片、视频  
            ]
          }
        }
      }
    }
  },
  methods: {
    handle() {
      // 手动设置输入的内容，作为一个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>