文本选择上的 Jquery UI-ContextMenu 触发菜单答案

【问题标题】：Jquery UI-ContextMenu trigger menu on text selection文本选择上的 Jquery UI-ContextMenu 触发菜单
【发布时间】：2016-06-24 07:09:14
【问题描述】：

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

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

这里以我的fiddle为例

$("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 下都有一个表单，其中有几个字段，我们希望用包含在 pre 标记中的大文本来填充。并且可能有多达 20 个 div.editor 标签，每个标签都有自己的形式。

重点是用户可以突出显示特定的单词或短语，并轻松将其插入到适当的表单字段中。我可以让它只使用突出显示然后右键单击方法，但是对于每天有数百个这样的用户来说，这需要额外的时间。

任何帮助将不胜感激。

再次感谢

【问题讨论】：

标签： jquery jquery-ui-contextmenu

【解决方案1】：

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

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

 $("div.editor").contextmenu({
            delegate: "pre",
            position: function(event, ui){
               return {my: "left top", at: "left bottom", of: ui.extraData, collision: "fit"}; 
            }, 
...});

然后你定义的上下文菜单绑定到 mouseup 事件后，就可以得到选中的文本了。我正在使用一些函数来获取选定的文本并取消选择文本（IE 错误）

$("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);

            }
        });

【讨论】：

让我开心！谢谢！