关于vue中使用quillEditor，并引入Resize和Extend

quillEditor相比于wangeditor有更丰富的功能，可以对上传的文件进行缩放操作

<template>
     <quill-editor
     style="width:100%;height:80%"
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)" 
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)">
    </quill-editor>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// quill图片可拖拽改变大小
import Quill from 'quill'
import ImageResize from 'quill-image-resize-module' 
Quill.register('modules/ImageExtend', ImageExtend)
Quill.register('modules/imageResize', ImageResize)
export default{
  components: {
    quillEditor
  },
  props: ['value'],
  computed: {
    content: {
      get: function () {
        return this.value
      },
      set: function (newVal, oldVal) {
        this.newContent = newVal
      }
    }
  },
  data () {
    return {
      newContent: ' ',
      editorOption: {
        modules: {
          // toolbar: [
          //   ['bold', 'italic', 'underline', 'strike'],
          //   [{ 'header': 1 }, { 'header': 2 }],
          //   [{ 'list': 'ordered' }, { 'list': 'bullet' }],
          //   [{ 'size': ['small', false, 'large', 'huge'] }],
          //   [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
          //   [{ 'color': [] }, { 'background': [] }], // 字体颜色，字体背景颜色
          //   [{ 'font': [] }],
          //   ['image', 'video']
          // ],
          toolbar: {
            container: container,
            handlers: {
              'image': function () {
                QuillWatch.emit(this.quill.id)
              }
            }
          },
          imageResize: { // 调整上传过后图片大小配置。
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
          },
          ImageExtend: {
            loading: true,
            name: 'file',
            size: 3, // 单位为M, 1M = 1024KB
            action: '/api/operations/upload',
            // headers: (xhr) => {
            // },
            response: (res) => {
              return '/api/operations/preview/' + res.obj
            }
          }
        }
      }
    }
  },
  methods: {
    onEditorBlur () { // 失去焦点事件
    },
    onEditorFocus () { // 获得焦点事件
    },
    onEditorChange () { // 内容改变事件
      this.$emit('change', this.newContent)
    }
  }
}
</script>
<style lang="less" >
 .ql-editor{
   height:600px;
 }
</style>