解決「quill Overwriting modules/xxx with class...」問題

發表於 2023-06-29 分類於 JavaScript

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

這一篇記錄一下我在使用 Quill 的時候遇到的「quill Overwriting modules/xxx with class...」問題，以及解決的方法。

前言

這一篇記錄一下我在使用 Quill 的時候遇到的「quill Overwriting modules/xxx with class…」問題，以及解決的方法。

問題

首先我是使用 VueQuill 這個套件來使用 Quill，但是在使用的時候會出現以下的錯誤訊息：

1	quill Overwriting modules/ImageUploader with class...

quill Overwriting modules/ImageUploader with class...

其實用法也很簡單，就只是使用 v-if 開啟關閉元件而已就噴了這個錯誤，可以詳見範例：

範例程式碼

而這個問題不只局限於 v-if，在 SPA 模式下切換也會發生這個問題，雖然在系統運作及操作上是沒有任何問題，可是 Console 會一直噴這個錯就覺得很不爽，所以就來記錄一下解決的方法。

解決方法

解決方式其實很簡單，如果你有使用 Quill.register('modules/ImageUploader', ImageUploader); 來註冊的話，只需要改成以下這樣就可以了

1
2
3

if (!Quill.imports['modules/ImageUploader']) {
  Quill.register('modules/ImageUploader', ImageUploader);
}

如果是 VueQuill 的開發者，可能會使用別種方式，那麼這邊我會建議使用 options 傳入參數方式，因為這樣才可以使用上方程式碼解決，例如…

<script setup>
import { ref } from 'vue';

import { QuillEditor, Quill } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';

import ImageUploader from 'quill-image-uploader';

if (!Quill.imports['modules/ImageUploader']) {
  Quill.register('modules/ImageUploader', ImageUploader);
}

/**
 * Quill options
 */
const options = {
  modules: {
    ImageUploader: {
      upload(file) {
        return new Promise((resolve, reject) => {
          // ... example
        });
      },
    },
    toolbar: [
      [{ header: [1, 2, 3, 4, 5, 6, false] }],
      ['bold', 'italic', 'underline', 'strike'],
      ['code', 'code-block'],
      [{ list: 'ordered' }, { list: 'bullet' }],
      ['image', 'link'],
      ['clean'],
    ],
  },
  placeholder: '請輸入內容...',
  theme: 'snow',
};

<template>
  <div class="globalEditor">
    <QuillEditor
      ref="editorRef"
      :options="options"
      content-type="html"
    />
  </div>
</template>

那麼為什麼會建議使用 options 呢？其實我嘗試過官方封裝的方式，但是我發現如果要擴充的話相對難度較高（例如引入：highlight 等），因此我才改用 options 方式。

接下來回頭說明一下為什麼會一直噴「quill Overwriting modules/xxx with class...」這個錯誤，我們都知道使用 v-if 及路由切換時，元件本身是會被銷毀的，但是 Quill 的模組註冊在整個 Quill 中，它並不會因為元件的銷毀而自動清除，所以當你再次建立元件時，它就會再次嘗試註冊相同的模組，這就導致了你看到的那個錯誤訊息。

因此只需要在註冊前判斷是否已經註冊過，如果有註冊過就不再註冊，這樣就可以解決這個問題哩~

結尾

其實我一度有懷疑是 VueQuill 的問題，但後來才發現不是，所以就來記錄一下哩。