Copy code

INTRODUCTION A COPY CODE

Code:

<div class="bloc">
   Je suis un code, copiez-moi !
</div>

Mise en situation

Copy code ajoute un bouton aux blocs de code pour copier le contenu d'un simple clique.
Ce plugin est installé dans le Blank Theme.

Installation    

Installer le script
Copiez le code suivant dans une nouvelle page et cochez sur toutes les pages.

Astuce Ligne 3 et 4, vous pouvez personnaliser le texte du bouton "copier" et la mention "copié".

Code:

$.getScript('https://cdn.jsdelivr.net/clipboard.js/1.5.16/clipboard.min.js', function() {
  window.fae_copyCode = {
    copy : 'Copier',
    copied : '<i class="bi bi-check2"></i> Copié'
  };
 
  $(function() {
    $('code').closest('.codebox').attr('id','codeBox');
    
    var a = $('.codebox dt').not('.spoiler > dt, .hidecode > dt'),
        i = 0,
        j = a.length;
 
    if (a[0]) {
      $('head').append('<style type="text/css">.fae_copy-code{float:right;cursor:pointer;}.fae_copy-code:hover{text-decoration:underline}</style>');
 
      for (; i < j; i++) {
        a[i].insertAdjacentHTML('beforeend', '<div class="copyCode">' + fae_copyCode.copy + '</div>');
      }
 
      new Clipboard('.copyCode',{
        target : function (copy) {
          if (copy.innerHTML != fae_copyCode.copied) {
            return $(copy).closest('.codebox').find('.cont_code, code')[0];
          }
        }
 
      }).on('success', function (e) {
        var copy = e.trigger;
 
        if (copy.innerHTML != fae_copyCode.copied) {
          copy.innerHTML = fae_copyCode.copied;
          copy.className += ' copiedCode';
 
          window.setTimeout(function() {
            copy.innerHTML = fae_copyCode.copy;
            copy.className = copy.className.replace('copiedCode', '');
          }, 2000);
        }
 
        e.clearSelection();
      });
    }
 
  });
});

CSS
Les class .copyCode et .copiedCode vous permettront de modifier l'apparence du bouton.

Code:

.codebox {
    position: relative;
}

/* bouton "copier" */
.copyCode {
    font-size: 12px;
    font-weight: normal;
    position: absolute;
    top: 5px;
    right: 13px;
    font-family: monospace;
    text-transform: uppercase;
    cursor: pointer;
}

/* mention "copié" */
.copiedCode { }