如何从 jQuery contextMenu (2.x) 触发 ClipboardJS

Question

我正在使用 jQuery contextMenu(2.x) 并希望在按下一个菜单项时复制到剪贴板。我的问题是我找不到将上下文菜单项中的单击操作绑定到 clipboardJS 的方法（我认为在这里使用它可能很好）。所以我不知道如何触发剪贴板复制。

    jQuery.contextMenu({
    selector: '.context-menu-one',
    events: {

        show: function (options) {
            console.log('show Menu');
            //self.clipboard = new ClipboardJS('.li');         
        },
        hide: function (options) {
            console.log('hide Menu');
            //self.clipboard.destroy();          
        }
    },
    build: function ($trigger, e) {
        // this callback is executed every time the menu is to be shown
        // its results are destroyed every time the menu is hidden
        // e is the original contextmenu event, containing e.pageX and e.pageY (amongst other data)
        return {
            callback: function (key, options) {

                if (key === "item-one") {
                    alert('item-one');
                } else if (key === "copy") {
                    //COPY Text here
                }

            },
            items: {
                "item1": {
                    name: "item-one",
                    icon: "edit"
                },
                "copy": {
                    name: "copy",
                    icon: "fa-beer"
                },
                "sep1": "---------",
                "quit": {
                    name: "Quit",
                    icon: function ($element, key, item) {
                        return 'context-menu-icon context-menu-icon-quit';
                    }
                }
            }
        };
    }
});
var clipboard = new ClipboardJS('.context-menu-one'); //HOW-TO TRIGGER?
clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);
});
clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});

如果有人有想法就太好了...

Answer 1

您使用的两个插件可能有冲突...但我找到了解决方法。

首先，像这样定义剪贴板选项（避免重复）：

var clipbardOptions = {
  target: function(trigger) {
    return trigger;
  }
};

我从 the documentation 那里获得了上述灵感...

然后，将此添加到您的评论下方 //COPY Text here。
仅添加了 3 行。
（为了清晰起见，我只复制了相关部分）

var clipboard = new ClipboardJS(e.target, clipbardOptions);
$(e.target).trigger("click");
clipboard.destroy();

上面是创建一个 Clipboard.js 实例，触发点击，所以插件完成它的工作...然后销毁实例。

演示在 CodePen.

或者，在 secure 页面中，您可以简单地忘记 Clipboard.js 并使用：

navigator.clipboard.writeText($(e.target).text());

Why only in a secure page?

如何从 jQuery contextMenu (2.x) 触发 ClipboardJS

How-to trigger ClipboardJS from jQuery contextMenu (2.x)

clipboard

jquery

contextmenu