在AiEditor的React-TS项目中实现章节目录功能

在AiEditor的React-TS项目中实现章节目录功能

章节目录功能是文档编辑器中非常重要的一个特性，它能够帮助用户快速导航和定位文档内容。本文将详细介绍如何在基于React和TypeScript的AiEditor项目中实现这一功能。

核心实现原理

章节目录功能的实现主要依赖于以下几个关键技术点：

1. DOM结构分析：通过解析编辑器内容中的标题标签（h1-h6）来构建目录结构
2. 实时更新机制：当文档内容发生变化时，需要动态更新目录
3. 交互功能：点击目录项能够跳转到文档对应位置

具体实现步骤

1. 布局结构调整

首先需要在编辑器布局中添加目录容器。通常采用左右分栏布局，左侧为目录区域，右侧为编辑区域。

<div className="editor-container">
  <div className="outline-container" id="outline"></div>
  <div className="editor-content" id="editor"></div>
</div>

2. 目录生成函数

实现一个核心的updateOutLine函数，用于分析文档内容并生成目录结构：

function updateOutLine() {
  const outlineElement = document.getElementById('outline');
  if (!outlineElement) return;

  const editorContent = document.querySelector('.aie-content');
  if (!editorContent) return;

  const headings = editorContent.querySelectorAll('h1, h2, h3, h4, h5, h6');
  let html = '<ul>';

  headings.forEach((heading) => {
    const level = parseInt(heading.tagName.substring(1));
    const text = heading.textContent || '';
    const id = heading.id || `heading-${Math.random().toString(36).substring(2, 9)}`;
    
    heading.id = id;
    
    html += `<li class="level-${level}">
      <a href="#${id}">${text}</a>
    </li>`;
  });

  html += '</ul>';
  outlineElement.innerHTML = html;
}

3. 事件监听与更新

为了确保目录能够实时反映文档变化，需要设置内容变化监听：

// 初始化编辑器后设置监听
const editor = new AiEditor({
  // 配置项...
});

editor.on('contentUpdate', () => {
  updateOutLine();
});

// 初始更新
updateOutLine();

4. 样式优化

为目录添加适当的CSS样式，使其层次分明且美观：

.outline-container {
  width: 250px;
  padding: 10px;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: #f5f5f5;
}

.outline-container ul {
  list-style: none;
  padding-left: 10px;
}

.outline-container li {
  margin: 5px 0;
  padding: 3px 0;
}

.outline-container li.level-1 {
  font-weight: bold;
  font-size: 1.1em;
}

.outline-container li.level-2 {
  padding-left: 15px;
  font-size: 1em;
}

.outline-container li.level-3 {
  padding-left: 30px;
  font-size: 0.9em;
}

/* 其他级别样式... */

高级优化建议

1. 性能优化：对于大型文档，可以使用防抖(debounce)技术减少频繁更新
2. 滚动同步：实现目录项高亮，反映当前浏览位置
3. 折叠功能：为目录添加折叠/展开功能，提升用户体验
4. 锚点平滑滚动：为目录跳转添加平滑滚动效果

总结

通过上述方法，我们可以在AiEditor的React-TS项目中实现一个功能完善、用户体验良好的章节目录功能。这种实现方式不仅适用于AiEditor，其核心思路也可以应用于其他基于React的富文本编辑器项目中。