Ein Code muss in Beiträgen erst manuell markiert und kopiert werden. Das ist vor allem bei einem längerem Code aufwendig. Abhilfe schafft ein Button, mit welchem sich der Code sofort kopieren lässt.
Die Funktion kann mit folgendem Code eingebunden werden:
Es gibt aber glaube auch sowas wie select all da braucht man das dann nur anklicken und schon ist es kopiert aber es funktioniert habe es gerade eben auch ausprobiert coole Sache
Kopier-Button ohne zusätzliche "clipboard.js - 10,2 KB" Aktualisiert 19.09.21
Zitat von Anne im Beitrag #4Es gibt glaube ich auch sowas wie select all da braucht man nur anklicken und schon ist es kopiert aber es funktioniert habe es gerade eben ausprobiert coole Sache
Hallo Anne, habe Deine Idee aufgegriffen und versucht das Skript zu minimieren!
Das Skript hat so gut wie alle vorangegangenen Funktionen und kommt jetzt ohne "clipboard.js" aus! Die JavaScript-Datei "clipboard.js" hat schon eine beachtliche Größe von "10,2KB"! Sie braucht jetzt nicht mehr zusätzlich geladen zu werden!
Habe die CSS herausgeführt, um den Button gut anpassen zu können.
Im Standard(v1) funktioniert jetzt das Mouseover für den Button ohne größere Eintragungen!
Hinzugekommen ist eine farblicher Hintergrund während des Kopierens und eine veränderbare Transparenz für den Kopier-Button!
Funktioniert gleichermaßen in allen Templates!
Das komplette Skript kommt für die Templates (v1-4) in die Fußzeile" oder besser als PIugin in "Untere Leiste - header"
Fürs neue Xobor (v6) in Eigenes Javascript!
Wichtig! In Zeile 22 wird die Hintergrundfarbe beim Kopieren bestimmt! Nutzt man das Syntax-Highlighting, kann es notwendig sein den "CSS-Fix" zu erweitern!
var range = document.createRange(); range.selectNode(this); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); document.execCommand("copy"); window.getSelection().removeAllRanges(); $(this).next().addClass('kopiert').val('Code kopiert'); $('pre',this).css({'background-color':'#d9d8ce'}); /* Hintergrundfarbe beim Kopieren */
setTimeout(function(){ $('.copy').removeClass('kopiert copy').addClass('copy').val('Code kopieren') $('pre').css('background-color','') },3000); /* Zeit für die Kopier-Animation */