自定义弹出窗口

WebViewer UI 中的弹出窗口是小型悬浮菜单。

目前 WebViewer UI 中有 4 种弹出窗口支持自定义，每种弹出窗口都是 instance.UI 上的一个对象：

• 文本弹出窗口（textPopup）：出现在选中文档内的文本后。

• 注释弹出窗口（annotationPopup）：出现在选中注释后。

• 截取弹出窗口（snippingToolPopup）：出现在已框选截取区域后。

• 内容编辑弹出窗口（contentEditPopup）：出现在选中内容编辑块后。

您可能希望通过多种方式自定义弹出窗口，比如：

• 添加项目
• 修改项目
• 删除项目

WebViewer UI 提供了多个 API 来轻松处理这些情况以及更多情况。

获取项目

可以使用 getItems 方法检索弹出窗口中项目的唯一标识符。 它返回一个对象数组，其中每个对象包含一个表示 dataElement 的键。

import ComPDFKitViewer from "@compdfkit_pdf_sdk/webviewer";

const viewer = document.getElementById('webviewer');

ComPDFKitViewer({
  path: '/',
  initialDoc: 'Your PDF Url',
  licenseKey: 'Input your license here'
}, viewer)
  .then((instance) => {
    instance.UI.textPopup.getItems();
  });

添加项目

可以使用 add 方法添加新项目。 每个项目是一个带有 type 和 dataElement 的对象。支持的类型有 customButton、statefulButton、toggleButton、toolButton 和 divider，其属性与导航栏工具项相同。

在弹出窗口的开头添加新项目

要在弹出窗口的开头添加新项目，请不要为添加函数提供第二个参数。

instance.UI.textPopup.add({
  type: 'customButton',
  dataElement: 'logTextButton',
  img: 'path/to/image',
  onClick: () => console.log(instance.Core.documentViewer.getSelectedText())
});

在弹出窗口的特定位置添加新项目

有两种方法可以做到这一点：

• 如果你知道你想要它位于哪个特定元素之后，那么你可以提供一个有效的 dataElement 字符串作为第二个参数。这将在指定的数据元素之后插入新项目。
• 如果你知道要添加它的索引（例如作为最后一个按钮），那么你可以使用 getItems 方法，然后从该索引处的项目中检索数据元素。

// 插入到弹出窗口最后一个元素之后
const textPopupItems = instance.UI.textPopup.getItems();
const lastItem = textPopupItems[textPopupItems.length - 1];

instance.UI.textPopup.add({
  type: 'customButton',
  dataElement: 'lastButton',
  img: 'path/to/image',
  onClick: () => console.log('clicked')
}, lastItem.dataElement);

修改项目

可以使用以下方式更新弹出窗口中的项目。

替换现有项目

instance.UI.textPopup.update([{
  type: 'customButton',
  dataElement: 'customButton1',
  img: 'path/to/image',
  onClick: () => console.log('clicked 1')
}, {
  type: 'divider',
  dataElement: 'customDivider'
},
{
  type: 'customButton',
  dataElement: 'customButton2',
  img: 'path/to/image',
  onClick: () => console.log('clicked 2')
}]);

更新弹出窗口中项目的顺序

const textPopupItems = instance.UI.textPopup.getItems().reverse();
instance.UI.textPopup.update(textPopupItems);

删除项目

1. 可以使用 disableElements API 隐藏元素。
2. 可以通过 update 方法，将项目替换为空数组，相当于删除所有项目。

// 使用 disableElements 隐藏元素。
instance.UI.disableElements('copyTextButton');

// 使用 update 删除所有项目。
instance.UI.textPopup.update([]);