nuxt2專案使用vue quill editor，圖檔上傳至firebase storage

在nuxt2專案使用 vue-quill-editor的時候，如果上傳圖檔，會直接轉成base64格式，如果網頁有製作搜尋功能可能就會受到影響，所以我們可以上傳圖檔到firebase或是其他圖床，這邊以firebase為範例

套件版本

nuxt: 2.15.7

quill:1.3.7

vue-quill-editor:3.0.6

plugin folder

新增一個vue-quill-editor.js(可自訂)，並且註冊

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

Vue.use(VueQuillEditor)

nuxt.config.js

plugin加上路徑:

  plugins: [
    { src: "~plugins/vue-quill-editor.js, 
      ssr: false, //  不要在伺服器端渲染這個特定的插件，避免在伺服器端渲染時出現錯誤，同時也可以提高伺服器端的效能
    },
  ],

Component

可以加一個input在quill-editor下方，並且將之隱藏(CSS)

<div
    class="quill-editor mb-5 !h-[400px] !text-base"
    :content="editedPost.content"
    v-quill:myQuillEditor="editorOption"
    @change="onEditorChange($event)"
></div>

<input
    type="file"
    id="getFile"
    @change="uploadContentImage($event)"
    class="hidden"
/>

quill editor option

當上傳圖片的時候執行handler function

            editorOption: {
                modules: {
                    toolbar: {
                        container: [
                            [{ header: [1, 2, false] }],
                            ["bold", "italic", "underline"],
                            ["link", "image", "video", "code-block"],
                            [{ color: [] }, { background: [] }],
                        ],
                        handlers: {
                            image: function () {
                                // 取得上傳的圖檔
                                const input =
                                    document.getElementById("getFile");
                                input.click();
                            },
                        },
                    },
                },
            },

上傳檔案至firebase storage

再來就是處理上傳的function，我們要監聽input傳入的檔案，並上傳到firebase storage

        uploadContentImage(e) {
            var form = new FormData();
            form.append("file[]", e.target.files[0]);
            // 上傳圖片到firebase storage 路徑: images/posts/:postId/:fileName
            const postId = this.$route.params.postId;
            const fileName = e.target.files[0].name;
            const storageRef = this.$storage.ref(
                `images/posts/${postId}/${fileName}`
            );
            const uploadTask = storageRef.put(e.target.files[0]);


            uploadTask.on(
                "state_changed",
                (snapshot) => {
                    // progress
                    const progress =
                        (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                },
                (error) => {
                    // error
                    console.log(error);
                },
                () => {
                    // complete
                    uploadTask.snapshot.ref
                        .getDownloadURL()
                        .then((downloadURL) => {
                            this.myQuillEditor.insertEmbed(
                                this.myQuillEditor.getSelection().index,
                                "image",
                                downloadURL
                            );
                        });
                }
            );
        },

Side Note

此範例使用

v-quill:myQuillEditor="editorOption"

來註冊 quill editor，如果要在script中access myQuillEditor可以透過

this.myQuillEditor

來取得quill editor實體以及使用methods，例如:

this.myQuillEditor.insertEmbed(
    this.myQuillEditor.getSelection().index,
    "image",
    downloadURL
);