Episerver：如何通过富文本编辑器插入/编辑链接关联区块？

问题描述 #

我的页面包含两个核心区块：

• 富文本编辑器区块：里面有多个通过「插入/编辑链接」创建的页面内章节链接
• 手风琴区块：初始加载时处于折叠状态

需求是点击富文本里的链接时，页面跳转到手风琴区块位置的同时，自动展开对应的手风琴面板。折叠/展开的JS逻辑已经能实现，但不清楚怎么把链接和手风琴区块关联起来。

当前疑问：

1. 富文本编辑器的「插入/编辑链接」属于链接集合，用Page属性只能实现页面自链接，没法直接关联到手风琴区块，能不能通过这个功能直接关联区块？还是必须自定义实现？
2. 链接集合里的锚点属性（Anchor property）具体是怎么工作的？

解决方案与解释 #

关于链接关联手风琴区块的实现方式 #

直接通过富文本编辑器默认的「插入/编辑链接」功能，没法直接关联到手风琴区块——因为这个功能的Page属性只能指向整个页面，不能定位到页面内的具体区块组件。所以你需要自定义实现关联逻辑，核心思路是利用锚点（Anchor）来绑定手风琴面板。

锚点属性（Anchor property）的工作原理 #

链接集合里的锚点属性，本质是给链接添加#锚点值的后缀，点击链接时浏览器会自动跳转到页面内带有对应id="锚点值"的元素位置。比如你给链接设置锚点为section-1，生成的链接就是当前页面URL#section-1，浏览器会滚动到页面中id="section-1"的元素处。

具体实现步骤 #

1. 给手风琴面板设置唯一ID：给每个需要被链接触发展开的手风琴面板（或其容器）添加唯一的id属性，比如id="accordion-panel-1"。
2. 在富文本编辑器中设置锚点链接：使用「插入/编辑链接」功能，选择当前页面作为目标，然后在锚点属性（Anchor）中填写对应手风琴面板的id值（比如accordion-panel-1）。这样生成的链接会自动带上#accordion-panel-1的后缀。
3. 编写JS监听锚点跳转事件：监听页面的hashchange事件，或者直接监听链接的点击事件，当检测到URL中的锚点匹配某个手风琴面板的ID时，触发展开该面板的逻辑。

示例JS代码：

// 页面加载时检查是否有锚点，处理初始跳转展开
document.addEventListener('DOMContentLoaded', function() {
  handleAccordionAnchor();
});

// 监听锚点变化事件
window.addEventListener('hashchange', handleAccordionAnchor);

function handleAccordionAnchor() {
  const targetId = window.location.hash.slice(1); // 去掉#号
  if (!targetId) return;
  
  const targetPanel = document.getElementById(targetId);
  if (targetPanel && targetPanel.classList.contains('accordion-panel')) {
    // 执行展开面板的逻辑，比如移除折叠类、添加展开类
    targetPanel.classList.remove('collapsed');
    targetPanel.classList.add('expanded');
    // 如果手风琴有父容器的展开逻辑，也需要同步处理
    const accordionHeader = targetPanel.previousElementSibling;
    if (accordionHeader) {
      accordionHeader.setAttribute('aria-expanded', 'true');
    }
  }
}

补充说明 #

• 确保手风琴面板的id值唯一且不含特殊字符（比如空格、中文，建议用小写字母+连字符），避免锚点识别失败。
• 如果你的手风琴组件是框架（比如React、Vue）实现的，需要对应调整监听逻辑，比如在框架的生命周期钩子中处理锚点变化，或者使用框架提供的路由监听方法。

内容的提问来源于stack exchange，提问作者Farhin Shaikh