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

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

addtocopy plugin

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

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

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

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

<span style="color: black;"><span style="color: #0000ff;">var</span> options = {htmlcopytxt: <span style="color: #a31515;">'&lt;br&gt;More: &lt;a href="'</span>+window.location.href+<span style="color: #a31515;">'"&gt;'</span>+window.location.href+<span style="color: #a31515;">'&lt;/a&gt;'</span>, minlen:25, addcopyfirst: false}
$.extend(options, usercopytxt);
<span style="color: #0000ff;">var</span> copy_sp = <span style="color: #0000ff;">document</span>.createElement(<span style="color: #a31515;">'span'</span>);
copy_sp.id = <span style="color: #a31515;">'ctrlcopy'</span>;
copy_sp.innerHTML = options.htmlcopytxt;</span>

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

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

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

<span style="color: black;">$(<span style="color: #0000ff;">this</span>).mousedown(function(){
$(<span style="color: #a31515;">'#ctrlcopy'</span>).remove();
});</span>

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

<span style="color: black;"><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">style</span><span style="color: #0000ff;">&gt;</span>
#ctrlcopy {
height:1px;
overflow:hidden;
position:absolute;
width:1px;
margin: 5px 0 0 -1px;
line-height:0;
opacity: 0;
}
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">style</span><span style="color: #0000ff;">&gt;</span></span>

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

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

<span style="color: black;">&lt;script type=<span style="color: #a31515;">"text/javascript"</span>&gt;
$(<span style="color: #0000ff;">function</span>(){
$(<span style="color: #a31515;">"#content"</span>).addtocopy({htmlcopytxt: <span style="color: #a31515;">'&lt;br&gt;Подробнее: &lt;a href="'</span>+window.location.href+<span style="color: #a31515;">'"&gt;'</span>+window.location.href+<span style="color: #a31515;">'&lt;/a&gt;'</span>, minlen:35, addcopyfirst: false});
});
&lt;/script&gt;</span>
Опции обрабатываемые плагином:

 

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

Пример: тут

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

Добавить комментарий

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

Закончите арифметическое действие * Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.