nuxt引入quill

1.安装

终端输入：npm install vue-quill-editor --save

2.配置js文件

在plugins文件夹内创建一个nuxt-quill-plugin.js的文件，内容如下：

import Vue from 'vue'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 引入quill
import Quill from 'quill'
// 设置字体工具栏
var sizes = [false, '14px', '16px', '20px', '24px', '36px'];
var Size = Quill.import("formats/size");
Size.whitelist = sizes;
// 加一个浏览器端判断，只在浏览器端才渲染就不会报错了
if (process.browser) {
  const VueQuillEditor = require('vue-quill-editor/dist/ssr')
  Vue.use(VueQuillEditor)
}

注释：由于nuxt很多东西都是自生成或者服务端的一个东西，虽然是基于vue框架，但是和vue框架的配置方法很不一样。而quill富文本的字体大小只是默认的那几种所以定制化需要手动配置。按照一般的vue配置方法会报错。（当然本人是报错了，其他人不知道有没有这种情况）

3.配置nuxt.config.js 

css: [
    'element-ui/lib/theme-chalk/index.css',
'@/static/css/common.scss',
 // quill富文本
    'quill/dist/quill.snow.css',
    'quill/dist/quill.bubble.css',
    'quill/dist/quill.core.css',
  ],
plugins: [
    {src:'@/plugins/store-cache',ssr:false},
    '@/plugins/element-ui',
    '@/plugins/axios',
    '@/plugins/utils.js',
    // quill富文本
    {
      src: '@/plugins/nuxt-quill-plugin.js',
      ssr: false //仅在客户端渲染
    },
  ],

4.组件使用

这段代码里包含了上传图片的功能，其余自定义工具栏配置百度百科即可

<template>
  <div class="VueQuillEditor">
    <el-upload
      style="display: none"
      class="quill-avatar-uploader"
      :action="upUrl"
      :headers="headers"
      :show-file-list="false"
      accept="image/png, image/jpeg, image/jpg"
      :before-upload="beforeAvatarUpload"
      :on-success="handleAvatarSuccess"
     >
    </el-upload>
    <div 
      class="quill-editor" 
      ref="myQuillEditor"
      :content="contentHtml" 
      v-quill:myQuillEditor="editorOption"
      :style="cusStyle"
      :width = "toolBarwidth"
      @change="onEditorChange($event)" 
      @paste="pasteMe($event)"
      style="height: 100px;">
    </div>
  </div>
</template>
<script>
export default {
  props: {
    // 内容
    content: {
      type: String,
      default: ''
    },
    // 配置项
    containerOptions: {
      type: Array,
      default () {
        return [
          ['bold', 'italic'],
          ['blockquote', 'code-block'],
          ['image'],
          [{ 'list': 'ordered' }, { 'list': 'bullet' }],
        ]
      }
    },
    // 自定义样式
    cusStyle: {
      type: String,
      default: ''
    },
    // 宽度
    toolBarwidth: {
      type: String,
      default: '500px'
    },
    maxLength: {
      type: Number,
      default: 100
    }
  },
  data() {
    const self = this
    return {
      editorOption: {
        // some quill options
        modules: {
          toolbar: {
            container:this.containerOptions,
            handlers: {
              'image': function (value) {
                if (value) {
                  // 点击图片按触发elmentui上传的input选择图片事件.quill-avatar-uploader是上传文件组件的那个类名
                  document
                    .querySelector(".quill-avatar-uploader input")
                    .click();
                } else {
                  this.quill.format("image", false);
                }
              }
            }
          }
        }
      },
      contentHtml:this.content,
      isLoading: false,
      progress: '',
      upUrl: "/api/member/member/upload",
      headers: { Authorization: 'Bearer ' + this.$store.state.auth.token}
    }
  },
  methods: {
    onEditorChange({ editor, html, text }) {
      console.log('editor editor!', editor)
      console.log('editor html!', html)
      console.log('editor text!', text)
      this.contentHtml = html
    },
    // 图片上传前---格式与大小验证
    beforeAvatarUpload(file) {
      let isPass = false;
      if (
        file.type === "image/png" ||
        file.type === "image/jpeg" ||
        file.type === "image/jpg"
      ) {
        isPass = true;
      }
      const isLt = file.size / 1024 / 1024 < 5;
      if (!isPass) {
        this.$message.error("当前仅支持上传图片JPG/jpeg/png格式!");
        return false;
      }
      if (!isLt) {
        this.$message.error("上传图片大小不能超过 5MB!");
        return false;
      }
      return isPass && isLt;
    },
    handleAvatarSuccess(res, file) {
      // 图片上传成功后的回调
      // let quill = this.$refs.myQuillEditor.quill
      // 如果上传成功，res.url为服务器返回的图片地址
      if (res.data !== null) {
        // 获取光标所在位置
        // let length = quill.getSelection().index
        // let url = this.$utils.pictureStitching( res.data, 'editor')
        this.contentHtml += `<img src="${res.data}" alt="内容图片">`;
        this.contentHtml =  this.$utils.richText(this.contentHtml)
        // 插入图片 
        // quill.insertEmbed(length, 'image', url)
        // 调整光标到最后
        // quill.setSelection(length + 1)
      } else {
        this.$message.error('图片插入失败')
      }
    },
  },
}
</script>

注释：我这里使用其他方式插入图片失败了，所以直接采用了字符串拼接的方式，可以使用不同方法

 5.Quill工具栏

["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线
["blockquote", "code-block"],                    // 引用  代码块
[{ list: "ordered" }, { list: "bullet" }],       // 有序、无序列表
[{ indent: "-1" }, { indent: "+1" }],            // 缩进
[{ size: ["small", false, "large", "huge"] }],   // 字体大小
[{ header: [1, 2, 3, 4, 5, 6, false] }],         // 标题
[{ color: [] }, { background: [] }],             // 字体颜色、字体背景颜色
[{ align: [] }],                                 // 对齐方式
["clean"],                                       // 清除文本格式
["link", "image", "video"]                       // 链接、图片、视频