如何让Tiptap加载初始内容时自动生成目录？

核心原因是Tiptap的目录扩展默认依赖内容变更事件生成目录，而初始内容加载时不会触发该事件，因此需要手动触发更新。以下是具体解决方向：

• 初始化后手动触发目录更新
  在编辑器的onCreate钩子中，主动调用目录扩展的update方法。比如在React场景下：

  const editor = useEditor({
    extensions: [
      Document,
      Heading.configure({ levels: [1, 2, 3] }),
      TableOfContents.configure({
        // 你的目录配置，如includeLevels等
      }),
      // 其他所需扩展
    ],
    content: '<h1>初始一级标题</h1><h2>初始二级标题</h2><p>正文内容</p>',
    onCreate: ({ editor }) => {
      // 定位目录扩展实例
      const tocExt = editor.extensions.find(ext => ext.name === 'tableOfContents');
      tocExt?.update(); // 手动触发目录生成
    },
  });
  

• 用ready事件兜底触发
  若onCreate时机过早（内容未完全解析），可改用编辑器的ready事件监听：

  useEffect(() => {
    if (!editor) return;
  
    const updateToc = () => {
      const tocExt = editor.extensions.find(ext => ext.name === 'tableOfContents');
      tocExt?.update();
    };
  
    editor.on('ready', updateToc);
    // 组件卸载时移除监听
    return () => editor.off('ready', updateToc);
  }, [editor]);
  

• 检查内容与配置的匹配性
  确保初始内容的标题能被目录扩展识别：

  1. 确认Heading扩展已启用，且配置的levels包含初始标题的层级
  2. 检查目录扩展的includeLevels配置，确保初始标题的层级在设定范围内（比如配置includeLevels: [1,2]时，h3标题不会出现在目录中）

• 验证扩展实例的获取逻辑
  若使用自定义扩展，可能存在扩展名称不是tableOfContents的情况，可通过console.log(editor.extensions)打印所有扩展，确认目标扩展的正确名称。

内容的提问来源于stack exchange，提问作者Moritz Pfl