跳到内容
  • 福昕首页
  • 开发中心
  • 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版本
  • 福船图纸管理系统
  • 福昕PDF SDK 软件开发工具包 > 福昕PDF SDK(Web)
  • 标签:
  • 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)
                        {
                            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

相关内容

编辑器只显示菜单,怎么固定显示菜单底下的功能区?

福昕高级PDF编辑器订阅账号转到新设备使用时,无法打开移除页面怎么办?

如何使用文件柜添加文件?

文档工作台中PDF如何批量设置页眉页脚?

如何使用文档雷达快速查看接收到的文件?

高效制作多目标提交PDF表单的两种解决方案

代码实现PDF文件加密

网页PDF显示异常解决方案:缓存清理与文档重载

实现RTL(从右至左)阅读模式:PDF页面绑定与布局调整指南

高效实现PDF矩形注释区域内容提取

推荐内容

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

编辑器只显示菜单,怎么固定显示菜单底下的功能区?

福昕高级PDF编辑器订阅账号转到新设备使用时,无法打开移除页面怎么办?

如何使用文件柜添加文件?

文档工作台中PDF如何批量设置页眉页脚?

如何使用文档雷达快速查看接收到的文件?

高效制作多目标提交PDF表单的两种解决方案

代码实现PDF文件加密

网页PDF显示异常解决方案:缓存清理与文档重载

实现RTL(从右至左)阅读模式:PDF页面绑定与布局调整指南

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

销售咨询:010-50951668

客服电话:0591-38509808

销售咨询
微信公众号

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

隐私策略