富文本编辑器quill---vue组件（vue-quill-editor）的使用

1.配置webpack plugin

解决以下报错

Uncaught TypeError: Cannot read property 'imports' of undefined (image-resize.min.js?c9ce:1)

// 在vue.config.js中configureWebpack中配置
// 要引入webpack
var webpack = require('webpack');

configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        'window.Quill': 'quill/dist/quill.js',
        'Quill': 'quill/dist/quill.js'
      }),
    ]
  }

2.在main.js中添加以下内容

import VueQuillEditor from 'vue-quill-editor'

// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor)

3.vue组件使用模板

<template>
    <quill-editor ref="myTextEditor"
              v-model="content"
                  :options="editorOption"
              @blur="onEditorBlur($event)">
    </quill-editor>
</template>

<script>
    import hljs from 'highlight.js'
  import VueQuillEditor, { Quill } from 'vue-quill-editor'
  import { ImageDrop } from 'quill-image-drop-module'
  import ImageResize from 'quill-image-resize-module'
  Quill.register('modules/imageDrop', ImageDrop)
  Quill.register('modules/imageResize', ImageResize)

    export default {
        name: "myEditor",
        data(){
            return{
                editorOption: {
          modules: {
            toolbar: [
              ['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] }],
              [{ 'font': [] }],
              [{ 'color': [] }, { 'background': [] }],
              [{ 'align': [] }],
              ['clean'],
              ['link', 'image', 'video']
            ],
            history: {
              delay: 1000,
              maxStack: 50,
              userOnly: false
            },
            imageDrop: true,
            imageResize: {
              displayStyles: {
                backgroundColor: 'black',
                border: 'none',
                color: 'white'
              },
              modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
            }
          }
        },
                content:''
            }
        },
        methods:{
            onEditorBlur:function () {
                console.log(this.content)
            }
        }
    }
</script>

<style scoped>

</style>