如何在Vue.js中自动对焦Quill Editor

Question

我将quill与vue 3结合使用，无法找到自动聚焦文档中编辑器输入字段的方法。

我尝试过用瞄准父元素

document.getElementById(...).focus()

它什么也没做。这就是我实现quill的方式，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>

并将其导入component.vue:

<template>
<div id="component">
<text-editor/>
</div>
</template>

<script setup>
import textEditor from './text-editor'
</script>

知道如何使用autofocus套筒吗？

Answer 1

我找到了解决方案。只需使用@onReady事件。就这么简单：

<QuillEditor
theme="snow"
@ready="onReady"
/>

然后添加方法：

methods: {
onReady(editor) {
editor.focus();
},
},

Answer 2

您可以使用getQuill()API访问quill实例，然后使用quill.focus()来聚焦quill编辑器，下面是一个示例：

<template>
<QuillEditor 
ref="quillEditor"
theme="snow"
:options="options"
@ready="onQuillReady"
/>
</template>
<script setup>
import { ref } from "vue";
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
const quillEditor = ref(); // editor ref
const options = {
// ... options for quill editor ...
}
function onQuillReady() {
// focus editor when it is ready
quillEditor.value.getQuill().focus();
}
</script>

参考编号：https://vueup.github.io/vue-quill/api/methods.html#getquill