跳到内容
  • 福昕首页
  • 开发中心
  • SDK文档资料
  • 福昕首页
  • 开发中心
  • SDK文档资料
申请试用
  • 企业自动化
    • Compressor
  • 福昕CloudAPI
  • 福昕PDF SDK 软件开发工具包
    • 福昕PDF SDK(ActiveX)
    • 福昕PDF SDK(桌面/服务器)
    • 福昕PDF SDK(Plug-in)
    • 福昕 PDF SDK(安卓)
    • 福昕PDF SDK(iOS)
    • 福昕PDF SDK(Web)
  • 福昕管理控制台
    • 公有云
    • 私有云
    • 通用情况
  • 福昕阅读器
    • RMS插件
  • 福昕高级编辑器
    • AI助手
    • Mac版本
      • 常规问题
    • windows版本
      • ECM集成
      • 互联PDF
      • 企业管理指南
      • 保护
      • 内容编辑
      • 创建PDF
      • 压缩
      • 图章
      • 安装与卸载
      • 常见问题
      • 打印
      • 注释/评论
      • 福昕插件
      • 翻译助手
      • 翻译助手教程
      • 试用与激活
      • 转换
      • 页面管理
    • 教育用户
      • 论文查重
      • 论文畅
      • 操作指南
    • 网页版
      • 电子签章
    • 订阅
    • 资源
  • 福昕高级编辑器Linux版本
  • 福船图纸管理系统
  • [category_full_paths]
  • 标签:
  • DOM操作,JavaScript,WebSDK,事件监听,右键事件监听,字体下拉框,字体顺序,注释字体,菜单隐藏事件

WebSDK中如何自定义注释字体列表的显示顺序

  • 福昕知识库
  • 2025-06-12

实现步骤

1. 监听注释右键事件

福昕PDF SDK(Web)中首先需要监听注释的右键按钮点击事件。系统默认的注释字体列表包含多种字体选项。

				
					 pdfui.eventEmitter.on(PDFViewCtrl.constants.ViewerEvents.rightClickAnnotation, rightClickCallback)
        
function rightClickCallback(annotRender,e) {   
    //do something
    customizeAnnotMenu();            
}
				
			

2. 判断注释类型并添加菜单隐藏监听

当右键菜单显示的是以下注释类型之一时:

  • 打字机注释

  • 注释框

  • 文本框
    需要额外添加一次监听菜单隐藏事件。

				
					async function customizeAnnotMenu() { 
            // 1. 获取Web SDK的编辑器根组件(浏览器环境原生Promise支持)  
            const root = await pdfui.getRootComponent();  
            if (!root) throw new Error("Web SDK初始化失败");  

            // 2. 通过组件选择器定位注释菜单(基于Web Components或类名)  
            contextMenu = await root.querySelector('fv--textbox-contextmenu');   

            // 3. 判断注释菜单类型是否是注释框文本框打字机
            if (contextMenu) 
            {   
                if (!contextMenu.isVisible) 
                {
                    contextMenu = await root.querySelector('fv--typewriter-contextmenu');  
                    if(!contextMenu.isVisible)
                    {
                        contextMenu = await root.querySelector('fv--callout-contextmenu');
                        if(!contextMenu.isVisible)
                        {
                            //再找一遍textbox确保无误
                            contextMenu = await root.querySelector('fv--textbox-contextmenu');  
                            if(!contextMenu.isVisible)
                            {
                                return;
                            }
                        }                         
                    }
                }
            }
            else{
                return;
            }

            // 4. 添加一次监听隐藏菜单事件
            contextMenu.once(UIExtension.UIConsts.COMPONENT_EVENTS.HIDDEN,async function(){
                    setTimeout(async() => {
                        await setfontlist()
                        console.log("等待时间结束");
                    }, 1000); 
            })

            // 5. 移除右键属性监听事件
            pdfui.eventEmitter.removeListener(PDFViewCtrl.constants.ViewerEvents.rightClickAnnotation, rightClickCallback)
        }
				
			

3. 调整字体顺序

