Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

ZeroClipboard: еще один способ копирования

Дата:17.02.16 в 11:23
Раздел: 

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

ZeroClipboard: еще один способ копирования

Существует огромное множество Интернет-ресурсов, откуда люди черпают информацию для своих повседневных дел, учебы или работы. Иногда найденную информацию необходимо куда-нибудь записать или сохранить. Ответ любого юзера будет очевиден: Ctrl+С, а потом Ctrl+V и проблема решена. Но довольно часто в тексте попадается такой участок, на котором довольно трудно орудовать курсором мыши для выделения текста, и комбинация Ctrl+А тоже не поможет, потому что выделит очень много лишнего. Выходом может стать функциональное решение в виде кнопки, которая будет добавлять в буфер обмена нужный фрагмент. Довольно часто такой прием используют для копирования кода, так как его перенос как раз и вызывает больше всего проблем.

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

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

Установка

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

  • ZeroClipboard.js – файл с кодом JavaScript.
  • ZeroClipboard.swf – сама флеш-плоскость, которая обеспечивает копирование информации в буфер обмена.

После того, как необходимые файлы скачены и скопированы в определенную директиву вашего сайта, требуется подключить js-код ZeroClipboard. Для этого достаточно вставить следующую строку кода

HTML

<script type="text/javascript" src="ZeroClipboard.js"></script>

После чего необходимо прописать процедуру инициализации для скрипта

HTML

<script type="text/javascript">
	var clip = new ZeroClipboard.Client();
    	clip.setText('Текст для буфера обмена');
    	clip.glue('id');
</script>

Теперь считаю нужным расписать каждую строчку приведенной инициализации:

  • var clip = new ZeroClipboard.Client(); - отвечает за создания новой системной единицы, которая будет осуществлять копирование для определенного фрагмента текста.
  • clip.setText('Текст для буфера обмена'); - служит контейнером для текста, который будет помещен в буфер обмена;
  • clip.glue(' id '); - указывается идентификатор кнопки, при нажатии на которую будет осуществлено копирование.

Необходимо отметить тот факт, что для корректной работы плагина по указанной схеме флеш-файл ZeroClipboard.swf должен находиться в той же директиве, что и документ с HTML-кодом, в противном случае код инициализации нужно модифицировать и добавить такую запись

JavaScript

ZeroClipboard.setMoviePath('path-to/ZeroClipboard.swf');

На практике работа плагина должна выглядеть где-то так

Пример работы плагина ZeroClipboard

Настройки

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

  • setText - служит контейнером для текста, который будет помещен в буфер обмена.
  • setHandCursor – позволяет определить формат курсора при наведении на элемент. Если эта функция предопределена, как правдивая (значение true), то курсор примет форму руки, в противном случае (значение false) он останется в стандартном виде стрелки.
  • glue - указывается идентификатор кнопки, при нажатии на которую будет осуществлено копирование.
  • reposition – позволяет адаптировать положения флеш-плоскости при изменении размеров основных блоков или окна браузера в целом. Чаще всего эта функция вставляется в обработчик события window.onresize.
  • hide – прячет функциональную кнопку для копирования текста.
  • show – обратное по своим свойствам команде hide, то есть делает доступной для визуализации кнопки, а также в автоматическом режиме переопределяет позицию флеш-плоскости, по принципу работы функции reposition ().
  • setCSSEffects – контролирует эффекты hover и active.
  • getHTML – позволяет создавать флеш-элемент не связанный с определенным блоком, а вполне как новый и независимый элемент.
  • addEventListener – отвечает за создания обработчиков для необходим функций. Стоит отметить, что через запятую сначала указывается название события, а следом за ним - название функции.
  • destroy – отменяет все эффекты, вызванные работой плагина.

В случае использования функции addEventListener для создания обработчика нужно помнить о следующих событиях, а также о их предназначении

  • onLoad – работа функции начнется только после окончательно загрузки флеш-платформы.
  • onMouseOver – процесс начинается в момент наведения курсора на объект.
  • onMouseOut – процесс начинается в момент ухода курсора с периметра объекта.
  • onMouseDown – отвечает за клик мышью на флеш-элементом.
  • onMouseUp – реагирует в момент отпускания кнопки мыши после клика на флеш-элемент.
  • onComplete – функция начнет работу после удачного копирования информации в буфер обмена.

Подводя итог

В завершении хотелось бы отметить полезность плагина при потребности автоматического копирования локальных объемов текста. Такой прием весьма полезен при разнообразных сайтах-переводчиках, информационных ресурсах о программировании и прочих сфер деятельности человека, которая нуждается в преобразовании одного способа сообщения информации в другой.

Оценок: 4 (средняя 4.3 из 5)

Оценка: 
Понравилась статья? Расскажите о ней друзьям: