Копировать / Вставить в JavaScript?

Question

Я знаю, что этот вопрос задавался уже миллион раз, но я не мог найти хорошее современное решение.

Я реализовал свое собственное меню, чтобы предоставить пользователю возможность вырезать, копировать и вставлять в мое WebApp. Но я не уверен, как на самом деле работать с буфером обмена в Firefox, IE, Safari / Chrome.

Спасибо за вашу помощь.

Answer 1

Я только что написал подробный технический пост в блоге на эту самую тему (я работаю на Lucidchart, и мы недавно сделали капитальный ремонт нашего буфера обмена). В сообщение включено эта скрипка , которая является рабочим примером копирования и вставки через Javascript.

Хорошая новость заключается в том, что этот пример дает вам рабочий код для установки / получения любых поддерживаемых типов данных буфера обмена всякий раз, когда пользователь использует горячую клавишу буфера обмена.

Плохая новость заключается в том, что использование собственного контекстного меню для копирования и вставки проблематично. Даже Google не может обойти это (попробуйте скопировать контекстное меню или вставить в Google Docs в Firefox). Вы сможете заставить его работать без особых проблем в IE. Это потому, что вы можете получить доступ к объекту clipboardData в любое время из Javascript через:

window.clipboardData

(Однако, если вы попытаетесь сделать это вне системного события вырезания, копирования или вставки, IE предложит пользователю предоставить разрешение буфера обмена веб-приложения.)

В Chrome вы можете создать расширение для Chrome, которое даст вашему веб-приложению разрешения на буфер обмена (это то, что мы делаем для Lucidchart). Затем для пользователей с установленным расширением вам просто нужно самостоятельно запустить системное событие, когда они нажимают на пункт меню:

document.execCommand('copy');

Похоже, что Firefox имеет некоторые опции , которые позволяют пользователям предоставлять разрешения определенным сайтам для доступа к буферу обмена, но я не пробовал ничего из этого лично.

Answer 2

ты пробовал: http://ericphan.info/development/cross-browser-copy-and-paste-with-jquery-copy/

UPDATE: ссылка недоступна, поэтому я копирую содержимое из кэша:

Сценарий

Я работал над проектом клиента для SSW, когда клиент сообщил об ошибке в веб-приложении.

Ошибка включала в себя динамически сгенерированную ссылку mailto, которая обновлялась при выборе нескольких сотрудников. Клиент сообщал об ошибке, когда он выбрал более 10 сотрудников по электронной почте. Его почтовый клиент Lotus Notes выдал сообщение об ошибке:

Ошибка при обработке аргументов командной строки

Проверяя это сам, я обнаружил, что Outlook 2007 может легко поддерживать электронную почту 30-40 сотрудников, прежде чем перестанет работать ссылка на почту. Причина

Оказывается, что спецификация mailto имеет ограничение, а почтовые клиенты также имеют ограничение. Lotus Notes обрабатывает только 240 символов в ссылке mailto, а другие современные почтовые клиенты, такие как Outlook 2007, поддерживают 2083 символа - максимальная длина URL

Это объясняет расхождение в тестировании. Исправление - JQuery на помощь

Поскольку это ограничение спецификации HTML, нам потребовалось другое решение для удовлетворения требования клиента: «Я хочу иметь возможность выбрать нескольких сотрудников и отправить всем им по электронной почте»

Мы могли бы создать форму электронной почты, которая использовала бы SMTP для отправки электронной почты, но клиент хотел использовать Lotus Notes в качестве своего почтового клиента.

В итоге мы изменили кнопку «электронная почта», чтобы скопировать все электронные письма (через запятую) в буфер обмена, и открыли новое окно электронной почты. Все, что нужно было сделать клиенту - нажать CTRL + V и вставить электронные письма в поле TO. Это было самое быстрое и наиболее экономичное решение, которое дало клиенту возможность использовать собственный почтовый клиент.

Существует плагин JQuery под названием jquery.copy, который обеспечивает кросс-браузерное копирование и вставку с использованием файла flash (swf). Это похоже на то, как работает подсветка синтаксиса в моем блоге.

После того, как вы ссылаетесь на файл jquery.copy.js, все, что вам нужно сделать, чтобы вставить данные в буфер обмена, выполнить следующее:

$.copy("some text to copy");

Красиво и просто;)

Примечание: вам может понадобиться изменить путь к SWF-файлу в jquery.copy.js, чтобы заставить его работать