How to Customize Context Menu in ASP.NET Core DOCX Editor

27 Aug 202613 minutes to read

How to customize the context Menu

ASP.NET Core DOCX Editor (Document Editor) allows you to add a custom option in the context menu. You can achieve this by using the addCustomMenu() method, and the custom action is defined using the customContextMenuSelect event.

Add a custom option

<div class="control-section">
    <ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
</div>

<script>
  var documenteditor;
  var container;
  function onCreated() {
      var documenteditorElement = document.getElementById("container");
      container = documenteditorElement.ej2_instances[0];
      documenteditor = container.documentEditor;
      // creating Custom Options
      let menuItems = [
          {
              text: 'Search In Google',
              id: 'search_in_google',
              iconCss: 'e-icons e-de-ctnr-find',
          },
      ];
      // adding Custom Options
      container.documentEditor.contextMenu.addCustomMenu(menuItems, false);
      // custom Options Select Event
      container.documentEditor.customContextMenuSelect = function (args) {
          // custom Options Functionality
          let id = container.documentEditor.element.id;
          switch (args.id) {
              case id + 'search_in_google':
                  // To get the selected content as plain text
                  let searchContent =
                      container.documentEditor.selection.text;
                  if (
                      !container.documentEditor.selection.isEmpty &&
                      /\S/.test(searchContent)
                  ) {
                      window.open('http://google.com/search?q=' + searchContent);
                  }
                  break;
          }
      };
  }
</script>
public ActionResult Default()
{
    return View();
}

Customize custom options in the context Menu

The DOCX Editor allows you to customize the added custom option and also to hide or show the default context menu.

Hide default context menu items

Using the addCustomMenu() method, you can hide the default context menu by setting the second parameter to true.

<div class="control-section">
    <ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
</div>

<script>
  var documenteditor;
  var container;
  function onCreated() {
      var documenteditorElement = document.getElementById("container");
      container = documenteditorElement.ej2_instances[0];
      documenteditor = container.documentEditor;
      // creating Custom Options
      let menuItems = [
          {
              text: 'Search In Google',
              id: 'search_in_google',
              iconCss: 'e-icons e-de-ctnr-find',
          },
      ];
      // The second parameter "true" hide the default context menu
      container.documentEditor.contextMenu.addCustomMenu(menuItems, true);
  }
</script>
public ActionResult Default()
{
    return View();
}

Customize added context menu items

The following code shows how to hide or show the added custom option in the context menu using the customContextMenuBeforeOpen event.

<div class="control-section">
    <ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
</div>
<script>
  var documenteditor;
  var container;
  function onCreated() {
      var documenteditorElement = document.getElementById("container");
      container = documenteditorElement.ej2_instances[0];
      documenteditor = container.documentEditor;
      // creating Custom Options
      let menuItems = [
          {
              text: 'Search In Google',
              id: 'search_in_google',
              iconCss: 'e-icons e-de-ctnr-find',
          },
      ];
      // adding Custom Options
      container.documentEditor.contextMenu.addCustomMenu(menuItems, false);
      // custom Options Select Event
      container.documentEditor.customContextMenuSelect = function (args) {
          // custom Options Functionality
          let id = container.documentEditor.element.id;
          switch (args.id) {
              case id + 'search_in_google':
                  // To get the selected content as plain text
                  let searchContent =
                      container.documentEditor.selection.text;
                  if (
                      !container.documentEditor.selection.isEmpty &&
                      /\S/.test(searchContent)
                  ) {
                      window.open('http://google.com/search?q=' + searchContent);
                  }
                  break;
          }
      };
      //  custom options hide/show functionality
      container.documentEditor.customContextMenuBeforeOpen = function (args) {
          let search = document.getElementById(args.ids[0]);
          search.style.display = 'none';
          let searchContent = container.documentEditor.selection.text;
          if (!container.documentEditor.selection.isEmpty && /\S/.test(searchContent)) {
              search.style.display = 'block';
          }
      };
  }
</script>
public ActionResult Default()
{
    return View();
}

Customize context menu with sub-menu items

The DOCX Editor allows you to customize the context menu with sub-menu items. You can achieve this by using the addCustomMenu() method.

The following code shows how to add sub-items to the custom option in the context menu in the Document Editor Container.

<div class="control-section">
    <ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
</div>
<script>
  var documenteditor;
  var container;
  function onCreated() {
      var documenteditorElement = document.getElementById("container");
      container = documenteditorElement.ej2_instances[0];
      documenteditor = container.documentEditor;
      // creating Custom Options
      let menuItems = [
          {
            text: 'Form field',
            id: 'form field',
            iconCss: 'e-de-formfield e-icons',
            items: [
                {
                text: 'Text form',
                id: 'Text form',
                iconCss: 'e-icons e-de-textform',
                },
                {
                text: 'Check box',
                id: 'Check box',
                iconCss: 'e-icons e-de-checkbox-form',
                },
                {
                text: 'Drop down',
                id: 'Drop down',
                iconCss: 'e-icons e-de-dropdownform',
                },
            ],
          },
      ];
      // adding Custom Options
      container.documentEditor.contextMenu.addCustomMenu(menuItems, false, true);
  }
</script>
public ActionResult Default()
{
    return View();
}

Online demo

Explore how to customize the context menu in the ASP.NET Core DOCX Editor for working with Word documents in this live ASP.NET Core Context Menu Customization demo.