如何在PDFTron ReactJS中自定义选中文本右键的链接工具栏

核心思路 #

拦截默认的文本选中链接弹窗，替换为自定义UI，同时实现添加链接的功能。

步骤1：禁用默认链接元素（可选） #

如果不需要默认的链接工具按钮或弹窗，先禁用：

// 初始化WebViewer后获取instance
const instance = await WebViewer(/* 配置参数 */, document.getElementById('viewer'));

// 禁用默认的链接工具按钮（如需保留可跳过）
instance.UI.disableElements(['linkToolButton']);

步骤2：创建自定义弹窗UI #

在页面中添加自定义弹窗的HTML结构：

<div id="custom-link-popup" style="display:none; position:absolute; z-index:10000; background:#fff; padding:12px; border:1px solid #e0e0e0; border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,0.15);">
  <input type="text" id="link-input" placeholder="输入目标链接" style="width:200px; padding:6px; margin-right:8px; border:1px solid #ddd; border-radius:4px;">
  <button id="confirm-link" style="padding:6px 12px; background:#0078d4; color:#fff; border:none; border-radius:4px; cursor:pointer;">添加链接</button>
  <button id="cancel-link" style="padding:6px 12px; margin-left:6px; background:#f5f5f5; color:#333; border:1px solid #ddd; border-radius:4px; cursor:pointer;">取消</button>
</div>

步骤3：监听文本选中事件，控制弹窗显示/隐藏 #

通过textSelected事件拦截默认行为，触发自定义弹窗：

const docViewer = instance.Core.documentViewer;
const popup = document.getElementById('custom-link-popup');

docViewer.addEventListener('textSelected', async (e) => {
  const selectedText = e.selectedText.trim();
  if (selectedText) {
    // 阻止默认链接弹窗弹出
    e.preventDefault();
    // 获取选中区域的坐标，定位弹窗
    const selectionCoords = e.selectionCoordinates;
    popup.style.left = `${selectionCoords.x}px`;
    popup.style.top = `${selectionCoords.y + 20}px`; // 偏移20px避免遮挡选中文本
    popup.style.display = 'block';
  } else {
    // 无选中文本时隐藏弹窗
    popup.style.display = 'none';
  }
});

// 点击文档空白区域隐藏弹窗
docViewer.addEventListener('click', () => {
  popup.style.display = 'none';
  document.getElementById('link-input').value = '';
});

步骤4：实现添加链接的逻辑 #

给确认按钮绑定事件，创建并添加链接注释：

const annotManager = instance.Core.annotationManager;

document.getElementById('confirm-link').addEventListener('click', async () => {
  const linkUrl = document.getElementById('link-input').value.trim();
  if (!linkUrl) return;

  // 获取选中文本的四边形区域
  const selectedQuads = await docViewer.getSelectedTextQuads();
  if (!selectedQuads.length) return;

  // 创建链接注释
  const linkAnnot = new instance.Core.Annotations.LinkAnnotation();
  linkAnnot.setContents(linkUrl);
  // 从选中区域生成注释的矩形范围
  linkAnnot.setRect(instance.Core.Annotations.Rect.fromQuads(selectedQuads));
  // 设置URL跳转动作
  linkAnnot.setAction(new instance.Core.Annotations.ActionURLLink({ url: linkUrl }));

  // 添加注释到文档并绘制
  annotManager.addAnnotation(linkAnnot);
  annotManager.drawAnnotationsFromList([linkAnnot]);

  // 隐藏弹窗并清空输入
  popup.style.display = 'none';
  document.getElementById('link-input').value = '';
});

// 取消按钮逻辑
document.getElementById('cancel-link').addEventListener('click', () => {
  popup.style.display = 'none';
  document.getElementById('link-input').value = '';
});

内容的提问来源于stack exchange，提问作者Mohit Bohra