Jquery UI上下文菜单触发文本选择菜单

我正在使用jquery插件。我有几个动态生成的div，每个div都有一个pre标记。我想初始化插件一次，当用户突出显示文本并释放鼠标左键以触发位于鼠标位置的上下文菜单时

到目前为止，我已经能够触发菜单，但我似乎无法得到菜单的位置，以坚持鼠标一旦按钮被释放，如果用户右键单击，他们会得到2个上下文菜单

下面是我的例子

$("div.editor").contextmenu({
  delegate: "pre",
  menu: [
    {title: "Copy", cmd: "copy", uiIcon: "ui-icon-copy"},
    {title: "----"},
    {title: "More", children: [
        {title: "Sub 1", cmd: "sub1"},
        {title: "Sub 2", cmd: "sub1"}
        ]}
    ],
   select: function(event, ui) {
    alert("select " + ui.cmd + " on " + ui.target.text());
  }
});

$("pre").bind("mouseup",function(e){
     $("div.editor").contextmenu('open',$("pre"));
});

<div class="editor"><pre></pre></div>

$（“div.editor”）.contextmenu({
代表：“预备”，
菜单：[
{title:“Copy”，cmd:“Copy”，uiIcon:“ui icon Copy”}，
{标题：“---”}，
{标题：“更多”，儿童：[
{标题：“Sub 1”，命令：“Sub 1”}，
{标题：“Sub 2”，命令：“Sub 1”}
]}
],
选择：功能（事件、用户界面）{
警报（“在“+ui.target.text（）上选择“+ui.cmd+”）；
}
});
$（“pre”）.bind（“mouseup”，函数（e）{
$（“div.editor”）.contextmenu（'打开'，$（'预]）；
});

这只是一些示例代码，但它与我正在使用的非常相似。我们在每个div下都有一个表单，它有几个字段，我们想用pre标记中包含的大文本填充这些字段。并且可能有多达20个div.editor标记，每个标记都有自己的形式

关键是用户可以突出显示特定的单词或短语，并轻松地将其插入相应的表单字段。我可以使用高亮显示然后右键单击的方法，但是对于一天有数百个这样做的用户来说，这需要额外的时间

任何帮助都将不胜感激

---

再次感谢

我找到了一个解决方案，希望这能帮助其他可能想和我一样的人

因此，在定义上下文菜单时，必须添加位置。然后在mouseup上进行绑定以触发open方法。我使用extraData功能传入原始鼠标事件。这就是它在鼠标上而不是屏幕左上角的位置

$("pre").bind("mouseup",function(e){
            mytext = getSelectionHtml(), t = $(e.target), p = $('#' + t.prop('id'));

            if(mytext.length > 0){
                deselHTML();
                console.log(mytext + ' selected, calling open on the context menu. ' + $(p).prop('class'));
                $("div.editor").contextmenu('open',$(t),e);

            }
        });

然后在定义上下文菜单后，绑定到mouseup事件以获取所选文本。 我正在使用一些函数来获取所选文本和取消选择文本（即错误）

---

让我一天都很愉快非常感谢。

$("pre").bind("mouseup",function(e){
            mytext = getSelectionHtml(), t = $(e.target), p = $('#' + t.prop('id'));

            if(mytext.length > 0){
                deselHTML();
                console.log(mytext + ' selected, calling open on the context menu. ' + $(p).prop('class'));
                $("div.editor").contextmenu('open',$(t),e);

            }
        });