支持第三方文本高亮翻译插件

如何在 Foxit PDF SDK for Web 中支持第三方文本高亮翻译插件

您可以使用 select-text 事件来激活浏览器的文本高亮翻译插件。这里我们以 Chrome Saladict plugin 为例，向您展示如何监听 selection 事件并实现一个弹出式词典或页面翻译器。

1. 在 Chrome://extensions 面板中启用 Saladict plugin。

2. 在您的代码中添加 select-text 事件监听器。

let div = document.createElement('div');
div.style.cssText += `
  opacity: 0;
  position: absolute;
  width: 0;
  height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
`
document.body.append(div);
document.addEventListener('mousedown', () => {
    window.getSelection().removeAllRanges();
});
pdfui.addUIEventListener(PDFViewCtrl.Events.selectText, (data) => {
    if (!data || !data.text || !data.e || !data.e.srcEvent) {
        return;
    }
    const {text, e} = data;
    const event = e.srcEvent;
    div.style.cssText += `
    left: ${event.clientX}px;
    top: ${event.clientY}px;
    `;
    div.innerHTML = '';
    div.append(document.createTextNode(text));
 
    const mousedown = new MouseEvent('mousedown', {
        bubbles: true,
        clientX: event.clientX,
        clientY: event.clientY,
        relatedTarget: div
    });
    const pointerup = new PointerEvent('pointerup', {
        bubbles: true,
        clientX: event.clientX,
        clientY: event.clientY,
        relatedTarget: div
    });
    const mouseup = new PointerEvent('mouseup', {
        bubbles: true,
        clientX: event.clientX,
        clientY: event.clientY,
        relatedTarget: div
    });
 
    div.dispatchEvent(mousedown);
 
    const selection = window.getSelection();
    const range = document.createRange();
    range.selectNode(div);
    selection.addRange(range);
 
    div.dispatchEvent(mouseup);
    div.dispatchEvent(pointerup);
});

3. 选择 Select Text Tool，拖动并在页面上选择一段文本，然后 Saladict 图标将出现在所选内容上。