Right click context menu using jQuery UI link rel stylesheet href cdnjs cloudflare com ajax libs highlight js 8 4 styles github min css link rel stylesheet href https swisnl github io jQuery contextMenu dist jquery contextMenu css script src https cdnjs cloudflare com ajax libs jquery 1 11 3 jquery min js script script src https swisnl github io jQuery contextMenu dist jquery contextMenu js script span style position absolute left 100px top 40px border 1px solid blue background color yellow padding 20px class context menu one btn btn neutral right click me span manually force show the context menu button onclick showcontext Click button script document body style height 300px function Context Menu with Sub Menu contextMenu selector context menu one callback function key options var m clicked key window console console log m alert m items edit name Edit icon edit cut name Cut icon cut sep1 quit name Quit icon quit sep2 fold1 name Sub group items fold1 key1 name Foo bar fold2 name Sub group 2 items fold2 key1 name alpha fold2 key2 name bravo fold2 key3 name charlie fold1 key3 name delta fold1a name Other group items fold1a key1 name echo fold1a key2 name foxtrot fold1a key3 name golf function showcontext make button open the menu or context menu one contextMenu or context menu one trigger contextmenu context menu one contextMenu x 400 y 100 console log ready script Right click context menu disable and the highlighted word is printed ref https swisnl github io jQuery contextMenu demo keeping contextmenu open html link rel stylesheet href cdnjs cloudflare com ajax libs highlight js 8 4 styles github min css link rel stylesheet href https swisnl github io jQuery contextMenu dist jquery contextMenu css script src https cdnjs cloudflare com ajax libs jquery 1 11 3 jquery min js script script src https swisnl github io jQuery contextMenu dist jquery contextMenu js script span class context menu one btn btn neutral right click me span textarea style width 100 height 100 class context menu one btn btn neutral once upon a time textarea script document body style height 300px function getSelectionText var text if window getSelection text window getSelection toString else if document selection document selection type Control text document selection createRange text return text document querySelector textarea addEventListener contextmenu function e e preventDefault console log document getSelection getSelectionText let mousePosition mousePosition x e pageX mousePosition y e pageY context menu one contextMenu x mousePosition x y mousePosition y build the function Context Menu with Sub Menu contextMenu selector context menu one callback function key options var m clicked key window console console log m alert m items edit name Edit icon edit cut name Cut icon cut sep1 quit name Quit icon quit sep2 fold1 name Sub group items fold1 key1 name Foo bar fold2 name Sub group 2 items fold2 key1 name alpha fold2 key2 name bravo fold2 key3 name charlie fold1 key3 name delta fold1a name Other group items fold1a key1 name echo fold1a key2 name foxtrot fold1a key3 name golf console log ready script Right click context menu dynamically built created at runtime ref http swisnl github io jQuery contextMenu docs html build link rel stylesheet href cdnjs cloudflare com ajax libs highlight js 8 4 styles github min css link rel stylesheet href https swisnl github io jQuery contextMenu dist jquery contextMenu css script src https cdnjs cloudflare com ajax libs jquery 1 11 3 jquery min js script script src https swisnl github io jQuery contextMenu dist jquery contextMenu js script span class context menu one btn btn neutral right click me span textarea style width 100 height 100 class context menu one btn btn neutral once upon a time textarea script document body style height 300px async function selectTextCursor ta var startPosition ta selectionStart endPosition ta selectionEnd while A Za z0 9 test ta value charAt startPosition startPosition 0 startPosition while A Za z0 9 test ta value charAt endPosition endPosition ta value length endPosition ta selectionStart startPosition 1 ta selectionEnd endPosition console log ta selectionStart function getSelectionText var text if window getSelection text window getSelection toString else if document selection document selection type Control text document selection createRange text return text uses the cursor position const getTheWord selectionStart value let arr value split let sum 0 for let i 0 i arr length i sum arr i length 1 if sum selectionStart return arr i prevent the default document querySelector textarea addEventListener contextmenu async function e e preventDefault console log context selectTextCursor e target console log window getSelection toString window getSelection toString return let selWord getSelectionText let selWord getTheWord e target selectionStart e target value console log selWord selWord if selWord length 0 return return showing showing if showing return let mousePosition mousePosition x e clientX mousePosition y e clientY let word selWord let url https api datamuse com words ml word max 5 let p await fetch url let ret await p json console log url url word word ret ret console log word word let syn name Synonyms items for let i 0 i ret length i let key syn ret i word let val name ret i word syn items key val console log syn syn let myitems edit name Edit icon edit cut name Cut icon cut sep1 quit name Quit icon quit sep2 word name Word word fold1a syn if ret length 0 delete myitems fold1a let ff callback function key options var m clicked key console log m console log split m split if key split length 1 if key split 0 syn console log replacing word var replace key split 1 var textarea e target var len textarea value length var start textarea selectionStart var end textarea selectionEnd var sel textarea value substring start end Here we are replacing the selected text with this one textarea value textarea value substring 0 start replace textarea value substring end len return true items myitems contextMenu selector context menu one reposition false hideOnSecondTrigger true build function triggerElement e console log building context menu console log myitems myitems return ff x mousePosition x y mousePosition y events show function options console log options options Add class to the menu this addClass currently showing menu Show an alert with the selector of the menu if confirm Open menu with selector options selector true return true else Prevent the menu to be shown return false console log Menu show hide function options if confirm Hide menu with selector options selector true return true else Prevent the menu to be hidden return false console log Menu hide contextMenu destroy activated function options if confirm Hide menu with selector options selector true console log Menu Activated events context menu one contextMenu context menu one contextMenu x mousePosition x y mousePosition y async console log ready script Right click context menu dynamically built created at runtime ref http swisnl github io jQuery contextMenu docs html build style ctxmenu position fixed background ghostwhite color black cursor pointer border 1px black solid ctxmenu p padding 0 1rem margin 0 ctxmenu p hover background black color ghostwhite style textarea style width 100 height 100 class context menu one btn btn neutral once upon a time textarea script document body style height 300px function changeword e newword console log changeword this e var textarea document getElementsByTagName textarea 0 var len textarea value length var start textarea selectionStart var end textarea selectionEnd var sel textarea value substring start end Here we are replacing the selected text with this one textarea value textarea value substring 0 start newword textarea value substring end len document getElementById ctxmenu remove async function selectTextCursor ta var startPosition ta selectionStart endPosition ta selectionEnd while A Za z0 9 test ta value charAt startPosition startPosition 0 startPosition while A Za z0 9 test ta value charAt endPosition endPosition ta value length endPosition ta selectionStart startPosition 1 ta selectionEnd endPosition console log ta selectionStart function getSelectionText var text if window getSelection text window getSelection toString else if document selection document selection type Control text document selection createRange text return text prevent the default document querySelector textarea addEventListener contextmenu async function e e preventDefault console log context selectTextCursor e target let selWord getSelectionText let menu document createElement div menu id ctxmenu menu style top e pageY 10 px left e pageX 40 px menu onmouseleave ctxmenu outerHTML menu innerHTML p Option1 p p Option2 p p Option3 p p Option4 p document body appendChild menu let mousePosition mousePosition x e clientX mousePosition y e clientY let word selWord let url https api datamuse com words ml word max 5 let p await fetch url let ret await p json console log url url word word ret ret console log word word let options p Synonyms p for let i 0 i ret length i options p onclick changeword this ret i word ret i word p menu innerHTML options async console log ready script
nu async function e e preventDefault console log context selectTextCursor e target console log window getSelection toString window getSelection toString return let selWord getSelectionText let selWord getTheWord e target selectionStart e target value console log selWord selWord if selWord length 0 return return showing showing if showing return let mousePosition mousePosition x e clientX mousePosition y e clientY let word selWord let url https api datamuse com words ml word max 5 let p await fetch url let ret await p json console log url url word word ret ret console log word word let syn name Synonyms items for let i 0 i ret length i let key syn ret i word let val name ret i word syn items key val console log syn syn let myitems edit name Edit icon edit cut name Cut icon cut sep1 quit name Quit icon quit sep2 word name Word word fold1a syn if ret length 0 delete myitems fold1a let ff callback function key options var m clicked key console log m console log split m split if key split length 1 if key split 0 syn console log replacing word var replace key split 1 var textarea e target var len textarea value length var start textarea selectionStart var end textarea selectionEnd var sel textarea value substring start end Here we are replacing the selected text with this one textarea value textarea value substring 0 start replace textarea value substring end len return true items myitems contextMenu selector context menu one reposition false hideOnSecondTrigger true build function triggerElement e console log building context menu console log myitems myitems return ff x mousePosition x y mousePosition y events show function options console log options options Add class to the menu this addClass currently showing menu Show an alert with the selector of the menu if confirm Open menu with selector options selector true return true else Prevent the menu to be shown return false console log Menu show hide function options if confirm Hide menu with selector options selector true return true else Prevent the menu to be hidden return false console log Menu hide contextMenu destroy activated function options if confirm Hide menu with selector options selector true console log Menu Activated events context menu one contextMenu context menu one contextMenu x mousePosition x y mousePosition y async console log ready script Right click context menu dynamically built created at runtime ref http swisnl github io jQuery contextMenu docs html build style ctxmenu position fixed background ghostwhite color black cursor pointer border 1px black solid ctxmenu p padding 0 1rem margin 0 ctxmenu p hover background black color ghostwhite style textarea style width 100 height 100 class context menu one btn btn neutral once upon a time textarea script document body style height 300px function changeword e newword console log changeword this e var textarea document getElementsByTagName textarea 0 var len textarea value length var start textarea selectionStart var end textarea selectionEnd var sel textarea value substring start end Here we are replacing the selected text with this one textarea value textarea value substring 0 start newword textarea value substring end len document getElementById ctxmenu remove async function selectTextCursor ta var startPosition ta selectionStart endPosition ta selectionEnd while A Za z0 9 test ta value charAt startPosition startPosition 0 startPosition while A Za z0 9 test ta value charAt endPosition endPosition ta value length endPosition ta selectionStart startPosition 1 ta selectionEnd endPosition console log ta selectionStart function getSelectionText var text if window getSelection text window getSelection toString else if document selection document selection type Control text document selection createRange text return text prevent the default document querySelector textarea addEventListener contextmenu async function e e preventDefault console log context selectTextCursor e target let selWord getSelectionText let menu document createElement div menu id ctxmenu menu style top e pageY 10 px left e pageX 40 px menu onmouseleave ctxmenu outerHTML menu innerHTML p Option1 p p Option2 p p Option3 p p Option4 p document body appendChild menu let mousePosition mousePosition x e clientX mousePosition y e clientY let word selWord let url https api datamuse com words ml word max 5 let p await fetch url let ret await p json console log url url word word ret ret console log word word let options p Synonyms p for let i 0 i ret length i options p onclick changeword this ret i word ret i word p menu innerHTML options async console log ready script