解決 「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 傳入參數方式,因為這樣才可以使用上方程式碼解決,例如…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<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 的問題,但後來才發現不是,所以就來記錄一下哩。

Liker 讚賞

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

Buy Me A Coffee Buy Me A Coffee

Google AD

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