如何在 Vue.js 中自动对焦 Quill 编辑器？答案

【问题标题】：How to autofocus Quill Editor in Vue.js?如何在 Vue.js 中自动对焦 Quill 编辑器？
【发布时间】：2022-11-10 02:42:13
【问题描述】：

我将quill 与vue 3 一起使用，但找不到在docs 中自动聚焦编辑器输入字段的方法。

我尝试使用以下方法定位父元素：

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

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

【问题讨论】：

标签： javascript vue.js vuejs3 text-editor quill

【解决方案1】：

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

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

然后在添加方法：

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

【讨论】：