Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

219
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda