'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?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
