Как добавить дополнительную информацию в скопированный веб-текст

Некоторые веб-сайты теперь используют службу JavaScript из Tynt, которая добавляет текст в скопированный контент.

Если вы скопируете текст с сайта, используя его, а затем вставьте, вы получите ссылку на исходное содержимое в нижней части текста.

Tynt также отслеживает это, когда это происходит. Это хороший трюк.

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

Поэтому, когда вы выбираете блок текста, дополнительный контент добавляется как скрытый <div>, включенный в ваш выбор. Когда вы вставляете дополнительный стиль, игнорируется и появляется дополнительная ссылка.

На самом деле это довольно легко сделать с помощью простых блоков текста, но это кошмар, когда вы рассматриваете все возможные варианты в сложном HTML в разных браузерах.

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

Кто-нибудь знает о библиотеке JavaScript с открытым исходным кодом (возможно, подключен JQuery или аналогичный), который обеспечивает аналогичную функциональность, но не раскрывает внутренние данные приложения?

Ответы

Ответ 1

Существует два основных способа добавления дополнительной информации в скопированный веб-текст.

1. Манипулирование выбором

Идея состоит в том, чтобы следить за copy event, а затем добавить скрытый контейнер с нашей дополнительной информацией в dom и расширить его выбор.
Этот метод адаптирован из этой статьи c.bavota. Проверьте также версию jitbit для более сложного случая.

  • Совместимость с браузером: все основные браузеры, IE > 8.
  • Демо: jsFiddle demo.
  • Код Javascript:

    function addLink() {
        //Get the selected text and append the extra info
        var selection = window.getSelection(),
            pagelink = '<br /><br /> Read more at: ' + document.location.href,
            copytext = selection + pagelink,
            newdiv = document.createElement('div');

        //hide the newly created container
        newdiv.style.position = 'absolute';
        newdiv.style.left = '-99999px';

        //insert the container, fill it with the extended text, and define the new selection
        document.body.appendChild(newdiv);
        newdiv.innerHTML = copytext;
        selection.selectAllChildren(newdiv);

        window.setTimeout(function () {
            document.body.removeChild(newdiv);
        }, 100);
    }

    document.addEventListener('copy', addLink);

2. Манипулирование буфером обмена

Идея состоит в том, чтобы смотреть copy event и напрямую изменять данные буфера обмена. Это возможно с помощью свойства clipboardData. Обратите внимание, что это свойство доступно во всех основных браузерах в read-only; метод setData доступен только в IE.

  • Совместимость с браузером: IE > 4.
  • Демо: jsFiddle demo.
  • Код Javascript:

    function addLink(event) {
        event.preventDefault();

        var pagelink = '\n\n Read more at: ' + document.location.href,
            copytext =  window.getSelection() + pagelink;

        if (window.clipboardData) {
            window.clipboardData.setData('Text', copytext);
        }
    }

    document.addEventListener('copy', addLink);

Ответ 2

Самая короткая версия для jQuery, которую я тестировал и работает:

jQuery(document).on('copy', function(e)
{
  var sel = window.getSelection();
  var copyFooter = 
        "<br /><br /> Source: <a href='" + document.location.href + "'>" + document.location.href + "</a><br />© YourSite";
  var copyHolder = $('<div>', {html: sel+copyFooter, style: {position: 'absolute', left: '-99999px'}});
  $('body').append(copyHolder);
  sel.selectAllChildren( copyHolder[0] );
  window.setTimeout(function() {
      copyHolder.remove();
  },0);
});

Ответ 3

Вот плагин в jquery, чтобы сделать это https://github.com/niklasvh/jquery.plugin.clipboard Из проекта readme "Этот script изменяет содержимое выделенного фрагмента перед вызовом копии, в результате чего скопированный выбор отличается от выбранного пользователем.

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

Выпущено по лицензии MIT "

Ответ 4

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

function addLink() {
    //Get the selected text and append the extra info
    var selection = window.getSelection(),
        pagelink = '<br /><br /> Read more at: ' + document.location.href,
        copytext = selection + pagelink,
        newdiv = document.createElement('div');
    var range = selection.getRange(0);

    //hide the newly created container
    newdiv.style.position = 'absolute';
    newdiv.style.left = '-99999px';

    //insert the container, fill it with the extended text, and define the new selection
    document.body.appendChild(newdiv);
    newdiv.innerHTML = copytext;
    selection.selectAllChildren(newdiv);

    window.setTimeout(function () {
        document.body.removeChild(newdiv);
        selection.removeAllRanges();
        selection.addRange(range);
    }, 100);
}

document.addEventListener('copy', addLink);

Ответ 5

Также немного более короткое решение:

jQuery( document ).ready( function( $ )
    {
    function addLink()
    {
    var sel = window.getSelection();
    var pagelink = "<br /><br /> Source: <a href='" + document.location.href + "'>" + document.location.href + "</a><br />© text is here";
    var div = $( '<div>', {style: {position: 'absolute', left: '-99999px'}, html: sel + pagelink} );
    $( 'body' ).append( div );
    sel.selectAllChildren( div[0] );
    div.remove();
    }



document.oncopy = addLink;
} );