I am currently working with quill and vue 3, but I'm having trouble figuring out how to autofocus the editor input field in their documentation.
I have attempted targeting parent elements using:
document.getElementById(...).focus()but it didn't work. This is the implementation of quill in my text-editor.vue:
<template>
<div id="text-editor" class="text-editor">
<quill-editor :modules="modules" :toolbar="toolbar"/>
</div>
</template>
<script setup>
import BlotFormatter from 'quill-blot-formatter'
const modules = {
module: BlotFormatter,
}
const toolbar = [
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'size': ['small', false, 'large', 'huge'] }],
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ 'align': [] }],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': [] }],
['link', 'image', 'video'],
['clean']
];
</script>
and then imported it into component.vue:
<template>
<div id="component">
<text-editor/>
</div>
</template>
<script setup>
import textEditor from './text-editor'
</script>
Do you have any suggestions on how to set autofocus for quill?