问题

nuxt在使用vue-quill-editor时官方提供的例子，关于图片处理，仅仅只是展示图片，上传的图片并不能进行任何操作，在实际操作中显然是不可行的，网上找资料，可以使用quill-image-resize-module来进行集成处理，按照网上例子引入时，会出现Cannot read property 'imports' of undefined问题。

解决

1、首先在目录plugins目录下创建nuxt-quill-plugin.js文件，并且在nuxt.config.js中plugins配置好：

2、在nuxt-quill-plugin.js文件中写入如下代码：

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor/dist/ssr'

Vue.use(VueQuillEditor)

3、配置插件，在nuxt.config.js增加webpack配置：

build: {
    plugins: [
      new webpack.ProvidePlugin({
        'window.Quill': 'quill/dist/quill.js',
        'Quill': 'quill/dist/quill.js'
      })
    ]
  },

注意:webpack需要引入const webpack = require("webpack")。

4、以上配置好了就可以在页面中使用了的。附上我的用法:

<template>
  <div>
    <Header/>
    <div class="content">
      <el-row :gutter="20">
        <el-col :span="24">
          <div
            class="quill-editor"
            :content="content"
            @change="onEditorChange($event)"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @ready="onEditorReady($event)"
            v-quill:myQuillEditor="editorOption"
          ></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import Header from "~/components/Header";
import Vue from "vue";

export default {
  beforeMount() {
    const VueQuillEditor = require("vue-quill-editor/dist/ssr");
    const Quill = require("quill");
    const {
      container,
      ImageExtend,
      QuillWatch
    } = require("quill-image-extend-module");

    const { ImageDrop } = require("quill-image-drop-module");

    const ImageResize = require("quill-image-resize-module");

    Quill.register("modules/ImageExtend", ImageExtend);
    Quill.register("modules/ImageResize", ImageResize);
    Quill.register("modules/imageDrop", ImageDrop);

    Vue.use(VueQuillEditor);
    this.editorOption = {
      // some quill options
      modules: {
        imageResize: {
          displayStyles: {
            backgroundColor: "black",
            border: "none",
            color: "white"
          },
          modules: ["Resize", "DisplaySize", "Toolbar"]
        },
        imageDrop: true,
        ImageExtend: {
          // 如果不作设置，即{}  则依然开启复制粘贴功能且以base64插入
          name: "img", // 图片参数名
          size: 3, // 可选参数 图片大小，单位为M，1M = 1024kb
          action: "", // 服务器地址, 如果action为空，则采用base64插入图片
          // response 为一个函数用来获取服务器返回的具体图片地址
          // 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}
          // 则 return res.data.url
          response: res => {
            return res.info;
          },
          headers: xhr => {
            // xhr.setRequestHeader('myHeader','myValue')
          }, // 可选参数 设置请求头部
          sizeError: () => {}, // 图片超过大小的回调
          start: () => {}, // 可选参数 自定义开始上传触发事件
          end: () => {}, // 可选参数 自定义上传结束触发的事件，无论成功或者失败
          error: () => {}, // 可选参数 上传失败触发的事件
          success: () => {}, // 可选参数  上传成功触发的事件
          change: (xhr, formData) => {
            // xhr.setRequestHeader('myHeader','myValue')
            // formData.append('token', 'myToken')
          } // 可选参数 每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
        },
        toolbar: {
          // 如果不上传图片到服务器，此处不必配置
          container: container, // container为工具栏，此次引入了全部工具栏，也可自行配置
          handlers: {
            image: function() {
              // 劫持原来的图片点击按钮事件
              QuillWatch.emit(this.quill.id);
            }
          }
        }
      }
    };
  },
  data() {
    return {
      content: "<p>I am Example</p>",
      editorOption: null
    };
  },
  components: { Header, Footer },
  mounted() {
    console.log("app init, my quill insrance object is:", this.myQuillEditor);
    setTimeout(() => {
      this.content = "i am changed";
    }, 3000);
  },
  methods: {
    onEditorBlur(editor) {
      console.log("editor blur!", editor);
    },
    onEditorFocus(editor) {
      console.log("editor focus!", editor);
    },
    onEditorReady(editor) {
      // editor.registerModule("modules/imageResize", ImageResize);
      // editor.registerModule("modules/imageDrop", ImageDrop);
      console.log("editor ready!", editor);
    },
    onEditorChange({ editor, html, text }) {
      console.log("editor change!", editor, html, text);
      this.content = html;
    }
  }
};
</script>

<style scoped lang="less">
.content {
  margin: 0 auto;
  width: 1120px;
  border-radius: 3px;
  transition: 0.2s;
  margin-top: 50px;
  overflow: hidden;
}
</style>

nuxt引入quill-image-resize-module报错解决

问题

解决