vue-quill-editor富文本编辑器使用心得，超详细！

介绍下vue-quill-editor富文本编辑器使用所遇问题以及心得，超详细！

主要说下图片自定义功能

官网文档 vue-quill-editor

1.安装

npm install vue-quill-editor quill

2.在main.js中进行全局引入

import VueQuillEditor from 'vue-quill-editor'
Vue.use(VueQuillEditor)

或 局部引用

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

components:{quillEditor}

还都需在main.js中引入css

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

3.在.vue文件中使用

• quill-editor标签 加上类名 ql-editor 解决 工具栏字体大小不对齐 问题

<template>
    <quill-editor
      v-model="content"
      class="ql-editor"
      :options
    />
</template>
import quillConfig from '@/utils/quill-config.js'
export default {
  data() {
    return {
      quillConfig,
      content:'富文本编辑器内容'
    }
  }
}

4.quillConfig自定义配置

自定义了上传图片

• COMMON_API.getQiniuToken //获取七牛 token
• COMMON_API.upQiniu //上传七牛
• addQuillTitle 解决工具栏hover文字显示,使用：

 mounted() {
    quillConfig.addQuillTitle()
  },

配置详情：

import { COMMON_API } from '@/api/index'

/* 富文本编辑图片上传配置*/
const uploadConfig = {
  action: '', // 必填参数 图片上传地址
  methods: 'POST', // 必填参数 图片上传方式
  token: '', // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage
  name: 'file', // 必填参数 文件的参数名
  size: 4096, // 可选参数   图片大小，单位为Kb, 1M = 1024Kb
  accept: 'image/png, image/jpeg' // 可选 可上传的图片格式
}

// toolbar工具栏的工具选项（默认展示全部）
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' }], // 文本方向
  [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 几级标题
  [{ 'color': [] }, { 'background': [] }], // 字体颜色，字体背景颜色
  [{ 'font': [] }], // 字体
  [{ 'align': [] }], // 对齐方式
  ['clean'], // 清除字体样式
  ['image'] // 上传图片、上传视频
]

const handlers = {
  image: function image() {
    console.log('图片上传')

    const self = this
    let fileInput = this.container.querySelector('input.ql-image[type=file]')
    const filetype = uploadConfig.accept === 'image/png' ? 'png' : 'jpg'

    if (fileInput === null) {
      fileInput = document.createElement('input')
      fileInput.setAttribute('type', 'file')
      fileInput.setAttribute('multiple', true)
      // 设置图片参数名
      // if (uploadConfig.name) {
      //   fileInput.setAttribute('name', uploadConfig.name)
      // }
      // 可设置上传图片的格式
      fileInput.setAttribute('accept', uploadConfig.accept)
      fileInput.classList.add('ql-image')
      // 监听选择文件
      fileInput.addEventListener('change', function() {
        // 创建formData

        COMMON_API.getQiniuToken({ ascription: 'test' })
          .then(res => {
            const token = res.data.token
            const domain = res.data.domain

            for (let i = 0; i < fileInput.files.length; i++) {
              const formData = new FormData()
              console.log(fileInput.files[i])
              formData.append('file', fileInput.files[i])
              formData.append('key', fileRandomNum(filetype))
              formData.append('token', token)

              COMMON_API.upQiniu(formData).then(res => {
                const key = res.data.key
                const length = self.quill.getSelection(true).index
                fileInput.value = ''
                self.quill.insertEmbed(length, 'image', 'http://' + domain + '/' + key)
                self.quill.setSelection(length + 1)
              }).catch(err => {
                console.log(err)
              })
            }
          })
      })
      this.container.appendChild(fileInput)
    }
    fileInput.click()
  }
}

const titleConfig = {
  'ql-bold': '加粗',
  'ql-color': '字体颜色',
  'ql-font': '字体',
  'ql-code': '插入代码',
  'ql-italic': '斜体',
  'ql-link': '添加链接',
  'ql-background': '背景颜色',
  'ql-size': '字体大小',
  'ql-strike': '删除线',
  'ql-script': '上标/下标',
  'ql-underline': '下划线',
  'ql-blockquote': '引用',
  'ql-header': '标题',
  'ql-indent': '缩进',
  'ql-list': '列表',
  'ql-align': '文本对齐',
  'ql-direction': '文本方向',
  'ql-code-block': '代码块',
  'ql-formula': '公式',
  'ql-image': '图片',
  'ql-video': '视频',
  'ql-clean': '清除字体样式'
}

function fileRandomNum(filetype) {
  return ('bus/goods/' + Math.floor(Math.random() * 100) + new Date().getTime() + '.' + filetype)
}

function addQuillTitle() {
  const oToolBar = document.querySelector('.ql-toolbar')
  const aButton = oToolBar.querySelectorAll('button')
  const aSelect = oToolBar.querySelectorAll('select')
  const aSpan = oToolBar.querySelectorAll('span')
  aButton.forEach((item) => {
    if (item.className === 'ql-script') {
      item.value === 'sub' ? item.title = '下标' : item.title = '上标'
    } else if (item.className === 'ql-indent') {
      item.value === '+1' ? item.title = '向右缩进' : item.title = '向左缩进'
    } else if (item.className === 'ql-list') {
      item.value === 'ordered' ? item.title = '有序列表' : item.title = '无序列表'
    } else if (item.className === 'ql-header') {
      item.value === '1' ? item.title = '标题H1' : item.title = '标题H2'
    } else {
      item.title = titleConfig[item.classList[0]]
    }
  })
  aSelect.forEach((item) => {
    if (item.className !== 'ql-color' && item.className !== 'ql-background') {
      item.parentNode.title = titleConfig[item.classList[0]]
    }
  })
  aSpan.forEach((item) => {
    if (item.classList[0] === 'ql-color') {
      item.title = titleConfig[item.classList[0]]
    } else if (item.classList[0] === 'ql-background') {
      item.title = titleConfig[item.classList[0]]
    }
  })
}

export default {
  addQuillTitle, // 工具栏title
  placeholder: '',
  theme: 'snow', // 主题
  modules: {
    toolbar: {
      container: toolOptions, // 工具栏选项
      handlers: handlers // 事件重写
    }
  }
}