Aller au contenu principal


Copy to Clipboard

Ce billet résume les éléments clés qui permettent d'utiliser le plugin "clipboard" dans une page pour permettre le "copier-coller" d'un contenu de la page web pars le presse-papier de l'utilisateur.

Billet créé le :
18 nov 2020

La page à réaliser est construite à l'aide de 3 fichiers :

  • index.html pour le code html de la page  ;

  • index.js pour le javascript (interaction utilisateur)  ;

  • clipboard.css pour l'aspect visuel.
     

Les fichiers ( .. et une démo en direct)

Cliquez sur le bouton pour copier le code dans le presse papier
			
<!DOCTYPE html>
<html lang="fr">
   <head>
       <meta charset="UTF-8">
       <link rel="stylesheet" href="clipboard.css" />
       <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
       <script src="index.js"></script>
       <title>Copy to Clipboard</title>
       <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
   <body>
       <div id="clipWrap">
           <div class="clipHead">
               <div class="clip-input-group">
                   <span id="clip-dh-0">
                       Cliquez sur le bouton pour copier le code<br /> dans le presse papier
                   </span>
                   <span class="clip-input-group-button">
                       <button class="btn" id="btn0" type="button" data-clipboard-demo="" data-clipboard-target="#foo">
                           <!--img id="btn" class="clippy" src="../images/clippy.svg" width="13" alt="Copy to clipboard"-->
                            Copy to Clipboard
                       </button>
                   </span>
               </div>
           </div>
               <pre class="clipSnippet content">
                   <code id="foo" >
   la ligne 1
   la ligne 2
   la ligne 3
                   </code>
               </pre>
       </div>
   </body>
</html>   
Cliquez sur le bouton pour copier le code dans le presse papier
 
$(function(){
   <!-- Instancier Clipboard -->
   var clipboard0 = new ClipboardJS('#btn0');
   clipboard0.on('success', function(e) {
    //console.log(e);
    //console.log ("copied : action : " + e.action + " le texte : " +e.text );
    $("#clip-dh-0").html('<span style="color:red"><strong>C\'est fait ; le code est dans le presse-papier </strong></span>');
    $("#btn0").html('copied');
       });
   clipboard0.on('error', function(e) {
       //console.log(e);
       });
   });    
Cliquez sur le bouton pour copier le code dans le presse papier
.wrap {
   margin: 0 auto 90px;
   max-width: 540px;
   padding: 0 15px;
}
.example {
   position: relative;
   margin: 15px 0 0;
   padding: 20px 20px 20px;
   background-color: #fff;
   border-radius: 4px 4px 0 0;
   border: 1px solid #ddd;
   z-index: 2;
}
.input-group {
   display: table;
}
.input-group-button {
   width: 1%;
   vertical-align: middle;
}
.input-group input, .input-group-button {
   display: table-cell;
}
.input-group-button:last-child .btn {
   margin-left: -1px;
}
.input-group input:last-child, .input-group-button:last-child .btn {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
}
.input-group-button:last-child .btn {
   margin-left: -1px;
}
.input-group input:last-child, .input-group-button:last-child .btn {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
}
.clippy {
   margin-top: -3px;
   position: relative;
   top: 3px;
}
img {
   border: 0;
}
.btn {
   position: relative;
   display: inline-block;
   padding: 6px 12px;
   font-size: 13px;
   font-weight: 700;
   line-height: 20px;
   color: #333;
   white-space: nowrap;
   vertical-align: middle;
   cursor: pointer;
   background-color:#eee;
   background-image: linear-gradient(#fcfcfc,#eee);
   border: 1px solid #d5d5d5;
   border-radius: 3px;
   border-top-left-radius: 3px;
   border-bottom-left-radius: 3px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -webkit-appearance: none;
}
.snippet {
   background: #f8f8f8;
   border-radius: 4px;
   border: 1px solid #ddd;
   clear: both;
   top: -20px;
   padding: 20px 0 0;
}

Cliquez ici pour afficher ces fichiers dans une fenêtre surgissante

Analyse du code HTML

Dans l'entête (balise "header"), on retrouve les appels aux bibliothèques jQuery, jQuery-ui et clipboard téléchargés sur le CDN "cdnjs" et l'appel de notre script index.js

Le corps du code (balise "body") est contenu dans balise <div id=clipWrap> et se découpe en 2 parties :

  1. une zone de "titre" de classe "clipHead" qui contient le texte du "titre" (identifié "clip-dh-0")  et le bouton "Copy to Clipboard ."

Le code  <button class="btn" id="btn0" type="button" data-clipboard-demo="" data-clipboard-target="#foo"> est fondamental pour l'exécution du script. Seules les valeurs des paramètres id et data-clipbord-target peuvent être modifiées.

  • id="btn0" est utile si l'on souhaite copier-coller des parties de code situées dans différentes zone de la page

  • la valeur du paramètre  data-clipbord-target est l'identifiant de la zone de code à copier-coller

  1. une zone identifiée "foo" contenant le texte proposé à la copie entre les balises <pre></pre>

Notez que le texte "Copy to Clipboard" peut être remplacé par une image (cf  : <img id="btn0" class ="clippy" src="../images/clippy.svg" width="13" alt="Copy to clipboard"> )

Analyse du script

Par $(function(){....}), on applique le jQuery sur le DOM de la page. puis on crée une instance de l'objet ClipboardJS sur l'élément bouton identifié "btn0" avec le code  clipboard0 = new ClipboardJS('#btn0').

pour copier-coller 2, 3  portions de codes (btn1, btn2...) on instanciera 2, 3 objets (clipboard1 = new ClipboardJS('#btn1'), clipboard2 = new ClipboardJS('#btn2')...)

Enfin grâce à la méthode on de l'objet clipboard, on réagit aux réponses "success"ou "error" rendue par le plugin lors d'un appui sur le bouton.

Ici, en cas de succès ( le code est copié dans le presse-papier), on informe l'utilisateur par 2 actions :

  • $("#clip-dh-0").html('...') remplace le texte du titre grâce à  jQuery et l'identification id=clip-dh-0 de l'élément;

  • $("#btn0").html('copied') remplace le texte du bouton par "copied", merci encore jQuery.

information complémentaire disponible en cliquant ici

Pour de multiples portions de code,  on devra utiliser également id=clip-dh-1, id=clip-dh-2 ... pour distinguer les différentes portions