1

How to add a new element in the context menu of a contenteditable <div>?

I'd like to add an option "Show HTML" that would display the raw HTML that is inside the div.

document.getElementById("a").oncontextmenu = function() { 
  alert("How to add a new element in the Context menu?"); 
}
<div id="a" contenteditable="true">Hello you, <strong>right-click</strong> here and see the <a href="#">new option</a> <i>"Show HTML"</i></div>

Note: Unlike this question or this one I don't want to override the normal context menu and build a new one, but add a new element to the existing context menu:

enter image description here

Basj
  • 41,386
  • 99
  • 383
  • 673
  • Possible duplicate of [Making custom right-click context menus for my web-app](https://stackoverflow.com/questions/4495626/making-custom-right-click-context-menus-for-my-web-app) – lilezek Nov 17 '17 at 17:18
  • Possible Duplicate of https://stackoverflow.com/questions/4909167/how-to-add-a-custom-right-click-menu-to-a-webpage – Intervalia Nov 17 '17 at 17:30
  • @lilezek I edited the question to explain it, but it's not a duplicate of this one. – Basj Nov 17 '17 at 17:55
  • @Intervalia See the end of edited question. – Basj Nov 17 '17 at 17:55
  • From what I know and have read the only way to alter the native context menu, as of today, 11/17/2017, is to use the `` tag and that only works on Firefox. https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contextmenu – Intervalia Nov 17 '17 at 18:37

1 Answers1

0

You can not use this in all browsers. Method of defining a context menu item, now deprecated and removed from the HTML specification. https://www.w3.org/TR/2016/REC-html51-20161101/interactive-elements.html#context-menus,

https://caniuse.com/#search=contextmenu

Petrashka Siarhei
  • 733
  • 10
  • 12