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 } from 'vue-quill-editor'
import {  ImageExtend, QuillWatch } from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)

建议将参数设置以及图片上传设置单独到一个js文件，然后再引入需要的组件中

3、配置上传内容（将配置封装成单独的qdie.js文件）

const  toolOptions=[
                      ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
                      ['blockquote', 'code-block'], // 引用  代码块
                      [{ header: 1 }, { header: 2 }], // 1、2 级标题
                      [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
                      [{ script: 'sub' }, { script: 'super' }], // 上标/下标
                      [{ indent: '-1' }, { indent: '+1' }], // 缩进
                      [{ direction: 'rtl' }], // 文本方向
                      ['link', 'image', 'video'], // 链接、图片、视频
                      [{ align: [] }], // 添加居中按钮
                      [{ color: [] }], // 文字颜色按钮
                  ],   
const uploadConfig = {
modules: {
  ImageExtend: {
    // 如果不作设置，即{}  则依然开启复制粘贴功能且以base64插入
    name: 'File', // 图片参数名
    size: 0.3, // 可选参数 图片大小，单位为M，1M = 1024kb
    action: '', // 服务器地址, 如果action为空，则采用base64插入图片
    // response 为一个函数用来获取服务器返回的具体图片地址
    // 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}
    // 则 return res.data.url
    response: (res) => {
      console.log(res)
      return res.url
    },
    headers: (xhr) => {
      console.log(xhr)
      //当前为你的接口需要的header参数设置
      xhr.setRequestHeader('Authorization', `Bearer ${getAccessToken()}`)
      // xhr.Authorization = `Bearer ${getAccessToken()}`
    }, // 可选参数 设置请求头部
    sizeError: () => {}, // 图片超过大小的回调
    start: () => {}, // 可选参数 自定义开始上传触发事件
    end: () => {}, // 可选参数 自定义上传结束触发的事件，无论成功或者失败
    error: () => {}, // 可选参数 上传失败触发的事件
    success: () => {}, // 可选参数  上传成功触发的事件
    change: (xhr, formData) => {
      // xhr.setRequestHeader('myHeader','myValue')
      // formData.append('token', 'myToken')
    }, // 可选参数 每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
  },
  toolbar: {
    // 如果不上传图片到服务器，此处不必配置
    container: toolOptions, // container为工具栏，此次引入了全部工具栏，也可自行配置
    handlers: {
      image: function () {
        // 劫持原来的图片点击按钮事件
        QuillWatch.emit(this.quill.id)
      },
    },
  },
},
}

如果是单独成一个js文件的话，export就可以调用了

export default uploadConfig

然后在调用组件的地方设置data()

     data() {
      return {
        content: '',      
        editorOption: quillConfig,
      }

整个功能就实现了