vue2使用富文本编辑器vue-quill-editor

项目中需要用到富文本编辑器，找了一圈，都在使用vue-quill-editor，经过一番摸索，成功实现，做个记录

一、初始化vue-quill-editor

npm install vue-quill-editor -S

（对于新手来说，可能会有很多版本上的冲突，只需要在初始化后面加上–legacy-peer-deps就可以解决）

二、main.js全局引入

（为什么要全局引入，是因为在单组件中引入的话需要调用vue（））

代码如下：

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)

三、在页面中使用

因为它是作为组件存在，所以引入的时候也是需要按组件方式引入的

 import {
    quillEditor, Quill } from 'vue-quill-editor'

 components: {
   
     quillEditor,
   },
    data() {
   
     return {
   
       content: '',      
     }
   },

在页面调用

  <quill-editor ref="myQuillEditor" :value="content"   :options="editorOption" />

其实到这一步已经完成了调用，也能使用了，但是自带的功能很多都是用不上的，所以可以根据需求来限定（在toolbar更改）

四、上传图片到服务器

富文本编辑器的图片格式默认是base64，需要上传到服务器的话，需要再设置

1、引入图片依赖

npm install quill
npm install quill-image-resize-module --save
npm install quill-image-drop-module --save

2、在需要的组件内引入

import {
     Quill