# Manipulating the Context Menu in the Document Editor using JavaScript > This article shows how to manipulate the context menu in the Document Editor in JavaScript. The context menu can be customized by adding or removing items or by changing the event handler of existing items. - **Author:** Bjoern Meyer - **Published:** 2023-12-22 - **Modified:** 2025-11-16 - **Description:** This article shows how to manipulate the context menu in the Document Editor in JavaScript. The context menu can be customized by adding or removing items or by changing the event handler of existing items. - **4 min read** (635 words) - **Tags:** - ASP.NET - Ribbon - Context Menu - Document Editor - **Web URL:** https://www.textcontrol.com/blog/2023/12/22/manipulating-the-context-menu-in-the-document-editor-using-javascript/ - **LLMs URL:** https://www.textcontrol.com/blog/2023/12/22/manipulating-the-context-menu-in-the-document-editor-using-javascript/llms.txt - **LLMs-Full URL:** https://www.textcontrol.com/blog/2023/12/22/manipulating-the-context-menu-in-the-document-editor-using-javascript/llms-full.txt --- A fully customizable shortcut menu is available in the Document Editor since version 31.0 of TX Text Control .NET Server. A new *contextMenuOpening* event, which allows you to change the items before the menu is rendered, can be used to access the contents of the context menu. ContextMenuItem objects can be added, removed, and modified, including the click handler associated with them. The location property indicates the context of the menu and whether the input position is a text selection or above a table, image, or header. The items property returns all available items that can be manipulated. In this article we will discuss 4 different typical scenarios when you manipulate the context menus: - Removing an existing item from the context menu. - Removing a sub-item from the context menu. - Disabling an existing item. - Changing the click handler of an existing item. Based on the standard context menu for inserting a footnote (*Insert -> Footnote*), the examples should show the scenarios that are typical for this. ![Context menu](https://s1-www.textcontrol.com/assets/dist/blog/2023/12/22/a/assets/context1.webp "Context menu") ### Removing Items Removing an existing item from the context menu is very simple. The following code removes the *Insert* item from the context menu: ``` // remove the "Insert" menu item TXTextControl.addEventListener("contextMenuOpening", e => { // check if e.items contains an entry where property text == "Insert" const index = e.items.findIndex(i => i.text === "Insert"); // if so, remove it if (index > -1) { e.items.splice(index, 1); } }) ``` ![Context menu](https://s1-www.textcontrol.com/assets/dist/blog/2023/12/22/a/assets/context2.webp "Context menu") ### Removing Sub-Items Removing a sub-item from the context menu is a little bit more complex. The following code removes the *Footnote* item from the *Insert* item: ``` // remove the "Footnote" menu item TXTextControl.addEventListener("contextMenuOpening", (e) => { // check if e.items contains an entry where property text == "Insert" const index = e.items.findIndex((i) => i.text === "Insert"); // check if e.items[index].items contains an entry where property text == "Footnote" const index2 = e.items[index].items.findIndex((i) => i.text === "Footnote"); // if so, remove it if (index2 > -1) { e.items[index].items.splice(index2, 1); } }) ``` ![Context menu](https://s1-www.textcontrol.com/assets/dist/blog/2023/12/22/a/assets/context3.webp "Context menu") First, it searches for the *Insert* menu item, and then it searches for the *Footnote* item in its item collection. If found, the item is removed from the array. ### Disabling the Item Disabling an existing item is also very simple. The following code disables the *Footnote* item: ``` // disable the "Footnote" menu item TXTextControl.addEventListener("contextMenuOpening", (e) => { // check if e.items contains an entry where property text == "Insert" const index = e.items.findIndex((i) => i.text === "Insert"); // check if e.items[index].items contains an entry where property text == "Footnote" const index2 = e.items[index].items.findIndex((i) => i.text === "Footnote"); // if so, disable it e.items[index].items[index2].isEnabled = false; }) ``` ![Context menu](https://s1-www.textcontrol.com/assets/dist/blog/2023/12/22/a/assets/context4.webp "Context menu") First, it searches for the *Footnote* item and then it sets the *isEnabled* property to *false*. ### Changing the Click Handler The click handler can also be subject to manipulation. This sample code overrides the default action and adds an alert to the function. ``` // cancel the click handler of the "Footnote" menu item TXTextControl.addEventListener("contextMenuOpening", (e) => { // check if e.items contains an entry where property text == "Insert" const index = e.items.findIndex((i) => i.text === "Insert"); // check if e.items[index].items contains an entry where property text == "Footnote" const index2 = e.items[index].items.findIndex((i) => i.text === "Footnote"); // if so, cancel the click handler e.items[index].items[index2].clickHandler = function(e) { e.cancel = true; alert("Footnote is disabled"); } }) ``` ![Context menu](https://s1-www.textcontrol.com/assets/dist/blog/2023/12/22/a/assets/context5.webp "Context menu") --- ## About Bjoern Meyer As CEO, Bjoern is the visionary behind our strategic direction and business development, bridging the gap between our customers and engineering teams. His deep passion for coding and web technologies drives the creation of innovative products. If you're at a tech conference, be sure to stop by our booth - you'll most likely meet Bjoern in person. With an advanced graduate degree (Dipl. Inf.) in Computer Science, specializing in AI, from the University of Bremen, Bjoern brings significant expertise to his role. In his spare time, Bjoern enjoys running, paragliding, mountain biking, and playing the piano. - [LinkedIn](https://www.linkedin.com/in/bjoernmeyer/) - [X](https://x.com/txbjoern) - [GitHub](https://github.com/bjoerntx) --- ## Related Posts - [Document Editor: Initialization Events](https://www.textcontrol.com/blog/2023/10/23/document-editor-initialization-events/llms.txt) - [Detect Toggle Button Changes Using a MutationObserver](https://www.textcontrol.com/blog/2021/11/11/detect-toggle-button-changes-using-a-mutationobserver/llms.txt) - [Beyond WebSockets: A Glimpse into the Future of Document Editing with WebAssembly](https://www.textcontrol.com/blog/2026/06/10/beyond-websockets-glimpse-future-document-editing-webassembly/llms.txt) - [5 Layout Patterns for Integrating the TX Text Control Document Editor in ASP.NET Core C#](https://www.textcontrol.com/blog/2026/04/09/5-layout-patterns-for-integrating-the-tx-text-control-document-editor-in-aspnet-core-csharp/llms.txt) - [Introducing Text Control Agent Skills](https://www.textcontrol.com/blog/2026/03/27/introducing-text-control-agent-skills/llms.txt) - [Deploying the TX Text Control Document Editor from the Private NuGet Feed to Azure App Services (Linux and Windows)](https://www.textcontrol.com/blog/2026/03/25/deploying-the-tx-text-control-document-editor-from-the-private-nuget-feed-to-azure-app-services-linux-and-windows/llms.txt) - [Build a Custom Backstage View in ASP.NET Core with TX Text Control](https://www.textcontrol.com/blog/2026/02/17/build-a-custom-backstage-view-in-aspnet-core-with-tx-text-control/llms.txt) - [ASP.NET Core Document Editor with Backend via the Text Control Private NuGet Feed](https://www.textcontrol.com/blog/2026/02/09/aspnet-core-document-editor-private-nuget-feed/llms.txt) - [Why Document Processing Libraries Require a Document Editor](https://www.textcontrol.com/blog/2025/12/04/why-document-processing-libraries-require-a-document-editor/llms.txt) - [Getting Started Video Tutorial: Document Editor in ASP.NET Core C# on Linux](https://www.textcontrol.com/blog/2025/07/29/getting-started-video-tutorial-document-editor-aspnet-core-csharp-linux/llms.txt) - [Document Protection in ASP.NET with TX Text Control: Healthcare Use Cases](https://www.textcontrol.com/blog/2025/06/25/document-protection-in-asp-dotnet-with-tx-text-control-healthcare-use-cases/llms.txt) - [Deploying the TX Text Control Document Editor in an ASP.NET Core Web App to Azure App Services](https://www.textcontrol.com/blog/2025/03/26/deploying-the-tx-text-control-document-editor-in-an-asp-net-core-web-app-to-azure-app-services/llms.txt) - [Building an ASP.NET Core Backend (Linux and Windows) for the Document Editor and Viewer](https://www.textcontrol.com/blog/2025/03/26/building-an-asp-net-core-backend-for-the-document-editor-and-viewer/llms.txt) - [TX Text Control for Blazor: Mail Merge Integration Tutorial](https://www.textcontrol.com/blog/2025/03/25/tx-text-control-for-blazor-mail-merge-integration-tutorial/llms.txt) - [TX Text Control Document Editor and Viewer for Blazor Released](https://www.textcontrol.com/blog/2025/03/25/tx-text-control-document-editor-and-viewer-for-blazor-released/llms.txt) - [Getting Started: Document Editor for Blazor in ASP.NET Core](https://www.textcontrol.com/blog/2025/03/25/getting-started-document-editor-for-blazor-in-asp-net-core/llms.txt) - [Introducing TXTextControl.Web.Server.Core: A Cross-Platform Backend for TX Text Control Document Editor](https://www.textcontrol.com/blog/2025/03/13/introducing-txtextcontrol-web-server-core-a-cross-platform-backend-for-tx-text-control-document-editor/llms.txt) - [Getting Started: Document Editor with ASP.NET Core and Docker Support with Linux Containers](https://www.textcontrol.com/blog/2025/03/12/getting-started-document-editor-with-asp-net-core-and-docker-support-with-linux-containers/llms.txt) - [Announcing Our Work on a Blazor Component for Document Editing and Viewing](https://www.textcontrol.com/blog/2025/01/24/announcing-our-work-on-a-blazor-component-for-document-editing-and-viewing/llms.txt) - [Preparing Documents for E-Signing for Multiple Signers in .NET C#](https://www.textcontrol.com/blog/2024/11/13/preparing-documents-for-e-signing-for-multiple-signers-in-net-c-sharp/llms.txt) - [ASP.NET Core: Use the Document Editor and Viewer in the Same Razor View](https://www.textcontrol.com/blog/2024/11/08/asp-net-core-use-the-document-editor-and-viewer-in-the-same-razor-view/llms.txt) - [Connecting the TXWebSocketMiddleware to a Separate, External TCP Synchronization Service](https://www.textcontrol.com/blog/2024/10/01/connecting-the-txwebsocketmiddleware-to-a-separate-external-tcp-synchronization-service/llms.txt) - [Getting Started: Creating an ASP.NET Core Web App with the Document Editor in Visual Studio Code (VS Code)](https://www.textcontrol.com/blog/2024/09/27/getting-started-creating-an-asp-net-core-web-app-with-the-document-editor-in-visual-studio-code-vs-code/llms.txt) - [Customizing the Ribbon in TX Text Control for Angular](https://www.textcontrol.com/blog/2024/09/11/customizing-the-ribbon-in-tx-text-control-for-angular/llms.txt) - [Getting Started Video Tutorial: How to use the Document Editor in ASP.NET Core C#](https://www.textcontrol.com/blog/2024/08/05/getting-started-video-tutorial-how-to-use-the-document-editor-in-asp-net-core-csharp/llms.txt)