Скопировать текст в буфер обмена в Ваадин 8 - PullRequest
Новая
       30

Скопировать текст в буфер обмена в Ваадин 8

1 голос
/ 10 мая 2019

Я хочу спросить, как правильно скопировать текст в буфер обмена в веб-приложении vaadin 8 java. Я нашел решение, которое работает в Chrome и IE, но не работает в Firefox.

Firefox всегда говорит об ошибке " document.execCommand ('cut' / 'copy') отклонен, поскольку он не был вызван из недолгого обработанного пользователем обработчика событий. " в консоли.

Единственный способ заставить Firefox копировать текст в буфер обмена с помощью какого-либо пользовательского обработчика событий (события щелчка или фокуса). Но мне не удалось создать или внедрить такой обработчик в компонент vaadin (например, Button или MenuItem).

Или в Firefox есть настройка / политика для преодоления этого поведения?

Итак, я хочу спросить, как заставить это работать.

Мое решение:

Определить вспомогательные функции javascript в my_ui.js: 

function copy_to_clipboard(elementId, text) {
    if (document.queryCommandSupported('copy')) {
        var e = document.getElementById(elementId);
        if (e != null) {
            e.value = text;
            e.select();
            document.execCommand('copy');
        }
    }
}

Включить зависимость javascript в vaadin. 

Page.getCurrent().addDependency(new Dependency(Type.JAVASCRIPT, "vaadin://my_ui.js"));

Создайте Label с содержимым HTML, поместите почти невидимую текстовую область в Label (требуется не менее 1x1px в Chrome). 

Label clipboardHelperLabel = new Label();
clipboardHelperLabel.setContentMode(ContentMode.HTML);
clipboardHelperLabel.setValue(
    "<textarea " +
        "id=\"clipboard-helper-id\"" +
        "style=\"width: 1px; height: 1px; border: 0px solid black; padding: 0px; margin: 0px;\" " +
    ">" +
    "</textarea>"
);

Определить вспомогательную функцию в Java. 

public static void copyToClipboard(String text) {
    String code = "copy_to_clipboard('clipboard-helper-id','" + text + "');";
    JavaScript.getCurrent().execute(code);
}

Определение MenuItem с действием в MenuBar в пользовательском интерфейсе. 

MenuBar toolbar = new MenuBar();
MenuItem copyToClipboardMenuItem = toolbar.addItem(
    "Copy to clipboard",
    e -> {
        String text = "Hello clipboard";
        copyToClipboard(text);
    }
);

Это решение отлично работает в Chrome и IE, мне нужно, чтобы оно работало и в Firefox.

1 Ответ

3 голосов
/ 10 мая 2019

Я не думаю, что есть какой-либо способ снять это ограничение в Firefox.

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

JavaScript.getCurrent().execute(
  "document.getElementById('button').addEventListener('click', function() {" +
    "copy_to_clipboard('clipboard-helper-id','" + text + "');" +
  "})");

РЕДАКТИРОВАТЬ: я заметил, что есть также дополнение для этой цели: https://vaadin.com/directory/component/jsclipboard-add-on/overview

...