Example of Custom Context Menu in React DocumentEditor Component

All Controls
/
Document-editor
/
CustomContextMenuView

This example demonstrates how to add custom option in context menu and some customization for context menu.

More Details...

1584154815121476144014041368133212961260122411881152111610801044100897293690086482879275672068464861257654050446843239636032428825221618014410872360367210814418021625228832436039643246850454057661264868472075679282886490093697210081044108011161152118812241260129613321368140414401476151215481584
1584154815121476144014041368133212961260122411881152111610801044100897293690086482879275672068464861257654050446843239636032428825221618014410872360367210814418021625228832436039643246850454057661264868472075679282886490093697210081044108011161152118812241260129613321368140414401476151215481584
Page
of 1
Description

In this example, custom options added to search the selected text in google. The custom options will be visible after selecting the text.

Context Menu Customization Features

  • Hide existing menu item and show custom menu item alone. It will be achieved by passing boolean value in second parameter of addCustomMenu() method
  • Show the custom menu item in bottom of the exisiting item. It will be achieved by passing boolean value in third parameter of addCustomMenu() method
  • Customize visibility of the added custom menu item. It will be achieved using the customContextMenuBeforeOpen Event
  • Custom Option Functionality achieved by using the customContextMenuSelect Event

More information about the document editor features can be found in this documentation section.