nuxt引入quill-image-resize-module報錯解決

問題

nuxt在使用vue-quill-editor時官方提供的例子，關於圖片處理，僅僅只是展現圖片，上傳的圖片並不能進行任何操做，在實際操做中顯然是不可行的，網上找資料，可使用quill-image-resize-module來進行集成處理，按照網上例子引入時，會出現Cannot read property 'imports' of undefined問題。

解決

一、首先在目錄plugins目錄下建立nuxt-quill-plugin.js文件，而且在nuxt.config.js中plugins配置好：

二、在nuxt-quill-plugin.js文件中寫入以下代碼：

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

Vue.use(VueQuillEditor)
複製代碼

三、配置插件，在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")。

四、以上配置好了就能夠在頁面中使用了的。 附上個人用法:

<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>

複製代碼