Context Menu's

Play around with context menus

by parkji

HTML

<div contextmenu="supermenu" contenteditable>
    <p class='ss'>Some text</p>
</div>
 
<menu type="context" id="supermenu">
    <menuitem label="Create link" onclick="linkIt()"></menuitem>
</menu>

CSS

body {
    padding: 50px;
    font-family: sans-serif;
}
p {
    margin-bottom: 10px;
}

JavaScript

(function($) {
   
})(jQuery);

function linkIt() {
    var linkHref = prompt('Please enter an address');
    var txt = '';
    if (window.getSelection)
    {
        txt = window.getSelection();
    }else if (document.getSelection)
    {
        txt = document.getSelection();
    }else if (document.selection){
        txt = document.selection.createRange().text;
    }

    var startOffset = txt.getRangeAt(0).startOffset;
    var endOffset = txt.getRangeAt(0).endOffset;
    var parentText = $(txt.focusNode.parentElement).text();
    
    var link = parentText.replace(
        parentText.substring(startOffset, endOffset),
        '<a href="' + linkHref + '">' + txt + '</a>'
    );
    
    $(txt.focusNode.parentElement).html(link);
}