如何在树形组件中定义和使用书签面板？

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

如何在树形组件中定义和使用书签面板？

福昕知识库
2025-09-11

在tree组件中定义和使用书签面板需遵循以下步骤：

在树形组件中定义和使用书签面板需遵循以下步骤：

定义书签面板模板结构
使用 <sidebar-panel> 组件包裹 <bookmark-v2:bookmark-tree>，构成书签面板的基础结构。可通过替换内置的精简模板为复杂模板来自定义属性，例如修改类名、图标、标题等：

   <sidebar-panel 
     name="sidebar-bookmark-v2" 
     class="fv__ui-sidebar-bookmark-v2" 
     @tooltip 
     tooltip-placement="right" 
     tooltip-title="sidebar.bookmark.tooltip" 
     title="sidebar.bookmark.title" 
     icon-class="fv__icon-sidebar-bookmark" 
     @lazy-content="active" 
   > 
     <bookmark-v2:bookmark-tree></bookmark-v2:bookmark-tree> 
   </sidebar-panel>

通过事件自定义树节点外观
在树形组件中，可通过监听 create-tree-node 事件修改书签树节点的外观或绑定事件。例如，将节点文本替换为链接：


// 示例：在创建树节点时修改样式
pdfui.on('create-tree-node', (event) => {
// 自定义节点内容或样式
});

集成自定义外观与功能
若需进一步自定义书签右键菜单等交互，需替换预设的右键菜单模板（需指定固定名称 fv--bookmark-contextmenu-v2），例如：

<template id="custom-contextmenu-template"> 
  <contextmenu name="fv--bookmark-contextmenu-v2"> 
    <!-- 自定义菜单项 --> 
  </contextmenu> 
</template>

数据绑定与事件处理
通过 pdfui.getBookmarkDataService() 获取书签数据服务，监听书签添加、修改等事件以同步更新树节点状态：


pdfui.getBookmarkDataService().then(service => {
service.onBookmarkAdded((event) => {
// 处理新增书签的逻辑
});
});

以上步骤结合了书签面板的模板定义、树形组件的事件监听及数据绑定，实现对书签面板的自定义控制。

如何用颜色自动标记修改过的文本？

如何设置将主程序界面默认启动界面？

设置水印选择水印模版时提示“无法找到您指定的原始文件。请重试。”是什么原因？

如何用颜色自动标记修改过的文本？

如何设置将主程序界面默认启动界面？

设置水印选择水印模版时提示“无法找到您指定的原始文件。请重试。”是什么原因？

pdf文件里文字复制到word里都是乱码怎么办，如何修护文件？

高校caris登录入口点击没有反应，无法打开浏览器怎么办？

在福昕高级PDF编辑器中，如何隐藏在选择文本之后出现浮动的工具栏？

若通过 Office 调用福昕高级 PDF 编辑器的虚拟打印机转换文档时，即便将尺寸设为 letter（21.59*27.94），打印出的 PDF 文档尺寸仍为 A4 大小，如何解决呢？

在使用福昕高级 PDF 编辑器时，您是否希望文档尺寸信息能在页面中持续显示，而非仅鼠标悬浮时才出现？

使用擦除工具清除文档部分内容时，关闭的提示框如何恢复？

福昕高级 PDF 编辑器自定义图章与签名存放路径说明

如何用颜色自动标记修改过的文本？

如何设置将主程序界面默认启动界面？

设置水印选择水印模版时提示“无法找到您指定的原始文件。请重试。”是什么原因？

pdf文件里文字复制到word里都是乱码怎么办，如何修护文件？

高校caris登录入口点击没有反应，无法打开浏览器怎么办？

在福昕高级PDF编辑器中，如何隐藏在选择文本之后出现浮动的工具栏？

若通过 Office 调用福昕高级 PDF 编辑器的虚拟打印机转换文档时，即便将尺寸设为 letter（21.59*27.94），打印出的 PDF 文档尺寸仍为 A4 大小，如何解决呢？

在使用福昕高级 PDF 编辑器时，您是否希望文档尺寸信息能在页面中持续显示，而非仅鼠标悬浮时才出现？

使用擦除工具清除文档部分内容时，关闭的提示框如何恢复？

福昕高级 PDF 编辑器自定义图章与签名存放路径说明