不是有自带的目录吗

获取到数据之后再进行初始化操作。

const CDN = '/third_party/vditor'

// 编辑器选项
new Vditor('vditor', {
  cdn: CDN,
  preview: {
    theme: {
      current: 'light',
      path: `${CDN}/dist/css/content-theme`,
    },
  },
  hint: {
    emojiPath: `${CDN}/dist/images/emoji`,
  },
})

// 预览选项
Vditor.preview(el, content, {
    cdn: CDN,
    mode: 'light',
    theme: {
      current: 'light',
      path: `${CDN}/dist/css/content-theme`,
    },
    emojiPath: `${CDN}/dist/images/emoji`,
})

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

1

找到这一行添加 // @ts-ignore

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

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

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

@Vanessa V 姐麻烦帮忙看一下

不写这个会报错。

调用时，<div id="outline"></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>

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

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

我也是当前选中或滚动的时候没有样式

有好的方法吗

有解决办法吗