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

Question

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

    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对于上述...

然后，在您的评论下添加此内容//复制此处的文本。
仅添加了 3 行。
(为了清楚起见，我仅复制相关部分)

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

上面创建了一个 Clipboard.js 实例，触发一次点击，因此插件完成其工作...然后销毁该实例。

演示于CodePen .

<小时/>或者，在 安全页面中，您可以简单地忘记 Clipboard.js 并使用:

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

Why only in a secure page?