如何在菜单栏指定位置插入自定义的功能菜单项？

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

标签:
Fragment,template,自定义UI

如何在菜单栏指定位置插入自定义的功能菜单项？

福昕知识库
2025-01-02

您可以参考开发者手册中第96页UI fragments章节的内容。

Fragment 是一段 UI 代码段，用来在 UI template 中插入，删除，修改组件。其适用于在基于内置模板的基础上进行少量的 UI 自定义。代码实现时，您有两种方式可以参考：
1. 您可以参考开发者手册中第97页中的代码示例，新建一个自定义的appearance变量。在其default fragments配置中完成自定义UI的编辑，然后在初始化实例对象pdfui时，赋值给appearance参数；
2. 您也可以参考SDK中内置的示例代码examples/UIExtension/fragment_usage/，直接在初始化实例对象pdfui的fragments参数中进行编辑。
**提示：请仔细阅读Fragment配置参数描述章节的内容。

若您想要在默认工具栏中的“属性”按钮后边插入用户自定义的一组或指定个数的组件，可以参考如下代码片段：

var PDFUI = UIExtension.PDFUI;
var FRAGMENT_ACTION = UIExtension.UIConsts.FRAGMENT_ACTION;

var pdfui = new PDFUI({
    viewerOptions: {
        libPath: '../../../lib',
        jr: {
            readyWorker: readyWorker
        }
    },
    renderTo: '#pdf-ui',
    appearance: UIExtension.appearances.adaptive,
    fragments: [{
        target: 'file-property',
        template: `<group name="home-tab-group-custom">
              <dropdown icon-class="fv__icon-toolbar-stamp">
                <xbutton  name="zhangsan1">张三1</xbutton>,
              </dropdown>
              <ribbon-button icon-class="fv__icon-toolbar-hand" name="cus-button1" text="button1"></ribbon-button>
            </group>`,
        action: FRAGMENT_ACTION.AFTER,
        config: [{
            target: 'cus-button1',
            callback: function() {
                alert('button1 clicked!');
            }
        }, {
            target: 'zhangsan1',
            callback: function() {
                alert('zhangsan1');
            }
        }]
    }],
    addons: UIExtension.PDFViewCtrl.DeviceInfo.isMobile ?
        '../../../lib/uix-addons/allInOne.mobile.js' : '../../../lib/uix-addons/allInOne.js'
});

【校园昕积分】邀请攻略：使用福昕合作高校发放教育专用激活码激活

【校园昕积分】邀请攻略：使用CARSI高校账户或高校EDU邮箱注册

在福昕高级PDF编辑器中如何自定义快速访问工具栏

在福昕高级PDF编辑器中如何设置常用图章

在对文件虚拟打印后如何设置文件不自动打开

通知消息关闭后如何开启

PDF文件奇偶页差异化页码添加

Web SDK 开发实战：动态自定义 PDF 注释右键菜单的 JavaScript 实现方案

无法安装服务“Foxit Document Management”(FoxitAssistantSvcPlus)

将3D文件添加作为信任文件