How to create context menu on selected text

Question

I am looking for an solution to create a context menu on selected text from contenteditable html for link creation.

Workflow: Basically users can edit text out of webpage (contenteditable="true" in div) and if they like to add a link to the selected text they have to use context menu where they can right-mouseclick upon the selected text and type URL in the input box from context menu, then boom, the selected text become hyperlink.

Appreciate your direction.

Answer 1

Taking example from here and changing a little bit the demo from here, this is the result using the "contextmenu" event. Now you can create your own functions.

if (!window.x) {
    x = {};
}

x.Selector = {};
x.Selector.getSelected = function() {
    var t = '';
    if (window.getSelection) {
        t = window.getSelection();
    } else if (document.getSelection) {
        t = document.getSelection();
    } else if (document.selection) {
        t = document.selection.createRange().text;
    }
    return t;
}

var pageX;
var pageY;

$(document).ready(function() {

   $(document).on('contextmenu', function(ev) {
      ev.preventDefault();
      var selectedText = x.Selector.getSelected();
      if(selectedText != ''){
            $('ul.tools').css({
                'left': pageX,
                'top' : pageY - 20
            }).fadeIn(200);
      } else {
            $('ul.tools').fadeOut(200);
      }
    });
    
    $(document).on("click", function(e){
        $('ul.tools').fadeOut(200);
    });
    
    $(document).on("mousedown", function(e){
        pageX = e.pageX;
        pageY = e.pageY;
    });
    
});

body {
    padding: 60px 10px;
}

ul.tools {
    display: none;
    list-style: none;
    box-shadow: 0px 0px 4px rgba(0,0,0,.5);
    border: solid 1px #000;
    position: absolute;
    background: #fff;
    padding: 0;
}
ul.tools li {
    height: 20px;
    margin: 5px;
    padding: 2px;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true">Vestibulum vel orci hendrerit ligula pharetra volutpat et sed dui. Phasellus vitae feugiat dolor. Mauris eleifend neque ac iaculis aliquet. Nunc malesuada nisi in dictum tristique. Vestibulum mauris eros, varius sed faucibus sed, pellentesque et nunc. Curabitur ultricies blandit urna. Pellentesque ut augue mollis, lacinia dui non, rutrum justo. Nunc et odio dapibus, blandit leo eget, aliquet urna. Etiam lorem dolor, vehicula a purus in, fermentum congue diam. Integer vel urna nec turpis posuere tempor eu lacinia purus. Praesent mattis viverra lacus bibendum fringilla. Nulla commodo posuere ante, at cursus est rhoncus quis. In iaculis viverra neque in blandit. Pellentesque eleifend arcu diam, sed sodales ligula pharetra at. Morbi ac nisl adipiscing sem interdum convallis. </div>

<ul class="tools">
    <li>Add link</li>
    <li>Another item</li>
    <li>Another item</li>
</ul>