Estoy tratando de hacer que mi componente de quill editor funcione con eventos @input del padre. Todo funciona bien excepto que cuando cargo imágenes en el campo de entrada del editor, no están presentes en event.target.innerHTML , que representa el HTML text body del editor.

parent :

 <template> <form @submit.prevent="...submit" method="post" enctype="multipart/form-data"> <editor-component v-model="form.body" @emitBody="form.body=$event"/> </form> </template> <script setup> import EditorComponent from './editor-component.vue' import {reactive} from "vue"; const form = reactive({ body: '' }) </script>

editor-component.vue :

 <template> <div id="cms-editor" class="cms-editor"> <quill-editor :toolbar="toolbar" v-model:content="content" contentType="html" @input="processHTML"/> </div> </template> <script setup> import {ref} from 'vue' const content = ref('') const processHTML = (event) => { console.log(event.target.innerHTML) } const toolbar = [ [{header: [1, 2, 3, false]}], [{size: ['small', false, 'large', 'huge']}], ['bold', 'italic', 'underline', 'strike'], ['blockquote', 'code-block'], [{align: []}], [{list: 'ordered'}, {list: 'bullet'}], [{color: []}, {background: []}], ['link', 'image'], ['clean'], ] </script>

La función processHTML registra el contenido del campo del editor en la consola. Todos los elementos html se registran correctamente en la consola, excepto las imágenes. Lo extraño es que cuando después de cargar la imagen en el campo del editor, escribo un character o space (no enter por el motivo que sea), la imagen se registra repentinamente en la consola (base64).

Estuve pensando que esto podría ser un problema async , porque event.target.innerHTML podría ser asynchronous , pero ponerlo en una función async no resuelve el problema.

El componente <quill-editor> se importa en app.js :

 import {QuillEditor} from '@vueup/vue-quill' import '@vueup/vue-quill/dist/vue-quill.snow.css'; createApp(app) .component('QuillEditor', QuillEditor) .mount("#app");

¿Cual podría ser el problema?