QuillEditor、vue 3、firebase：如何在编辑器外预览内容

Question

我环顾了整个包裹，并尝试在单击按钮时预览图像。由于使用 Vue 3，因此不支持 vue2editor 中的 @image-added 等事件。我想知道是否可以创建一个自定义事件来在将图像上传到编辑器时触发 imageHandler 方法，并将这些文件上传？

为了测试 firebase 存储，目前，我将 imageHandler 放在按钮中。实现使用 VueQuill，使用 Vue 3 和 Quill 构建。

这是codesandbox。我已经放置了与 firebase 相关的代码来初始化服务。如果您对 Firebase 配置感兴趣，请查看评论。

这是我的代码：

<template>
  <div>
    <QuillEditor theme="snow" toolbar="full" :modules="modules" />
    <br />
    <div class="btn btn-primary" @click="imageHandler">Post Preview</div>
    <!-- Want to preview the image put in the editor, when clicking the button -->
  </div>
</template>

<script>

    import { QuillEditor } from "@vueup/vue-quill";
    import "@vueup/vue-quill/dist/vue-quill.snow.css";
    import BlotFormatter from "quill-blot-formatter";
    
    // comment out the code below to configure firebase storage
    // import firebase from "firebase/app";
    // import "firebase/storage";
    
    export default {
      name: "App",
      data() {
        return {
          modules: {
            toolbar: {
              container: [["image"]],
              handlers: {
                image: this.imageHandler,
              },
            },
            name: "blotFormatter",
            module: BlotFormatter,
          },
        };
      },
      components: {
        QuillEditor,
      },
      methods: {
        /**
         * The method for dealing with the image put in the editor
         * to upload the file to firebase storage
         */
        imageHandler(file, QuillEditor) {
          console.log("[Trigger imageHandler]");
          const storageRef = firebase.storage().ref();
          // how to get the image from the QuillEditor?
          console.log("[Initialize the firebase stoarge successfully]");
          const docRef = storageRef.child(`documents/blogPostPhotos/${file.name}`);
          docRef.put(file).on("state_changed", (snapshot) => {
            console.log(snapshot);
            console.log("[Upload the file successfully]"); // get underfined in the firebase console, since file doesn't refer to anything
          }),
            (err) => {
              console.log(err);
            },
            async () => {
              console.log("[Waiting for downloading the image URL]");
              const downloadURL = await docRef.getDownloadURL();
              // TODO: to preview the image
              QuillEditor.insertEmbed(10, "image", downloadURL); // reference: https://quilljs.com/docs/api/#insertembed
            };
        },
      },
    };
    </script>