背景

业务背景

前几个月做了一个业务文档风险分析的 AI 助理——将使用者上传的业务文件用 AI 协助分析并展示这份文档存在的所有风险点。里面有一个类似这样的需求：

• 左侧展示业务文档原文，右侧展示 Agent 后的风险点列表；
• 点击右侧某个风险点时根据风险点的原文段落。左侧自动滚动到对应位置，类似锚点功能。

前端实现锚点有很多种方案。但这里场景有所不同：我们会将使用者上传的 pdf、word 文件解析成 html 字符串并由服务端返回，前端根据这份 html 字符串渲染文档原文，在渲染后的内容中实现类似锚点交互。

项目中已经有使用 WangEditor 的富文本编辑器来渲染文档原文。为了保持统一、减少维护成本，也一样选择使用 WangEditor 实现此功能，所以问题归结为：如何在 WangEditor 渲染中实现锚点交互，并保留自定义标签与属性。

痛点概述

• 富文本渲染丢失自定义属性：WangEditor 默认会过滤未知标签和属性，导致我们想要插入的自定义 “risk” 标签与其数据属性被剔除。
• 锚点定位不精准：常规 HTML 锚点只能定位到元素顶部，而需要精准定位到文本段落内部的位置。
• 跨版本兼容性：当文档内容或结构发生变化时旧的 anchor 链接可能失效，需要有机制检测并提示使用者。
• 前后端协作成本高：传统方案需要后端提供 anchor ID 并维护版本信息，容易出现同步延迟或接口错误。怎么说呢，

方案调研

飞书 - 复制选区链接

交互流程

飞书里有一个复制选区链接功能：点击后会复制一个包含页面 ID、块 ID、选区索引等信息的链接。打开该链接时飞书会自动滚动到对应位置，并根据版本控制判断是否有效。

实现方案

/* 前端请求 /create 接口 */
{
page_id,block_id,src_start_idx,src_end_idx。src_version,structure_version
}
/* 后端返回 anchor_id */
const link = `https://xxxx.feishu.cn/...#share-${anchorId}`;/* 前端解析 link 并请求 /anchor_info */
{
block_id,src_start_idx。src_end_idx
}
/* 前端计算偏移量并滚动 */
window.scrollTo;

痛点：

• - 前后端配合复杂；- 页面加载时需等待接口响应导致滚动延迟；- 如果版本变更导致 block_id 不存在需要额外提示。话说回来，

语雀 - 原生锚点方案

交互流程

语雀采用传统 HTML 锚点：目录中的 `

实现方案

• - 必须给每个目标元素手动添加 `id`；- 对大量动态生成内容逐一添加 `id` 不现实；- 无法在同一段落内嵌入多个可点击风险标记而不破坏排版。

最终方案 - 使用 WangEditor 自定义标签与属性实现锚点交互

The idea is to render risk points as a custom inline‑void element `` that keeps its own `data-anchor-id`. When a risk point is clicked on right panel。we look up its anchor ID and scroll editor view to that element.

1️⃣ 明确自定义标签的数据结构

const myRisk = {
从type来看，"risk",attrs: { "data-anchor-id": anchorId },riskText: domElem.innerText || "",children: // void node 必须有 children
};

• `type` 用于告诉编辑器这是一个特殊节点；- `attrs` 保存自定义属性，以便渲染时写回 DOM；- `children` 必须包含空字符串，否则 Slate会报错。

2️⃣ 根据场景重写 isInline 与 isVoid 方法

import { DomEditor } from "@wangeditor/editor";export function withRisk {
const { isInline,isVoid } = editor;editor.isInline = elem => {
return DomEditor.getNodeType === "risk"?true : isInline;}，editor.isVoid = elem => {
return DomEditor.getNodeType === "risk"?true : isVoid;}，说起来，return editor;}

• `isInline:true` → risk 节点可以与文字混排；- `isVoid:true` → risk 节点没有子内容，仅是整体占位符。这样 Slate 能正确处理它们。

3️⃣ 渲染自定义元素

javascript import { h } from 'snabbdom';

function renderRisk { const iconVnode = h('img',{ props的观点是。 {src:'https://example.com/icon.png'},style:{width:'1em',margin:'0 .1em'} });

return h('span',{
props的观点是，{contentEditable:false}。style:{marginLeft:'5px',color:'orange'},on:{click{ console.log }},attrs:{'data-anchor-id':elem.attrs}
},);

}

• 说到`attrs。` 把自定义属性写回真实 DOM，从而在页面上可见。

javascript const renderElemConf = { 说到type。"risk",renderElem: renderRisk };

4️⃣ 自定义 HTML 解析规则

javascript const parseTemplateConf = { selector:"doc-risk",parseElemHtml{ const anchorId=domElem.getAttribute||"";return { type的观点是，"risk",attrs:{'data-anchor-id':anchorId}。riskText:domElem.innerText||"",children: };} }，

*坑说明*

• A 当 selector 写成 `

  ` 或 `` 时 parseElemHtml 不会触发，因为这些标签已被 Wangeditor 内置过滤；必须使用全新的自定义标签 `` 并保证不被其它元素包裹。

javascript import { Boot } from "@wangeditor/editor";import { withRisk } from "./withRisk";import { renderElemConf } from "./renderConfig";import { parseTemplateConf } from "./parseConfig";其实，

Boot.registerPlugin;Boot.registerRenderElem;Boot.registerParseElemHtml;

完整 React 示例

javascript import React。{useEffect,useRef,useState} from 'react';import { Editor } from '@wangeditor/editor-for-react';import '@wangeditor/editor/dist/css/style.css';import './App.css';

function App{ const =useState;const wrapperRef=useRef;

const html=

;按理说，

useEffect=>{ ifreturn;editor.clear;话说回来，editor.dangerouslyInsertHtml;话说回来，editor.disable;return =>editor.destroy;},)，

return (

);} export default App;话说回来，

---

使用者痛点评价

痛点	本方案解决方式	成本
富文本默认过滤未知标签/属性	注册 registerParseElemHtml + 自定义 tag	少量代码改动
锚点定位不到具体段落	用 data-anchor-id 在节点内部精确定位	简单
多版本/变更导致旧链接失效	可通过前后端接口返回最新 block_id 检查	与后台保持同步即可

---

小结

WangEditor 可以通过 registerParseElemHtml 配合 inline/void 插件 和 Snabbdom 渲染 来保留自定义标签及其属性。从而在富文本渲染中实现精确的锚点交互。主要是的观点是，

1. 选择独立且未被过滤的自定义标签。
2. 保证插件正确声明 inline/void否则 Slate 无法识别。
3. 利用 Snabbdom 的 attrs 写回 把数据属性持久化到 DOM。说起来，

这样既保持了 UI 一致性。又能满足业务对锚定与安全性的双关键求。

---