Web SDK UIExtension 右键菜单深度定制指南（基于jQuery-contextMenu）

福昕PDF SDK 软件开发工具包 > 福昕PDF SDK(Web)

Web SDK UIExtension 右键菜单深度定制指南（基于jQuery-contextMenu）

福昕知识库
2025-07-07

核心架构解析

Web SDK UIExtension 的上下文菜单系统（涵盖注释右键菜单、工具栏快捷菜单等）深度整合了业界成熟的 jQuery-contextMenu 插件方案，其技术实现具有以下关键特征：

底层交互框架完全遵循 jQuery-contextMenu 的设计规范（包括事件触发机制、动态渲染逻辑、用户响应处理等）
开发者可直接调用插件原生API实现各类定制需求（菜单项动态管理、权限精细化控制、UI样式调整等）
UIExtension 在此基础之上扩展了PDF业务专属能力（包括注释对象绑定、文档状态实时同步等核心功能）

高频定制场景与最佳实践

基础功能扩展（基于插件原生API）

动态隐藏系统菜单项

// 隐藏注释右键菜单中的"复制"选项
uiExtension.getComponent('annot-menu').then(menu => {
  $(menu).contextMenu({
    selector: '.fv--annot', // UIExtension 注释元素选择器
    events: {
      show: function(options) {
        // 利用插件 API 定位并隐藏目标项
        options.$menu.find('[data-action="copy-annot"]').addClass('fv__ui-hidden');
      }
    }
  });
});

集成业务功能入口

// 为图章注释添加"提交审批"菜单项
uiExtension.getComponent('stamp-contextmenu').then(menu => {
  $(menu).contextMenu({
    selector: '.fv--annot-stamp', // 仅针对图章类型注释
    items: {
      // 保留 UIExtension 原有菜单项
      ...menu.getDefaultItems(),
      // 新增业务菜单项（基于插件 items 配置）
      submitApproval: {
        name: "提交审批",
        icon: "fa-check-circle",
        className: "custom-approval-item",
        callback: function(key, opt) {
          // 调用 UIExtension API 获取当前注释对象
          const annot = uiExtension.getAnnotation(opt.$trigger.data('annot-id'));
          // 执行审批业务逻辑
          approvalService.submit(annot);
        }
      }
    }
  });
});

高级功能实现（结合SDK专属能力）

智能状态感知控制

// 根据文档是否锁定禁用编辑类菜单
uiExtension.getComponent('main-menu').then(menu => {
  $(menu).contextMenu({
    events: {
      show: function(options) {
        // 假设获取到该获取文档状态
        const docState = xxx;
        // 利用插件 API 禁用目标项
        options.$menu.find('[data-action^="edit-"]').prop(
          'disabled', 
          docState.isLocked // 文档锁定时禁用编辑
        );
      }
    }
  });
});

主题化样式适配方案

// 定制菜单样式以匹配 UIExtension 主题
$(uiExtension.getAnchor()).contextMenu({
  selector: '.fv--toolbar-item',
  className: 'fv__ui-contextmenu fv__theme--light', // 复用 SDK 主题类
  items: {
    // 菜单项配置
  },
  // 利用插件样式钩子定制细节
  css: {
    'min-width': '120px',
    'border-radius': 'var(--fv-border-radius)' // 使用 SDK 样式变量
  }
});

开发者资源索引

jQuery-contextMenu 权威文档
所有定制能力均基于该插件实现，重点关注：

核心配置手册（items/events/selector等关键参数）
交互式演示案例：https://swisnl.github.io/jQuery-contextMenu/demo.html
动态操作API（update/destroy等实例方法）

Web SDK 专属接口

uiExtension.getComponent(selector)：获取菜单组件实例
menu.getDefaultItems()：读取系统默认菜单配置
uiExtension.on('menu:create', callback)：监听菜单初始化事件

如何分别自定义文本类型注释（打字机/文本框/注释框）的默认样式属性

在websdk实现放置签名

解决旧版本fsdk_SDK.dll编译程序替换高版本dll报错问题

如何正确释放PDF处理对象以优化内存使用

如何总是用文件名作为文档标题

如何设置新建空白页面的尺寸以及横纵置

通过电子签章服务制作图片章时被驳回

如何设置打印页码和文档缩略图显示页码一致

如何对多个文档快速添加密文

福昕PDF编辑器标准版产品如何去除扫描件水印

Web SDK UIExtension 右键菜单深度定制指南（基于jQuery-contextMenu）

如何分别自定义文本类型注释（打字机/文本框/注释框）的默认样式属性

在websdk实现放置签名

解决旧版本fsdk_SDK.dll编译程序替换高版本dll报错问题

如何正确释放PDF处理对象以优化内存使用

如何总是用文件名作为文档标题

如何设置新建空白页面的尺寸以及横纵置

通过电子签章服务制作图片章时被驳回

如何设置打印页码和文档缩略图显示页码一致

如何对多个文档快速添加密文