Javascript 如何在选定文本上创建上下文菜单

我正在寻找一个解决方案，从contenteditable html为链接创建所选文本创建上下文菜单

工作流程： 基本上，用户可以编辑网页外的文本（div中的contenteditable=“true”），如果他们想添加指向所选文本的链接，他们必须使用上下文菜单，在其中他们可以用鼠标右键单击所选文本并从上下文菜单在输入框中键入URL，然后弹出，所选文本成为超链接

欣赏您的指导。

以演示为例，稍作改动，这是使用“contextmenu”事件的结果。现在您可以创建自己的函数了

if（！window.x）{
x={}；
}
x、 选择器={}；
x、 Selector.getSelected=函数（）{
var t=''；
if（window.getSelection）{
t=window.getSelection（）；
}else if（document.getSelection）{
t=document.getSelection（）；
}else if（文档选择）{
t=document.selection.createRange（）.text；
}
返回t；
}
var pageX；
var pageY；
$（文档）.ready（函数（）{
$（文档）.on（'contextmenu'，函数（ev）{
ev.preventDefault（）；
var selectedText=x.Selector.getSelected（）；
如果（已选择文本！=''）{
$（'ul.tools'）.css({
“左”：第x页，
“顶部”：第20页
}).fadeIn（200）；
}否则{
美元（'ul.tools'）。淡出（200）；
}
});
$（文档）。在（“单击”）上，函数（e）{
美元（'ul.tools'）。淡出（200）；
});
$（文档）.on（“mousedown”，函数（e）{
pageX=e.pageX；
pageY=e.pageY；
});
});
正文{
填充：60px 10px；
}
工具{
显示：无；
列表样式：无；
盒影：0px 0px 4px rgba（0,0,0,5）；
边框：实心1px#000；
位置：绝对位置；
背景：#fff；
填充：0；
}
李先生{
高度：20px；
保证金：5px；
填充：2px；
光标：指针；
}

虎口前庭。福吉亚·多洛先生。Mauris eleifend neque ac iaculis aliquet。《三部曲》中的努克·马莱苏达·尼西（Nunc malesuada nisi）。前庭毛里斯厄洛斯，各种各样的浮雕，佩伦茨克和努克。乌尔里氏箭毒。佩伦茨克和奥古斯·莫利斯、拉齐尼亚·杜伊诺、鲁特罗姆·胡斯托。努克和奥迪奥·达皮布斯，温文尔雅的利奥·埃吉特，阿利奎特·乌纳。花叶木通，花叶木通，发酵丛直径。整层楼都是临时性的。马蒂斯·维韦拉·拉库斯·比本杜姆·弗林利亚。这是一个很好的例子。在布兰迪特的iaculis viverra neque。直径为弧形的粗粒石粉。Morbi ac nisl在convallis中进行了扫描电镜检查。

添加链接
另一项
另一项
非常感谢，就是这个@安德烈·沃恩，不客气！如果可以，您可以选择此答案作为此问题的正确答案：）