Quellcode oder Text in die Zwischenablage kopieren
Kopieren von Text oder Quellcode in die Zwischenablage mit clipboard.min.js
Sie möchten ihrem Besucher die Möglichkeit geben,mit nur einem Klick Text oder Quellcode in seine Zwischenablage zu kopieren. Den Text oder Quellcode kann man mit JavaScript in die Zwischenablage kopieren um ihn dann wieder in anderen Webseiten nutzen zu können.
Zum Beispiel kann man auf diese Weise eigene Bannergrafiken über einem Code-Schnipsel (den man z.B. in websiteX5 im Zusatz-Objekt "HTML-Code" einfügen kann) anzeigen. Der Vorteil: Sie können Ihren Banner jederzeit überarbeiten (Müssen aber immer die gleichen Abmaße verwenden, da diese im Quellcode festgehalten wurden) und es wird immer Ihre aktuelle Banner-Grafik auf der Benutzerseite angezeigt.
Hier ein Beispiel:
Ein Banner mit Abmessungen in Pixel: 320 x 80 mit Erleuterungen für die Nutzung im Zusatz-Qbjekt "HTML-Code" in Ihrem websiteX5-Projekt.
Um mehrere Copy-Buttons auf einer Seite verwenden zu können, muss man die Buttons nummerieren (btn1, btn2,...)
aber pro Seite muss nur einmal die JavaScript-Datei <clipboard.min.js> geladen werden.
In dem Script sollten nur die Rot markierten Textstellen bearbeitet bzw. angepasst werden.
<button class="btn1"> Quellcode kopieren </button>
<script src="https://www.domainname.de/data/clipboard.min.js"></script>
<script>
var clipboard = new ClipboardJS('.btn1', {
text: function () {
<!-- Text oder Quellcode, der in die Zwischenablage kopiert werden soll , nach ... return '... hier den Quellcode einfügen...'; -->
return '<a href="https://www.sgs-visual.de" target="_blank"><img src="https://www.sgs-visual.de/banner/banner 320x80.gif" alt="www.sgs-visual.de" /></a>';
<!-- Ab hier nichts mehr verändern ! -->
},
});
clipboard.on('success', function (e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
});
clipboard.on('error', function (e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
});
</script>
Die Banner-Grafik(en) sollten Sie in einem eigenen Ordner in der obersten Hirarchie Ihrer Website speichern. Hier (s. Quellcode oben ... https://www.sgs-visual.de/banner/banner 320x80.gif)
Die JavaScript-Datei <clipboard.min.js> können Sie (wie in meinem Fall in einem Ordner <data>) in einem eigenen Ordner speichern, Sie müssen nur den Speicherort (Ordnername) auch im Quellcode anpassen.
Wollen Sie mehrere Buttons auf einer Seite anzeigen, können Sie für den nächsten Button (btn2, btn3,...) den Zahlenwert entsprechend ändern und die Zeile <script src="../data/clipboard.min.js"></script> können Sie dann im nächsten Script im neuen Zusatz-Objekt "HTML-Code" herauslöschen
Und hier sehen Sie, wie Sie das innerhalb Ihres Projektes anzeigen können. Für die Banner-Grafik habe ich zum Anzeigen der Grafik das Zusatz-Objekt "Bild" in die Seite gezogen und direkt daneben, das oben beschriebene Script um den Copy-Button, mit dem Quellcode für diese Grafik anzuzeigen, im Zusatz-Objet "HTML-Code". Direkt über die beiden Zusatzt-Objekte habe ich einen erleuternden Text im Zusatz-Objekt "Text" eingefügt.
Beispiel
Um das Banner in der Größe 320 x 80 auf Ihrer Website anzeigen zu können, kopieren Sie sich den Quellcode, durch Klicken auf "Quellcode kopieren" in Ihre Zwischenablage.
Um das Banner in der Größe 200 x 150 auf Ihrer Website anzeigen zu können, kopieren Sie sich den Quellcode, durch Klicken auf "Quellcode kopieren" in Ihre Zwischenablage.
Script herunterladen
Sie können sich hier das Script herunterladen
farbiger Button
In folgendem Script kann man den Button farblich an die eigenen Bedürfnisse anpassen (siehe Beispiel unten).
Hierzu wird das Script um CSS erweitert.
Grün (kursiv) für das eigentliche Script, rot die Werte, die Sie ändern können (fett, wenn Sie mehrere Buttons verwenden möchten - Zahlenwerte "durchnummeriert" btn1, btn2, btn3 ... ) und zwischen */ und */ stehen die Erläuterungen, die sie auch weglöschen können, wenn Sie das Script verstanden haben.
<style>
.btn1
{
background-color: #516DEF; /* Hintergrundfarbe des Buttons (blau) */
border-radius: 5px; /* abgerundete Ecken */
border: 2px solid black; /* Rahmen in Pixelbreite und Farbe (schwarz) */
padding: 10px 15px; /* Innenabstand - oben und unten sowie links und rechts */
box-shadow: 5px 5px #A4A4A4; /* Schatten (hellgrau) */
text-align: center; /* Ausrichtung Text im Button (zentriert) */
font-family: Tahoma; /* Fontfamilie im Button */
color: #FFFFFF; /* Textfarbe im Button (weiss) */
font-size: 16px; /* Schriftgröße im Button */
transition: background-color 0.4s; /* Animierte Änderung der Eigenschaft background-color */
cursor: pointer; /* Mauszeiger als Pfeil */
}
.btn1:hover /* geänderte Werte für mouseover */
{
background-color: #318F4C; /* Neue Farbe bei mouseover (grün) */
border: 2px solid red; /* Rahmen in Pixelbreite und Farbe bei mouseover (rot) */
cursor: hand; /* Mauszeiger als Hand bei mouseover*/
}
</style>
Und hier wieder ein Beispiel (hier mit Script um einen Banner-Code zu kopieren - Mein altes Banner):
Sie können sich hier das Script für einen farbigen Button herunterladen
Revision 01 vom 07.08.2022 - Script um CSS innerhalb des Scriptes erweitert
