Comment ajouter des informations supplémentaires au texte Web copié

Question

Certains des sites web d'utiliser un javascript service de Tynt qui ajoute du texte à copié le contenu.

Si vous copiez du texte à partir d'un site à l'aide de ce et puis collez vous obtenez un lien vers le contenu original au bas du texte.

Tynt également une trace de ce qu'il se passe. C'est une astuce bien fait.

Leur script pour faire ce qui est impressionnant, plutôt que d'essayer de manipuler le presse-papiers (qui ne les anciennes versions d'IE qui leur permet de travailler par défaut et qui doit toujours être éteint) ils manipulent la sélection actuelle.

Ainsi, lorsque vous sélectionnez un bloc de texte, le contenu supplémentaire est ajouté comme un caché <div> inclus dans votre sélection. Lorsque vous collez le style supplémentaire est ignoré et le lien s'affiche.

C'est en fait assez facile à faire avec de simples blocs de texte, mais un cauchemar quand on considère toutes les sélections possibles à travers le complexe HTML dans les différents navigateurs.

Je suis le développement d'une application web - je ne veux pas que quiconque soit en mesure de connaître le contenu copié et je voudrais des infos supplémentaires pour contenir quelque chose contextuelle, plutôt que de simplement un lien. Tynt du service n'est pas vraiment approprié dans ce cas.

Personne ne sait d'une bibliothèque javascript open source (peut-être un jQuery plug in ou similaire) qui fournit des fonctionnalités similaires, mais qui n'a pas l'exposer interne les données de l'application?

Answer 1

Il y a deux principales façons d'ajouter des informations supplémentaires à la copie de texte web.

1. La manipulation de la sélection

L'idée est de regarder pour l' copy event, puis ajouter un conteneur caché avec nos informations supplémentaires à l' dom, et étendre la sélection.
Cette méthode est une adaptation de cet article par c.bavota. Vérifiez également jitbit's version pour des cas plus complexes.

• Compatibilité avec les navigateurs: Tous les principaux navigateurs, IE > 8.
• Démo: jsFiddle démo.
• Code Javascript:

    function addLink() {
        //Get the selected text and append the extra info
        var selection = window.getSelection(),
            pagelink = '

2. La manipulation de la presse-papiers

L'idée est de regarder le
et de modifier directement les données du presse-papiers. Ceci est possible en utilisant l'
de la propriété. Notez que cette propriété est disponible dans tous les principaux navigateurs en 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); ; copy event méthode n'est disponible que sur IE.

• Compatibilité avec les navigateurs: IE > 4.
• Démo: jsFiddle démo.
• Code Javascript:

clipboardData

Answer 2

La version la plus courte pour jQuery que j'ai testée et qui fonctionne est la suivante:

 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);
});
 

Answer 3

Aussi une solution un peu plus courte:

 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;
} );