vue-quill-editor 解决空格不回显以及插入之后的图片可以调整大小的问题

解决富文本空格不显示的bug超级简单

//加上 class="ql-editor"这个class即可
 <quillEditor class="ql-editor"
                       v-model="ruleForm.gg"
                       ref="myQuillEditorGg"
                       :options="editorOption3"
                       @blur="onEditorBlur($event)"
                       @focus="onEditorFocus($event)"
                       @change="onEditorChange($event)">
          </quillEditor>

editor可以调整图片大小

引入

import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { toolbarOptions } from '@/utils/common.js'
import * as Quill from 'quill'  // 引入编辑器
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', ImageResize)

data定义

  data () {
  	return {
		editorOption3: {
		   placeholder: '',
		   theme: 'snow',  // or 'bubble'
		   modules: {
		     imageResize: {}, // 图片调整大小的关键这在这里可以 其他的参数因人而异，
		   }
		 }
	 }
 }

做好了这些还不够，还得在 webpack.base.conf.js文件里面加入一段代码

var webpack = require('webpack') // 顶部引入
//在module.exports 内增加这一句话
plugins: [
    new webpack.ProvidePlugin({
      'window.Quill': 'quill'
    })
  ],