vditor 在预览模式下 vditor-outline__item--current 这个类名是 怎么在滚动和 hover、click 的时候添加进去的

@Vanessa @88250 @participants 麻烦大佬们有空解答一下。

@Vanessa @88250 页面上找不到 id 为 outline 的元素，是需要自己创建一个 id 为 outline 的元素吗

大纲 dom 是这样的，你具体指的是哪一部分的？

<div class="vditor-outline__content"><ul><li><span data-target-id="wysiwyg-e_1"><svg></svg><span>e</span></span></li></ul></div>

<template>
  <div class="hl-editor">
    <div id="preview"></div>
    <div id="outline"></div>
  </div>
</template>
<script  setup>
// 1.1 引入Vditor 构造函数
import Vditor from 'vditor'
// 1.2 引入样式
import 'vditor/dist/index.css';
import { ref, onMounted } from 'vue';

// 2. 获取DOM引用
const vditor = ref()

// 3. 在组件初始化时，就创建Vditor对象，并引用
onMounted(() => {
  Vditor.preview(document.getElementById('preview'), '### 初始化编辑器',{
    after() {
      if(window.innerWidth <= 768) {
        return
      }
      const outlineElement= document.getElementById('outline')
      Vditor.outlineRender(document.getElementById('preview'), outlineElement)
      if(outlineElement.innerText.trim() !== '') {
        outlineElement.style.display = 'block'
        initOutline()
      }
    }
  })
})

const initOutline = () => {
    const headingElements = []
    Array.from(document.getElementById('preview').children).forEach((item) => {
      if (item.tagName.length === 2 && item.tagName !== 'HR' && item.tagName.indexOf('H') === 0) {
        headingElements.push(item)
      }
    })

    let toc = []
    window.addEventListener('scroll', () => {
      const scrollTop = window.scrollY
      toc = []
      headingElements.forEach((item) => {
        toc.push({
          id: item.id,
          offsetTop: item.offsetTop,
        })
      })

      const currentElement = document.querySelector('.vditor-outline__item--current')
      for (let i = 0, iMax = toc.length; i < iMax; i++) {
        if (scrollTop < toc[i].offsetTop - 30) {
          if (currentElement) {
            currentElement.classList.remove('vditor-outline__item--current')
          }
          let index = i > 0 ? i - 1 : 0
          document.querySelector('span[data-target-id="' + toc[index].id + '"]').classList.add('vditor-outline__item--current')
          break
        }
      }
    })
  }
</script>
<style scoped lang="scss">
.hl-editor {
  width: 100vw;
  height: 100vh;
}
</style>

调用时，<div id="outline"></div> 需要自己手动创建吗？

不写这个会报错。

@Vanessa V 姐麻烦帮忙看一下

@Vanessa 我现在是点击和滚动的时候没有 vditor-outline__item--current 这个样式。

@Vanessa 是哪个 demo 呢， render.html 这个吗

@Vanessa 我看的是这里官方 demo，render.html 我本地跑起来也是没有滚动点击选择样式。

@Vanessa v 姐，有方法支持文字的缩进吗？