Aller au contenu principal


Copy to Clipboard

Vous trouverez ci-dessous, la description en pas à pas des étapes successives à suivre pour placer dans vos pages un bloc de code que l'utilisateur pourra "copier-coller" en cliquant simplement sur un bouton de la page.

Ce bloc, qui est utilisé dans l'onglet ci-dessous, est présent dans de nombreuses pages du site. Pour comprendre le fonctionnement du copier-coller, consultez la page"copy to clipboard" de la section dev_web-jQuery du site (qui propose elle-aussi le copier-coller de code).

Billet créé le :
21 nov 2020

0. Les différentes étapes :

  1. Ajouter dans la page le bloc de contenu contenant le code à copier-coller ;

  2. Modifier le script js vu à la page "ajouter un script" ;

  3. Compléter le fichier CSS de votre thème ;

  4. Compléter le fichier "--.libraries.yml"  de votre thème.

1. le bloc de contenu

Pour cela :

  • aller sur la page "copy to clipboard" de ce site, puis dans l'onglet HTML, cliquer sur le bouton pour copier le code dans le presse-papier ;

  • ouvrez votre page en mode édition du contenu ;

  • créer  un  bloc personnalisé ;

  • passer en mode "source" ;

  • coller le contenu du presse-papier ;

  • supprimer toutes les parties en dehors de la balise <div class="clipWrap"> ;

  • saisissez le contenu que vous souhaitez offrir au copier-coller du visiteur dans la  balise  <pre> ;

  • enregistrer.

2. la modification du script

Dans la fonction    
       function (context, settings) {...}    
il suffit d'ajouter la portion de code qui figure dans l'onglet ci-dessous.

Cliquez sur le bouton pour copier le code dans le presse papier  
    
var clipboard0 = new ClipboardJS('#btn0');
clipboard0.on('success', function(e) {
$("#clip-dh-0").html('<span style="color:#9e2049ad;">
                   <strong>C\'est fait ;
                   </br>le code est dans le presse-papier
                   </strong></span>');
//console.log(e);
});
clipboard0.on('error', function(e) {
//console.log(e);
});

 

3. le complément au fichier CSS

Pour cela :

  • aller sur la page "copy to clipboard" dans l'onglet CSS. Cliquer sur le bouton pour copier le code dans le presse-papier ;

  • ouvrez le fichier CSS de votre thème, aller à la fin du fichier et coller le contenu du presse-papier ;

  • enregistrer votre fichier CSS.

4. Complément au fichier de librairie

Dans le fichier xxx.lbrairies.yml (où xxx représente le nom de votre thème), ajouter la ligne suivante dans la  la section js :

                 https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js: { type: external, minified: true }

dont le  rôle est d'appeler la bibliothèque (minimifiée) clipboard.js du serveur cdn : cloudflare.

Voici un extrait de la section JS de mon thème :

  js:
        https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js: { type: external, minified: true }
        js/dhv3.js: {}
  dependencies:
    ......

NB : penser à exécuter les étapes 4 - 5 et 6  vues à la page "ajouter un script" pour que votre modification soit visible.