Как вызвать ClipboardJS из jQuery contextMenu (2.x) - PullRequest
Новая
       26

Как вызвать ClipboardJS из jQuery contextMenu (2.x)

3 голосов
/ 11 марта 2019

Я использую jQuery contextMenu (2.x) и хотел бы скопировать в буфер обмена при нажатии одного пункта меню. Моя проблема в том, что я не нахожу способ привязать действие click из Item контекстного меню к 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);
});

Было бы здорово, если у кого-то есть идея ...

1 Ответ

0 голосов
/ 11 марта 2019

Вы используете два плагина, которые могут конфликтовать ... Но я нашел обходной путь.

Сначала определите параметры буфера обмена следующим образом (чтобы не повторяться): 

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

Почему только на защищенной странице?

...