The newly released minor version 6.2 of Foxit PDF SDK for Web allows you to customize what goes on your context menu when users right-click on the PDF screen. In this article, we will provide a few handy tutorials to customize your context menu.
Default Context Menus
In our current demo, this is how the menus are displayed by default:
Page Context Menu Text Selection Context Menu Annotation Context Menu
Customize your context menu
Foxit PDF SDK for Web 6.2 created the configureContextMenu function inside the ViewerInstance class in order to customize your context menu:
WebPDF.ViewerInstance.configureContextMenu(type, config);
Parameter description
type: There are three types of context menus, as you’ve seen above
Page Context Menu: WebPDF.ContextMenuType.PAGE_MENU
Text Selection Context Menu: WebPDF.ContextMenuType.TEXT_SELECT_MENU
Annotation Context Menu: Please see the full list of annotation types below:
Annotation Name Code Snippet
CALLOUT WebPDF.ContextMenuType.CALLOUT
POLYGON CLOUD WebPDF.ContextMenuType.POLYGON_CLOUD
DISTANCE WebPDF.ContextMenuType.DISTANCE
LINE ARROW WebPDF.ContextMenuType.LINE_ARROW
LINE WebPDF.ContextMenuType.LINE
INK WebPDF.ContextMenuType.INK
CIRCLE WebPDF.ContextMenuType.CIRCLE
POLY LINE WebPDF.ContextMenuType.POLY_LINE
POLYGON WebPDF.ContextMenuType.POLYGON
SQUARE WebPDF.ContextMenuType.SQUARE
WIDGET WebPDF.ContextMenuType.WIDGET
STRADDLE WebPDF.ContextMenuType.STRADDLE
CARET WebPDF.ContextMenuType.COMMENT_CARET
HIGHLIGHT WebPDF.ContextMenuType.COMMENT_HIGHLIGHT
HIGHLIGHT AREA WebPDF.ContextMenuType.COMMENT_HIGHLIGHT_AREA
REPLACE WebPDF.ContextMenuType.COMMENT_REPLACE
SQUIGGLY WebPDF.ContextMenuType.COMMENT_SQUIGGLY
STRIKEOUT WebPDF.ContextMenuType.COMMENT_STRIKEOUT
UNDERLINE WebPDF.ContextMenuType.COMMENT_UNDERLINE
TEXTBOX WebPDF.ContextMenuType.TEXTBOX
TYPE WRITER WebPDF.ContextMenuType.TYPE_WRITER
LINK WebPDF.ContextMenuType.LINK
IMAGE WebPDF.ContextMenuType.IMAGE
REDACT WebPDF.ContextMenuType.REDACT
TEXT WebPDF.ContextMenuType.TEXT
config: There are two types of configuration for context menus
main: cover all types of context menus
popup: has the same configuration as main, but is only available for annotations with ‘Reply’ option
Here is a sample code to help visualize the function implementation:
WebPDF.ViewerInstance.configureContextMenu(type, { main: { cls: 'custom_context_menu', attrs: { id: 'custom_context_menu_id' }, items: [{ // Required. Context menu items, supports i18next. text: 'I18n.Properties', // Optional. The css class for menu item. cls: 'custom_context_menu_item', //Optional. The css class for menu icons. Set 'hide' to conceal icon, iconCls: 'hide', // Optional. Menu click event handler handler: function() { alert('show property dialog') } }, { text: 'i18n.Delete', cls: 'custom_context_menu_item', iconCls: 'hide', handler: function() { alert('target has been deleted!'); } }] }, // Only valid for annotation with "reply" capability. popup: { // the config format is same as main. } });
Below are the instructions to change the status of your context menu. Foxit PDF SDK for Web currently allows you to show, hide, disable and enable your context menu items. You have the option of selecting a specific context menu using the setContextMenuItemStatus below, or change the status for all annotations simultaneously. Refer to the Change status for all annotations section if that is what you need to achieve.
WebPDF.ViewerInstance.setContextMenuItemStatus(type, name, status);
Parameter description
type: Refer to previous param description
name: Please see the full list of menu item names below:
Annotation Name Code Snippet
ZOOM IN WebPDF.ContextMenuItemName.ZOOM_IN
ZOOM OUT WebPDF.ContextMenuItemName.ZOOM_OUT
ZOOM ACTUAL WebPDF.ContextMenuItemName.ZOOM_ACTUAL
ZOOM FITPAGE WebPDF.ContextMenuItemName.ZOOM_FITPAGE
ZOOM FITWIDTH WebPDF.ContextMenuItemName.ZOOM_FITWIDTH
ROTATE RIGHT WebPDF.ContextMenuItemName.ROTATE_RIGHT
ROTATE LEFT WebPDF.ContextMenuItemName.ROTATE_LEFT
GOTO PREV PAGE WebPDF.ContextMenuItemName.GOTO_PREV_PAGE
GOTO NEXT PAGE WebPDF.ContextMenuItemName.GOTO_NEXT_PAGE
PRINT WebPDF.ContextMenuItemName.PRINT
SEARCH WebPDF.ContextMenuItemName.SEARCH
PROPERTIES WebPDF.ContextMenuItemName.PROPERTIES
DELETE WebPDF.ContextMenuItemName.DELETE
REPLY WebPDF.ContextMenuItemName.REPLY
COPY HIGHLIGHT TEXT WebPDF.ContextMenuItemName.COPY_HIGHLIGHT_TEXT
REDACT APPLY ALL WebPDF.ContextMenuItemName.REDACT_APPLY_ALL
REDACT APPLY WebPDF.ContextMenuItemName.REDACT_APPLY
TEXT SELECT COPY WebPDF.ContextMenuItemName.TEXT_SELECT_COPY
TEXT SELECT HIGHLIGHT WebPDF.ContextMenuItemName.TEXT_SELECT_HIGHLIGHT
TEXT SELECT UNDERLINE WebPDF.ContextMenuItemName.TEXT_SELECT_UNDERLINE
TEXT SELECT STRIKEOUT WebPDF.ContextMenuItemName.TEXT_SELECT_STRIKEOUT
TEXT SELECT SQUIGGLY WebPDF.ContextMenuItemName.TEXT_SELECT_SQUIGGLY
TEXT SELECT REPLACE WebPDF.ContextMenuItemName.TEXT_SELECT_REPLACE
TEXT SELECT INSERT WebPDF.ContextMenuItemName.TEXT_SELECT_INSERT
status:
Disabled: Disable/Enable the item
true: Grey out the item and disable click
false: Item is enabled
Visible: Show/Hide the item completely
true: Hide the item completely
false: Item is displayed
Disable a delete menu from the text highlight context menu
WebPDF.ViewerInstance.setContextMenuItemStatus(WebPDF.ContextMenuType.COMMENT_HIGHLIGHT, WebPDF.ContextMenuItemName.DELETE, { Disabled: true })
This is how the context menu will look:
Hide a delete menu from the text highlight context menu
WebPDF.ViewerInstance.setContextMenuItemStatus(WebPDF.ContextMenuType.COMMENT_HIGHLIGHT, WebPDF.ContextMenuItemName.DELETE, { Visible: false })
Instead of disabled, the parameter for show/hide a context menu item is ‘Visible’. You will see that the menu item is not displayed:
Change status for all annotations
It is possible to change a context menu status for all annotations together by using the setAnnotContextMenuItemStatus function.
WebPDF.ViewerInstance.setAnnotContextMenuItemStatus(WebPDF.ContextMenuItemName.DELETE, { Visible: false });
Refer to the menu item names list to see which item you wish to hide. You will see that the ‘Delete’ item will be hidden for all annotation context menus.