vue-quill-editor github 传送门：https://github.com/surmon-china/vue-quill-editor

quill编辑器官网：https://quilljs.com/docs/quickstart/

quill编辑器中文文档：https://bingkui.gitbooks.io/quill/content/documentation/quickstart.html

 

最近在写项目时，用到了quill编辑器，之前是用u-editor，觉得太重，改成了Quill。选择了使用vue-quill-editor插件。

遇到了几个问题，特在这里记录一下：

1、自定义了上传视频和音频的toolbar.

quill.config.js代码如下：

const toolbarOptions = [

  ['bold', 'italic'],
  ['blockquote'],
  [{
    'header': 1
  }, {
    'header': 2
  }],
  [{
    'list': 'ordered'
  }, {
    'list': 'bullet'
  }],
  [{
    'indent': '-1'
  }, {
    'indent': '+1'
  }],
  [{
    'header': [1, 2, 3, 4, 5, 6, false]
  }],
  [{
    'color': []
  }, {
    'background': []
  }],
  [{
    'align': []
  }],
  // ['clean'],
  ['link', 'image', {
    'video': {
      attributes: {
        'data-toggle': 'tooltip',
        'data-placement': 'bottom',
        'title': '上传音视频'
      }
    }
  }],
  ['clean'],
  ['undo', 'redo']
  // ['html']

];

export default {
  toolbarOptions: toolbarOptions,
  initButton() {
    const undo = document.querySelector(".ql-undo")
    undo.innerHTML = '<img src="/static/img/undo.png"/>'

    const redo = document.querySelector(".ql-redo")
    redo.innerHTML = '<img src="/static/img/redo.png"/>'

    /* const html = document.querySelector('.ql-html');

    html.innerHTML = '<img src="/static/img/source.png"/>'
    // 鼠标放上去显示的提示文字
    html.title = '源码编辑'; */
  }
}

因为要做撤回和重做的按钮自定义的图标，所以这里所这一部分单拿出来。

在editor-quill组件中，代码如下：

toolbar: {
            container: quillConfig.toolbarOptions,
            shadeBox: null,
            handlers: {
              'image': function () {
                QuillWatch.emit(this.quill.id)
              },
              'video': function (value) {
                // QuillVideoWatch.emit(this.quill.id)
                if (value) {
                  document.querySelector('#show_btn').click()
                } else {
                  Quill.format('video', false)
                }
              },
              redo() {
                console.log(self);

                this.quill.history.redo();
              },
              undo() {
                this.quill.history.undo();
              }
            }
          },

其中，如果要想在编辑器中插入video和audio标签，就必须在quill中注册：

代码如下：

class AudioBlot extends BlockEmbed {
  static create(value) {
    let node = super.create()
    node.setAttribute('class', 'audio')
    node.setAttribute('src', value.url)
    node.setAttribute('controls', value.controls)
    node.setAttribute('preload', 'none')
    node.setAttribute('width', value.width)
    node.setAttribute('height', value.height)
    return node;
  }

  static value(node) {
    return {
      class: node.getAttribute('class'),
      url: node.getAttribute('src'),
      controls: node.getAttribute('controls'),
      preload: node.getAttribute('preload'),
      width: node.getAttribute('width'),
      height: node.getAttribute('height')
    };
  }
}

AudioBlot.blotName = 'customAudio'
AudioBlot.tagName = 'audio'
Quill.register(AudioBlot)

export default{
methods:{
videoSuccess(res) {
      console.log('videoSucc:==', res)
      // 获取富文本组件实例
      let quill = this.$refs.myQuillEditor.quill
      // 如果上传成功
      if (res) {
        // 获取光标所在位置
        let length = quill.getSelection().index;
        console.log("videoRes:==", res)
        if (res.fileId) {
          // 插入视频，res为服务器视频信息
          quill.insertEmbed(length, 'customVideo', {
            url: res.video.url,
            id: 'video_' + res.fileId,
            controls: 'controls',
            width: '100%',
            height: '100%'
          })
        } else {
          // 插入音频，res为服务器音频信息
          quill.insertEmbed(length, 'customAudio', {
            url: res.url,
            controls: 'controls',
            width: '300',
            height: '70'
          })
        }

        // 调整光标到最后
        quill.setSelection(length + 1)
      } else {
        // 提示信息，需引入Message
        Message.error('图片视频失败')
      }
    },
}
}