ZeroClipboard в Symfony и jQuery


Столкнулся с задачей, на первый взгляд простой: копирование определенной информации, по нажатию кнопки на страничке, в clipboard(буфер обмена) для дальнейшего Ctrl+V. Есть куча вариантов и библиотек, вплоть до использования ClipboardAPI. Хотелось быстро и без костылей. Остановился на популярной либе ZeroClipboard. В итоге, всё действительно получилось просто. Но так как не нашел толкового и простого мануала в этих ваших интернетах и stackoverflow меня тоже не выручил, когда столкнулся с небольшими трудностями в реализации.

В общем, рецепт прост.

  1. Можно добавить пакет используя composer или просто скачать архив с файлами библиотеки, тут как удобнее.
  2. Добавляете ZeroClipboard.js через config и assetic механизм или
    asset('js/ZeroClipboard.js')
  3. Важный момент тут. Какбэ нам говорят сразу, что если вы используете фрэймворк с front controller, вам прийдется ручками указывать, где лежит клип-файл.
  4. Как мы это обойдем? Легко! (sarcasm) После подключения jQuery и перед остальными скриптами в базовом темплэйте
    script type="text/javascript"> var pathToZeroClipboardSWF = "{{ asset('js/ZeroClipboard.swf') }}"
  5. В вашем js файле перед jQuery кодом:
    ZeroClipboard.config( { swfPath: pathToZeroClipboardSWF } );
  6. Чтобы кнопка начала работать
    var clipboardBtn = new ZeroClipboard( $('#Btn'));

В доках доходчиво, но на англ. описан процесс дальнейшей настройки и работы с clipboardBtn.
Для моей задачи достаточно было запихнуть строку, которая будет скопирована, в дата атрибут(data-clipboard-text) самой кнопки.

<a class="btn" id="Btn" data-clipboard-text="Текст который будет скопирован">Поделиться</a>

Оставьте комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.