Seiteninhalte in die Zwischenablage legen (wglButtonCopyClipboard)

Mit wglButtonCopyClipboard lassen frei definierbare Attribute oder Texte der Seite in die Zwischenablage kopieren.

Über individuell platzierte Schaltflächen können sowohl Seitenbesucher als auch Redakteure komfortabel Werte kopieren – beispielsweise IDs, Texte oder andere Attribute.

Funktionsweise

Die Steuerung erfolgt über die CSS-Klasse 

wglButtonCopyClipboard in Kombination mit folgenden Attributen:

  • data-copyAttrClipboard 
    → Kopiert den Wert eines angegebenen Attributs (z. B. id )

  • data-copyTextClipboard="1"
    → Kopiert den sichtbaren Text des Elements

Beispiel 1: ID eines Akkordeons kopieren.

In diesem Szenario wird nur Redakteuren eine Schaltfläche bereitgestellt, mit der sie z. B. die ID eines Akkordeon-Containers für die Linkpflege kopieren können.

Javascript (design.js)

jQuery(document).ready(function(){

  .....

  /* Akkordeon-Header vorbereiten */

  jQuery('.accordionHeader').addClass('wglButtonCopyClipboard').attr('data-copyAttrClipboard', 'id');  

  /*Nur für Redakteure */
  if(typeof wEditor !== 'undefined'){

    /*Initialisieren*/
    if(typeof initButtonsCopyClipboard == 'function') initButtonsCopyClipboard();

  }

  ...

});

Beispiel 2: IBAN in eine Zwischenablage kopieren

Hier wird Seitenbesuchern ein Button angeboten, mit dem sie eine IBAN bequem kopieren können.

Die IBAN befindet sich in einem div mit der Klasse .iban .

Javascript (design.js)

jQuery(document).ready(function(){

  .....

  /* IBAN-Element vorbereiten */

  jQuery('.iban').addClass('wglButtonCopyClipboard').attr('data-copyTextClipboard', '1');  

  /*Nur für Seitenbesucher*/
  if(typeof wEditor === 'undefined'){

    /*Initialisieren der Buttons für die Zwischenablage */
    if(typeof initButtonsCopyClipboard == 'function') initButtonsCopyClipboard();

  }

  ...

});

Funktion initButtonsCopyClipboard

Diese Funktion übernimmt das eigentliche Kopieren in die Zwischenablage

Javascript (design.js)

////////////////////////////////////////////////////////////////
//
// Legt Informationen in die Zwischenablage (Clipboard)
//
////////////////////////////////////////////////////////////////

initButtonsCopyClipboard = function () {

  let cOs = jQuery('.wglButtonCopyClipboard');
  cOs.each(function () {
    let cO = jQuery(this);
    cO.on('click',function (e){
      e.preventDefault();
      if(navigator.clipboard !== undefined){
        const copyAttrToClipboard = cO.attr('data-copyAttrClipboard');
        const copyTextToClipboard = cO.attr('data-copyTextClipboard');
        var result = '';
        if(copyAttrToClipboard != null) result = cO.attr(copyAttrToClipboard);
        if(copyTextToClipboard != null) result = cO.text();
        if(copyAttrToClipboard != null) navigator.clipboard.writeText(result);
      }
    });
  });
};

Styling wglButtonCopyClipboard

Das folgende Beispiel definiert ein Icon vor dem Element.

Auszug aus der addional.scss

.wglButtonCopyClipboard:before {
  content:' ';
  border:1px solid red;
  position: absolute;
  left:-17px;
  top:-2px;
  box-sizing: border-box;
  padding: 0 !important;
  width: 18px;
  height: 18px;
  display: block;
  z-index: 1;
  border-radius: 9px !important;
  line-height: 0;
  cursor: pointer;
  white-space: nowrap;
  border-style: solid;
  border-width: var(--wBorderSize);
  border-color: #c9c9c9 #a3a3a3 #a3a3a3 #c9c9c9;
  background-color: #e0e0e0;
  background-image: linear-gradient(180deg, #EAEAEA 0%, #d6d6d6 100%);
}

Vorteile:

  • Flexible Nutzung für beliebige Inhalte oder Attribute
  • Einfache Integration über CSS-Klassen
  • Trennung von Redakteurs- und Besucherfunktionen möglich
  • Kein zusätzlicher HTML-Button notwendig
Zurück zur Übersicht