Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

223
Vistas
Quill Editor not processing images properly with @input event

I'm trying to make my quill editor component work with @input events from the parent. Everything works just fine except that when I load images into the editor input field, they are not present in the event.target.innerHTML, which represents the HTML text body of the 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>

Function processHTML logs the content of the editor field into the console. All html elements are properly logged into the console except images. The weird thing is that when after loading the image into the editor field, I type a character or space (not enter for whatever reason), the image gets suddenly logged into the console (base64).

I've been thinking that this could be an async issue, because event.target.innerHTML might be asynchronous but putting it into an async function does not solve the issue.

The <quill-editor> component is imported in app.js:

import {QuillEditor} from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

createApp(app)
    .component('QuillEditor', QuillEditor)
    .mount("#app");

What could be the issue?

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda