vue-quil-editor点击输入框任意都能聚焦到输入内容的那一行

Vue-quill-editor是一个富文本编辑器组件，它允许你在Vue应用中方便地添加文本编辑功能。如果你想要实现点击输入框时自动聚焦到用户输入的内容所在行，通常需要监听`input`事件或者使用Quill Editor提供的API。

首先，你需要获取当前编辑器实例，然后找到活跃的光标位置（cursor position）。可以使用`quill.getCursorPosition()`方法获取光标信息。接着，你可以遍历文档的节点，查找包含光标位置的那个段落，并设置其聚焦状态。

示例代码片段：

import Quill from 'vue-quill-editor'

export default {
  methods: {
    focusToInputLine() {
      const quill = this.$refs.editor.quill; // 获取Quill编辑器实例
      const cursorPosition = quill.getCursorPos(); // 获取光标位置

      if (cursorPosition) {
        // 遍历文档找到光标所在的段落
        quill.getText().then(text => {
          const paragraphs = text.split('\n');
          let targetIndex = paragraphs.findIndex(line => line.includes(cursorPosition.text));
          if (targetIndex !== -1) {
            // 设置目标段落聚焦
            const range = new Range();
            range.selectNodeContents(paragraphs[targetIndex]);
            quill.setSelection(range.index, range.length);
          }
        });
      }
    },
  },
}

当你需要聚焦时，可以在触发这个函数的地方绑定一个事件，比如`click`：

<template>
  <div @click="focusToInputLine">
    <!-- ... 输入框元素 -->
    <quill-editor ref="editor"></quill-editor>
  </div>
</template>