vue3 quill富文本中 如何通过一个标签的id判断这个标签富文本quill的视野中

你可以使用 `quill.getBounds(id)` 方法来获取指定标签的位置信息，然后判断这个位置信息是否在视野范围内。

具体实现步骤如下：

1. 在组件中引入 `quill` 和 `lodash`（需要用到 `debounce` 方法）：

import Quill from 'quill'
import debounce from 'lodash/debounce'

2. 在 `mounted()` 钩子函数中初始化 `quill` 实例：

mounted() {
  this.quill = new Quill(this.$refs.quillEditor, {
    // 这里可以配置 quill 的选项
  })
}

3. 在模板中为要判断的标签添加一个唯一的 `id`，例如：

<quill-editor ref="quillEditor">
  <div id="my-tag">这是一个带有 id 的标签</div>
</quill-editor>

4. 在组件中定义一个方法来判断指定标签是否在视野范围内：

methods: {
  checkTagInView() {
    const tag = document.getElementById('my-tag')
    if (tag) {
      const bounds = this.quill.getBounds(tag.id)
      const top = bounds.top + this.quill.container.scrollTop
      const bottom = top + bounds.height
      const containerHeight = this.quill.container.clientHeight
      if (top < containerHeight && bottom > 0) {
        console.log('标签在视野范围内')
      } else {
        console.log('标签不在视野范围内')
      }
    }
  }
}

5. 在 `mounted()` 钩子函数中使用 `debounce` 方法来绑定 `scroll` 事件监听器，并在事件处理函数中调用 `checkTagInView` 方法：

mounted() {
  this.quill = new Quill(this.$refs.quillEditor, {
    // 这里可以配置 quill 的选项
  })
  this.onScroll = debounce(() => {
    this.checkTagInView()
  }, 100)
  this.quill.container.addEventListener('scroll', this.onScroll)
}

这样，当用户滚动富文本编辑器时，就会判断指定标签是否在视野范围内，并打印相应的信息。