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.

La page à réaliser est décrite en 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

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

Le code HTML

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

Le corps du code situé dans balise <div id=clipWrap> 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"> )

Le 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

Mots Clé