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 */
Fragen: Kopier-Button ohne zusätzliche "clipboard.js"
Zitat von Anne im Beitrag #6Hallo Wolfgang Habe es ausprobiert von creator Der kopiert auch ohne zu markieren
Hallo Anne, erstmal besten Dank fürs Ausprobieren! Wie meinst Du das? Wenn man den Kopier-Button anklickt, sollte ohne ein markieren der Codeliste die gesamte Codeliste gespeichert, bzw. in die Zwischenablage geschoben werden! Ist Dir noch ein Fehler in Beitrag#5 aufgefallen?
Das Skript in Beitrag#5 färbt noch zusätzlich den Hintergrund der Codeliste leicht grün ein, wenn kopiert wird! Ich hatte gedacht, hier noch mehr Aufmerksamkeit hinzulenken, was kopiert wird! Die Codeliste braucht also nicht markiert zu werden. Hatte mich da nicht genau genug ausgedrückt.
Hallo Anne, so wie es aussieht, hast Du ja das Gaia-Template (v3). In meinem Test-Forum funktioniert es allerdings! Interessant ist aber, dass der Button platziert wird, seine Mouseover-Funktion hat, aber nichts in die Zwischenablage geschoben wird! Es könnte auch sein, dass andere Skripte die Kopier-Funktion stören....
Frage: Wo und wie hast Du das Skript installiert? In der Fußzeile oder als Plugin unter "Untere Leiste - header? Oder hast Du durch das Testen das Skript vielleicht doppelt eingetragen?
1. Versuch: Vielleicht wird das Skript auch nicht richtig geladen! Das folgende Skript hat nur eine kleine Änderungen erhalten (Zeile 9+33), funktioniert jetzt aber in Kopf- & Fußzeile! Teste mal in beiden Zeile!
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 */
}); });
}); </script>
2. Versuch: Wenn andere Skripte die Kopierfunktion stören, könntest Du alle Plugins unter "Admin > Plugins > Home > Installierte Plugins > Forum ohne Plugins aufrufen" mit einem Klick zum Testen kurz ausschalten!