How i can in Vue 3 rewrite the toolbar's insert image button with image handler.?

[Grzyb9k]

https://codesandbox.io/s/grzyb9k-quill-problem-image-handler-3gqxuu

When i try do this i have errors: this.imageHandler is not a function When i change addEventListener to arrow function i got error: Uncaught TypeError: ImageData constructor: Argument 1 is not an object. And last when i try arrow function in addHandler i got error: Uncaught TypeError: _this.container is undefined

Please help me with this, what I need to do?

[chenjuneking]

hello, @Grzyb9k . If you are using vue3, you should make it as the vue3 way, try this:

<template>
  <div>
    <QuillEditor
      ref="editorRef"
      v-model="form.content"
      :options="editorOptions"
      :modules="modules"
      theme="snow"
      :toolbar="toolbar"
    />
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from "vue"
import { QuillEditor } from "@vueup/vue-quill"
import "@vueup/vue-quill/dist/vue-quill.snow.css"
import QuillImageDropAndPaste, { ImageData } from "quill-image-drop-and-paste"

export default defineComponent({
  name: "App",
  components: {
    QuillEditor,
  },
  setup: () => {
    const editorRef = ref(null)
    const imageHandler = (dataUrl, type, imageData) => {
      console.log(dataUrl, type, imageData)
      imageData
        .minify({
          maxWidth: 320,
          maxHeight: 320,
          quality: 0.7,
        })
        .then((miniImageData) => {
          const file = miniImageData.toFile("my_cool_image.png");
          console.log(file)
        });
    }
    const modules = {
      name: "imageDropAndPaste",
      module: QuillImageDropAndPaste,
      options: {
        handler: imageHandler,
      },
    }
    const editorOptions = {
      placeholder: "Copy & paste, or drag an image here...",
    }
    const form = {
      title: "",
      content: "",
      category: "",
    }
    const toolbar = ["bold", "italic", "link", "image"]

    onMounted(() => {
      editorRef.value
        .getQuill()
        .getModule("toolbar")
        .addHandler("image", function (clicked) {
          if (clicked) {
            let fileInput = this.container.querySelector(
              "input.ql-image[type=file]"
            );
            if (fileInput == null) {
              fileInput = document.createElement("input");
              fileInput.setAttribute("type", "file");
              fileInput.setAttribute(
                "accept",
                "image/png, image/gif, image/jpeg, image/bmp, image/x-icon"
              );
              fileInput.classList.add("ql-image");

              fileInput.addEventListener("change", function (e) {
                const files = e.target.files;
                let file;
                if (files.length > 0) {
                  file = files[0];
                  const type = file.type;
                  const reader = new FileReader();
                  reader.onload = (e) => {
                    // handle the inserted image
                    const dataUrl = e.target.result;
                    imageHandler(
                      dataUrl,
                      type,
                      new ImageData(dataUrl, type, file.name)
                    );
                    fileInput.value = "";
                  };
                  reader.readAsDataURL(file);
                }
              });
            }
            fileInput.click();
          }
        });
    })

    return {
      editorRef,
      modules,
      editorOptions,
      form,
      toolbar,
    }
  },
})
</script>