Montag, 4. Mai 2020
Ein Button, um Code-Snippets mit einem Klick in die Zwischenablage zu kopieren
Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.
Wie ich Sourcecode auf der Website darstelle, habe ich hier beschrieben. Wer die Code-Snippets verwenden will, kann das jeweilige Snippet mit Maus oder Tastatur markieren, und dann mittels Strg + C in die Zwischenablage kopieren. Fehler, z. B. nicht vollständiges Markieren, sind dabei nicht sicher auszuschließen, und führen bei der Verwendung der Snippets zu Fehlern, die dann evtl. nicht leicht nachvollziehbar sind.
Doch es geht eleganter: Ein Button, der alles mit einem Klick und mittels JavaScript erledigt.
Das Code-Tag wird dazu um eine ID "snippetx" erweitert, und ein Button-Tag wie in folgendem Beispiel eingefügt.
(Wenn mehrere Snippets auf einer Seite angeboten werden, muss das "x" in snippetx jeweils durch ein einzigartiges Zeichen ersetzt werden, z. B. snippet1, snippet2, snippet3 usw.)
<code tabindex="0" id="snippetx">
[Hier das zu kopierende Snippet …]
</code>
<button class="snippet" onclick="CopyToClipboard('snippetx')">In Zwischenablage kopieren</button>
Das JavaScript
Das Script kopiert das komplette Snippet in die Zwischenablage. In einer Alertbox wird der Erfolg bestätigt, und zusätzlich die ersten Zeichen des Snippets angezeigt, um sicher zu gehen, dass bei mehreren Code-Snippets auf der Seite auch das richtige kopiert wurde.
function CopyToClipboard(containerid) {
var res = document.getElementById(containerid).innerHTML;
res = res.substring(0, 20);
res = res.replace(/</g, "<");
res = res.replace(/>/g, ">");
res = res.replace(/\s/g, ' ');
if (document.selection) {
var range = document.body.createTextRange();
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById(containerid));
window.getSelection().addRange(range);
document.execCommand("copy");
window.getSelection().removeAllRanges();
alert("Snippet "+res+" … kopiert")
}
}
Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
2 Kommentare
Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.
Robert Kropp schrieb am Samstag, 27.06.20 19:03 Uhr:
Coole Funktionen,
lieben Dank für die Info.
Aber noch besser finde ich links" dark mode"
_L_S_ schrieb am Freitag, 29.10.21 11:55 Uhr:
Perfekt!!
Lange gesucht und hier gefunden. Ist verständlich UND funktioniert.