ComPDFKit
产品介绍
New
开发文档
联系我们
PDF SDKIDPConversion SDK
PDF SDK
技术支持

自定义弹出窗口 ​

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

目前 WebViewer 有文本弹出窗口，出现在选中文档内的文本后。

文本弹出窗口

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

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

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

获取项目 ​

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

javascript
ComPDFKitViewer.init(...)
  .then(instance => {
    instance.UI.textPopup.getItems();
  });

添加项目 ​

可以使用 add 方法添加新项目。 要添加的项目类型可以参考工具属性与类型。

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

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

javascript
ComPDFKitViewer.init(...)
  .then(instance => {
    instance.UI.textPopup.add({
      name: 'customButton',
      type: 'actionButton',
      img: 'path/to/image',
      onClick: () => console.log(instance.Core.getSelectedText())
    });
  });

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

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

  • 如果你知道你想要它位于哪个特定元素之后，那么你可以提供一个有效的 dataElement 字符串作为第二个参数。这将在指定的数据元素之后插入新项目。
  • 如果你知道要添加它的索引（例如作为最后一个按钮），那么你可以使用 getItems 方法，然后从该索引处的项目中检索数据元素。
javascript
ComPDFKitViewer.init(...)
  .then(instance => {
    const textPopupItems = instance.UI.textPopup.getItems();
    const lastItem = textPopupItems[textPopupItems.length - 1];

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

修改项目 ​

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

替换现有项目

javascript
ComPDFKitViewer.init(...)
  .then(instance => {
    instance.UI.textPopup.update([{
      name: 'customButton',
      type: 'actionButton',
      img: 'path/to/image',
      onClick: () => console.log('clicked 1')
    }, {
      type: 'divider'
    },
    {
      name: 'customButton',
      type: 'actionButton',
      img: 'path/to/image',
      onClick: () => console.log('clicked 2')
    }]);
  });

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

javascript
ComPDFKitViewer.init(...)
  .then(instance => {
    const textPopupItems = instance.UI.textPopup.getItems().reverse();
  });

删除项目 ​

  1. 可以使用 disableElements API 隐藏元素。
  2. 可以通过 update 方法，将项目替换为空数组，相当于删除所有项目。
javascript
ComPDFKitViewer.init(...)
  .then(instance => {
    // 使用 disableElements 隐藏元素。
    instance.UI.disableElements('copyTextButton');

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