vue-quill-editor 添加自定义工具栏

今天要做一个需求：给富文本编辑器添加一个图标，并且自定义其触发事件。

首先，在文件中引入 vue-quill-editor ：

import { quillEditor } from 'vue-quill-editor'
import Delta from 'quill-delta'
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

然后，自定义工具栏：

const toolbarOptions = [
  ['insertMetric'],
  ['bold', 'italic', 'underline', 'strike'],        // 加粗，斜体，下划线，删除线
  ['blockquote', 'code-block'],                     //引用，代码块
  [{ 'header': 1 }, { 'header': 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': ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }], // 字体
  [{ 'align': [] }],    // 居中
  ['clean'],            // 清除样式,
  ['link', 'image']   // 上传图片、上传视频
]

上面配置中，在工具栏最前面加上了一个 insertMetric工具。

然后，在 mounted 调用初始化按钮样式的方法：

  mounted () {
    this.initButton()
  },

methods 中定义initButton初始化按钮：

    // 自定义按钮内容初始化
    initButton () {
      const editorButton = document.querySelector('.ql-insertMetric')
      editorButton.innerHTML = '<i class="el-icon-link" style="font-size: 18px;color: black"></i>'
    }

在 handlers 中定义按钮触发事件：

handlers: {
     insertMetric: this.showHandle
}

当点击自定义按钮时，会触发 showHandle方法，methods 中定义showHandle方法：

    showHandle () {
      this.$message.error('这是自定义工具栏的方法！')
    }

可以看到，富文本编辑器中出现了我们自定义的按钮：

当点击自定义按钮时，会弹出提示信息，页面效果如下：

完整版代码如下：

<template>
  <div>
    <div>
      <!--富文本编辑器组件-->
      <!-- bidirectional data binding（双向数据绑定） -->
      <quill-editor v-model="formData.content" ref="QuillEditor" class="editor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)">
      </quill-editor>
      <div v-html="formData.content" />
    </div>
  </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import Delta from 'quill-delta'
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

//引入Qill插件
import Quill from "quill";

const toolbarOptions = [
  ['insertMetric'],
  ['bold', 'italic', 'underline', 'strike'],        // 加粗，斜体，下划线，删除线
  ['blockquote', 'code-block'],                     //引用，代码块
  [{ 'header': 1 }, { 'header': 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': ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }], // 字体
  [{ 'align': [] }],    // 居中
  ['clean'],            // 清除样式,
  ['link', 'image']   // 上传图片、上传视频
]
export default {
  name: 'addarticle',
  components: {
    quillEditor
  },
  data () {
    return {
      formData: {
        content: '' // `<h1 style="text-align: center;">Welcome to the TinyMCE demo!</h1>`
      },
      editorOption: {
        placeholder: '请在这里输入',
        theme: 'snow', //主题 snow/bubble
        modules: {
          history: {
            delay: 1000,
            maxStack: 50,
            userOnly: false
          },
          toolbar: {
            container: toolbarOptions,
            handlers: {
              insertMetric: this.showHandle
            }
          }
        }
      }
    }
  },
  props: {
  },
  watch: {
  },
  created () {
  },
  mounted () {
    this.initButton()
    //【富文本的坑】解决文本框赋值后获取焦点
    this.$refs.QuillEditor.quill.enable(false);
    this.$nextTick(function () {
      this.$refs.QuillEditor.quill.enable(true);
      this.$refs.QuillEditor.quill.blur();
    })
  },
  methods: {
    showHandle () {
      this.$message.error('这是自定义工具栏的方法！')
    },
    // 自定义按钮内容初始化
    initButton () {
      const editorButton = document.querySelector('.ql-insertMetric')
      editorButton.innerHTML = '<i class="el-icon-link" style="font-size: 18px;color:black"></i>'
    },
    // 失去焦点
    onEditorBlur (editor) { },
    // 获得焦点
    onEditorFocus (editor) { },
    // 开始
    onEditorReady (editor) { },
    // 值发生变化
    onEditorChange (editor) {
      // 如果需要手动控制数据同步，父组件需要显式地处理changed事件
      // this.content = editor.html;
      console.log(editor);
    }
  }
}
</script>

<style lang='less'>
</style>