Копировать в буфер обмена с помощью Symfony - PullRequest
0 голосов
/ 26 октября 2018

входное значение, чтобы отразить значение во входном значении javascript, чтобы отразить значение во входном значении javascript, чтобы отразить значение во входном значении javascript, чтобы отразить значение в javascript

<div id="goodContent{{ entity.id}}" onclick="copyToClipboard();" style="display:none;">
                            {{ pdf_yolu }}
                        </div>
                        <div class="btn btn-default" id="clickCopy">Kopyala</div>


document.getElementById("clickCopy").onclick = function() {
            copyToClipboard(document.getElementById("goodContent{{ entity.id}}"));
        };

        function copyToClipboard(e) {
            var tempItem = document.createElement('input');

            tempItem.setAttribute('type','text');
            tempItem.setAttribute('display','none');

            let content = e;
            if (e instanceof HTMLElement) {
                content = e.innerHTML;
            }

            tempItem.setAttribute('value',content);
            document.body.appendChild(tempItem);

            tempItem.select();
            document.execCommand('Copy');

            tempItem.parentElement.removeChild(tempItem);
        }

1 Ответ

0 голосов
/ 26 октября 2018

Это не проблема Symfony, так как Symfony не выполняет свой собственный код в веб-браузерах, где вам нужно запустить функцию «копировать в буфер обмена». (Вы должны удалить тег Symfony из вашего вопроса.) Это полностью JavaScript.

Рассмотрим такую ​​библиотеку, как ClipboardJS . Я могу подтвердить, что его можно использовать в шаблонах внешнего интерфейса проекта на основе Symfony.


В моем случае у меня была таблица со многими строками, для которой 2-й столбец каждой строки можно было скопировать с помощью кнопки. Я хотел, чтобы кнопка появилась в первом столбце. Вот сценарий, который я написал:

Не берите в голову, я тоже использую другие библиотеки переднего плана, такие как sprintf, jQuery, jQuery UI, Bootstrap 4 и FontAwesome. Вы должны быть в состоянии приспособить это все же.

jQuery(document).ready(function($){

    $('table').find('tr.js-copyable').each(function(k, v){

        var $tr = $(v).first();
        if ($tr.length != 1) {
            return;
        }

        var $th = $tr.find('th').first();
        if ($th.length != 1) {
            return;
        }

        var $td = $tr.find('td').first();
        if ($td.length != 1) {
            return;
        }

        var value = $td.text();
        if (typeof value != "string" || (value = value.trim()).length < 1) {
            return;
        }

        var tdTooltip = function(text, icon){

            if (typeof text != "string" || (text = text.trim()).length < 1) {
                return;
            }

            if (typeof icon != "string" || (icon = icon.trim()).length < 1) {
                icon = "";
            }

            $td.tooltip('dispose');

            $td.tooltip({
                html: true,
                title: sprintf("<i class=\"fa %s\"></i><span>%s</span>", icon, text),
                trigger: "manual",
                placement: "left",
            });

            $td.tooltip('show');
            setTimeout(function(){
                $td.tooltip('hide');
            }, 2000);

        };

        var $copyButton = $('<button class="btn btn-info js-copy js-tooltip" title="Copy to clipboard"><i class="fa fa-copy"></i></button>');

        var clipboard = new ClipboardJS($copyButton[0], {
            text: function(trigger){
                $copyButton.tooltip('hide');
                return value;
            },
        });

        clipboard.on('success', function(e){
            tdTooltip("Copied!", "fa-check-circle");
        });

        clipboard.on('error', function(e){
            tdTooltip("Failed to copy.", "fa-times-circle");
        });

        $copyButton.appendTo($th);

    });

});

Ни один из вышеперечисленных не имеет никакого отношения к Symfony. Это все JavaScript и связанные библиотеки переднего плана.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...