jQuery
14 August 2010

jQuery плагин для добавления ссылок в буфер обмена

У многих из нас есть блоги, интернет-магазины, новостные сайты etc… Понятное дело стараемся опубликовывать оригинальный контент, но что же происходит после появления контента в интернетах, его конечно же просматривают и если он интересный, пользователи иногда обмениваются ссылкой на страничку с контентом. Новые переходы на нужную страницу и нам очень хорошо, а что если наш отличный текст просто взяли скопировали и скинули в аську\скайпик\почту — наш текст ушел, а перехода нету :(.

addtocopy plugin

Запретить копирование, это очень неправильно, весело и смешно ©, но мы ведь можем при копировании добавить в буфер обмена ссылку на наш сайтик. Рассмотрим как же нам это лучше сделать:



— Написать обработчик события для CTRL + C, «Копировать», придется работать с буфером обмена, а с ним не работается в современных браузерах.
— Использовать костыли в виде flash. Тоже не очень, +1 зависимость, да и в 10 версии для копирования в буфер нужен клик по интерфейсу флешки.
— А, что если будем смотреть что юзер выделяет курсором и аккуратно подсовывать нашу ссылку, хе хе хе, вот для реализации такого метода я и написал эту статью.

Работает все это как плагин для jQuery.

Создадим элемент на основе инициализации плагина, который будем подсовывать копипастеру.

var options = {htmlcopytxt: '<br>More: <a href="'+window.location.href+'">'+window.location.href+'</a>', minlen:25, addcopyfirst: false}
$.extend(options, usercopytxt);
var copy_sp = document.createElement('span');
copy_sp.id = 'ctrlcopy';
copy_sp.innerHTML = options.htmlcopytxt;



Если копипастер выделил текст, то добавляем нашу ссылку в выделенный текст.

$(this).mouseup(function(){
  if(window.getSelection){  //для хороших
    selected=window.getSelection();
    seltxt=selected.toString();
    nslct = selected.getRangeAt(0);
    seltxt = nslct.cloneRange();
    seltxt.collapse(false);
    seltxt.insertNode(copy_sp);
    nslct.setEndAfter(copy_sp);
    selected.removeAllRanges();
    selected.addRange(nslct);
  } else if(document.selection){  //для плохих
    selected = document.selection;
    nslct=selected.createRange();
    seltxt=nslct.text;
    seltxt=nslct.duplicate();
    seltxt.collapse(false);
    seltxt.pasteHTML(copy_sp.outerHTML);
    nslct.setEndPoint("EndToEnd",seltxt);
    nslct.select();
  }
});




При новом mousedown будем чистить старый копирайт-элемент со ссылкой.

$(this).mousedown(function(){
  $('#ctrlcopy').remove();
});



Естественно ссылка не должна быть видна, добавляем нужное оформление для нее:

<style>
  #ctrlcopy {
    height:1px;
    overflow:hidden;
    position:absolute;
    width:1px;
    margin: 5px 0 0 -1px;
    line-height:0;
    opacity: 0;
  }
</style>



Как пользоваться:

— Плагин: Скачать addtocopy

<script type="text/javascript">
  $(function(){
    $("#content").addtocopy({htmlcopytxt: '<br>Подробнее: <a href="'+window.location.href+'">'+window.location.href+'</a>', minlen:35, addcopyfirst: false});
  });
</script>



Опции обрабатываемые плагином:

Опция Описание
htmlcopytxt что добавлять к скопированному в буфер, принимает html
minlen минимальная длинна выделяемого текста, принимает int
addcopyfirst добавлять htmlcopytxt в начало буфера обмена или в конец, true/false


Пример: тут

Известные глюки:
В Опере текст выделяется с лева на право
В Firefox'e если addcopyfirst: true, то текст в первый раз не выделяется

+59
17.1k 169
Comments 49