时间戳

首页 > 解决方案 > 如何从 jQuery contextMenu (2.x) 触发 ClipboardJS

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

问题描述

我正在使用 jQuery contextMenu(2.x) 并希望在按下一个菜单项时复制到剪贴板。我的问题是我找不到将上下文菜单项中的单击操作绑定到剪贴板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);
});

如果有人有想法会很棒...

标签： jquerycontextmenuclipboard

解决方案

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

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

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

我从上述文档中得到启发......

然后，将其添加到您的评论下//COPY Text here。
它只添加了 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());

为什么只在安全页面中？

推荐阅读