在渲染时，大纲不能显示

[dlpuzcl]

编辑模式

• wysiwyg 所见即所得模式

描述问题

在使用Vditor.preview 和 Vditor.outlineRender(previewElement, outlineElement)时内渲染成但是大纲不显示

使用官方的demo跑了一下，大纲依然不显示

官方demo截图

自己的代码

<template>
  <div ref="viewerRef" id="markdownViewer" :class="$props.class"></div>
  <div ref="outlineRef" id="markdownOutline" ></div>
</template>

<script lang="js" setup>
  import { onBeforeUnmount, onDeactivated, ref, unref, watch } from 'vue';
  import Vditor from 'vditor';
  import { onMountedOrActivated } from '@vben/hooks';
  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
  import { getTheme } from './getTheme';

  const props = defineProps({
    value: { type: String },
    class: { type: String },
  });
  const viewerRef = ref(null);
  const outlineRef = ref(null);

  const vditorPreviewRef = ref(null);
  const { getDarkMode } = useRootSetting();

  // eslint-disable-next-line no-unused-vars
  const initOutline = () => {
    const headingElements = []
    Array.from(document.getElementById('markdownViewer').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
      console.log(scrollTop);
      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
        }
      }
    })
  }

  function init() {
    const viewerEl = unref(viewerRef);
    const viewerElement = document.getElementById('markdownViewer');
    vditorPreviewRef.value = Vditor.preview(viewerElement, props.value, {
      mode: getTheme(getDarkMode.value, 'content'),
      theme: {
        // 设置内容主题
        current: getTheme(getDarkMode.value, 'content'),
      },
      hljs: {
        // 设置代码块主题
        style: getTheme(getDarkMode.value, 'code'),
      },
      speech: {
        enable: true,
      },
      anchor: 1,
      after: () => {
        // if (window.innerWidth <= 768) {
        //   return
        // }

        const outlineElement = document.getElementById('markdownOutline');
        Vditor.outlineRender(viewerElement, outlineElement)
        if (outlineElement.innerText.trim() !== '') {
          outlineElement.style.display = 'block'
          initOutline()
        }
      },

    });
  }
  watch(
    () => getDarkMode.value,
    (val) => {
      VditorPreview.setContentTheme(getTheme(val, 'content'));
      VditorPreview.setCodeTheme(getTheme(val, 'code'));
      init();
    },
  );

  watch(
    () => props.value,
    (v, oldValue) => {
      v !== oldValue && init();
    },
  );

  function destroy() {
    const vditorInstance = unref(vditorPreviewRef);
    if (!vditorInstance) return;
    try {
      vditorInstance?.destroy?.();
    } catch (error) {
      //
    }
    vditorPreviewRef.value = null;
  }

  onMountedOrActivated(init);

  onBeforeUnmount(destroy);
  onDeactivated(destroy);
</script>

Markdown

## 教程

这是一篇讲解如何正确使用 **Markdown** 的排版示例，学会这个很有必要，能让你的文章有更佳清晰的排版。

> 引用文本：Markdown is a text formatting syntax inspired

## 语法指导

### 普通内容

这段内容展示了在内容里面一些排版格式，比如：

- **加粗** - `**加粗**`
- *倾斜* - `*倾斜*`
- ~~删除线~~ - `~~删除线~~`
- `Code 标记` - `` `Code 标记` ``
- [超级链接](https://ld246.com) - `[超级链接](https://ld246.com)`
- [username@gmail.com](mailto:username@gmail.com) - `[username@gmail.com](mailto:username@gmail.com)`

期待的结果

大纲能正确显示

截屏或录像

版本信息

• 版本：3.9.6
• 操作系统：win10
• 浏览器：Chrome

其他信息

[Vanessa219]

本地最新代码是 OK 的，是不是浏览器版本或其他问题？

[dlpuzcl]

@Vanessa219 有没有可能是cdn的问题呢？https://unpkg.com/vditor@3.9.6/dist/index.min.js 这个网址我电脑上打不开呢

[dlpuzcl]

这个问题是由于cdn问题引起的，换了本地cdn后修复了，大纲正常渲染成功了，但是点击没反应，重提了个issue，麻烦大佬帮忙看看，谢谢啦