Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

220
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!