Vue在Element UI下使用富文本框插件quill-editor（我个人不推荐用这个复杂的富文本插件）

cnpm install vue-quill-editor
cnpm install quill-image-drop-module
cnpm install quill-image-resize-module

执行上面的命令安装，然后在main.js下面加入

//引入quill-editor编辑器
 import VueQuillEditor from 'vue-quill-editor'
 import 'quill/dist/quill.core.css'
 import 'quill/dist/quill.snow.css'
 import 'quill/dist/quill.bubble.css'
 Vue.use(VueQuillEditor)

 //实现quill-editor编辑器拖拽上传图片
 import * as Quill from 'quill'
 import { ImageDrop } from 'quill-image-drop-module'
 Quill.register('modules/imageDrop', ImageDrop)

 //实现quill-editor编辑器调整图片尺寸
 import ImageResize from 'quill-image-resize-module'
 Quill.register('modules/imageResize', ImageResize)

在vue页面中使用quill-editor

<template>
  <div class="quillEditor">
    <quill-editor
      v-model="quillEidtorValue"
      ref="quillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
    ></quill-editor>
    <button @click="saveQuillEditorValue">保存</button>
  </div>
</template> 
<script>
export default {
  data() {
    return {
      quillEidtorValue: `<p>hello quillEditor!!</p>`, //默认富文本内容
      editorOption: {
        modules: { imageDrop: true }, //开启拖拽
        imageResize: {}, //图片大小可调
        theme: "snow" //默认主题
      }
    };
  },
  computed: {
    editor() {
      return this.$refs.quillEditor.quill;
    }
  },
  methods: {
    onEditorReady(editor) {}, // 准备编辑器
    onEditorBlur() {}, // 失去焦点事件
    onEditorFocus(val, editor) {
      // console.log(val); // 富文本获得焦点时的内容
      // editor.enable(false); // 在获取焦点的时候禁用
    }, // 获得焦点事件
    onEditorChange() {}, // 内容改变事件
    saveQuillEditorValue: function(event) {
      alert(this.quillEidtorValue);
    }
  }
};
</script>