在监听事件回调函数中:

  • 定位到字体下拉框的列表元素

  • 查找需要置顶的字体项

  • 将该字体项移动到列表首位

				
					async function setfontlist()
        {   
            // 找到修改字体的元素
            var d = await document.querySelector('[class="input-component font"]')
                 
           
            if(d)
            {
                // 找到修改字体列表
                var ul =await d.querySelector('[class="fv__ui-dropdown-list"]')
                if(ul)
                {
                    //找到需要修改的字体
                    var shsv = await ul.querySelector('[aria-label="Noto Sans CJK TC Thin"]')
                    ul.removeChild(shsv);
                    // 将元素添加到列表的开头
                    ul.insertBefore(shsv, ul.firstElementChild);
                }
                else{
                    console.log('字体列表未找到')
                }
            }
            else{
                    console.log('字体元素未找到')
            }    
            
        }
				
			

修改前字体顺序:

修改后字体顺序:

系统字体列表

当前WebSDK支持的完整字体名称如下:

ZapfDingbats
Symbol
Courier BoldOblique
Courier Oblique
Courier Bold
Courier
Helvetica BoldOblique
Helvetica Oblique
Helvetica Bold
Helvetica
Times BoldItalic
Times Italic
Times Bold
Times Roman
Noto Sans CJK JP DemiLight
Noto Sans Mono CJK JP Regular
Noto Sans Mongolian
Noto Naskh Arabic
Noto Sans Mono CJK TC Regular
Noto Sans Mono CJK SC Regular
Noto Sans CJK JP Light
Noto Sans CJK SC DemiLight
Noto Sans CJK KR
Noto Sans CJK KR Thin
Noto Sans CJK KR Light
Noto Sans CJK TC Light
Noto Serif Khmer
Noto Sans Ethiopic
Noto Sans CJK TC DemiLight
Noto Sans Sinhala
Noto Sans Gujarati
Noto Sans Tamil
Noto Sans Lao
Noto Sans SC Black
Noto Sans CJK JP Medium
Noto Sans Hebrew
Noto Serif Thai
Noto Sans Syriac Eastern
Noto Sans Khmer
Noto Sans Canadian Aboriginal
Noto Sans Yi
Noto Sans Telugu
Noto Sans Phags Pa
Noto Sans TC Light
Noto Serif Lao
Noto Sans CJK KR Medium
Noto Sans SC Medium
Noto Sans SC Light
Noto Sans Thaana
Noto Sans Tai Le
Noto Sans SC Thin
Noto Sans CJK TC Thin
Noto Sans CJK JP Thin
Noto Sans CJK JP Regular
Noto Sans Cherokee
Noto Sans Thai
Noto Sans CJK KR DemiLight
Noto Sans Mono CJK KR Regular
Noto Sans CJK TC Medium
Noto Sans Tibetan
Noto Sans
Noto Sans SC Regular

相关内容

自定义StorageDriver及事件分发实现指南

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

如何在自定义 Item 组件中添加清除编辑状态铅笔注释的功能按钮

WebViewer 工程中使用 Template 实现 UI 布局的完整指南

PDF文档合并功能实现指南

获取PDF文档各页面旋转角度的方法

【福昕管理控制台】受邀用户邀请重新发送操作指南

基于Nginx的代理服务器配置方案:解决跨域资源共享(CORS)问题

如何导入或导出PDF注释?

如何将PDF转换为图片并设置其分辨率?

推荐内容

自定义StorageDriver及事件分发实现指南

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

如何在自定义 Item 组件中添加清除编辑状态铅笔注释的功能按钮

WebViewer 工程中使用 Template 实现 UI 布局的完整指南

PDF文档合并功能实现指南

获取PDF文档各页面旋转角度的方法

【福昕管理控制台】受邀用户邀请重新发送操作指南

基于Nginx的代理服务器配置方案:解决跨域资源共享(CORS)问题

如何导入或导出PDF注释?

如何将PDF转换为图片并设置其分辨率?

产品
  • 应用行业
  • 白皮书
开发支持
  • 开发中心
  • SDK文档资料

销售咨询:010-50951668

客服电话:0591-38509808

销售咨询
微信公众号

©2025 福建福昕软件开发股份有限公司 版权所有

隐私策略