Kopieren-Button zu Code-Block hinzufügen

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages � Das neue Template Xobor (v6). � Kopieren-Button zu Code-Block hinzufügen

Seite 1 von 2 � Seite 1 2 Seite �

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News. Stellen Sie Ihr eigene Webseite vor. Betriebssystem MS Windows & andere Betriebssysteme Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps. MS Windows 11, 10, 8 und 7 - Fragen & Antworten. Linux, Ubuntu und andere Betriebssysteme. �rger mit dem PC, Laptop oder Tablet? �rger mit dem PC, Laptop oder Tablet - Vorbeugung und Hilfe? �rger mit dem PC, Laptop oder Tablet - Fragen & Antworten? Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten. XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! Das neue Template Xobor (v6). Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie. Wasserstoff - Energietr�ger der Zukunft. Die besten Links! Empfehlenswerte und interessante Links! Link - Suche. Verschiedenes Elektronik & Elektrotechnik - Fragen & Antworten Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones. Lob, Kritik & Verbesserungsvorschl�ge. Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit. Alles, was noch so �brig bleibt. Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel.

#1 | Kopieren-Button zu Code-Block hinzufügen datum

08.09.2021 20:38 (zuletzt bearbeitet: 12.09.2021 18:45)

creator

Informationen anzeigen

Beitr�ge:	80
Registriert seit:	17.10.2020

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Nicht angegeben
Likes	60

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:

JavaScript (unter Administration --> Layout --> Kopf- & Fußzeile --> Fußzeile):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<!-- Code kopieren -->
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>
<script>
(function() {
	var copyBtn = 'Kopieren';
	$('.code').after('<input class="xnonquoteable copy btn btn-secondary" type="button" value="' + copyBtn + '" style="cursor:pointer; margin-top:7px;">');
 
	var clipboard = null;
	var t = null;
	$('.codeblock .copy').on('click', function() {
		t = $(this);
 
		/* copy to clipboard */
		if (clipboard != null) clipboard.destroy();
		clipboard = new ClipboardJS('.copy', { target: function(trigger) { return trigger.previousElementSibling; } });
 
		/* display "copied" briefly */
		t.addClass("disabled").val('Kopiert').css({'pointer-events': 'none', 'color': '#fff', 'background': '#005000'});
		clipboard.on('success', function(e) {
			setTimeout(function() { t.removeClass("disabled").val(copyBtn).css({'pointer-events': 'auto', 'color': '', 'background': ''}); }, 3000);
			e.clearSelection();
		});
	});
})();
</script>
 

Schlie�en

JavaScript (unter Administration --> Farben & Einstellungen --> Eigenes Javascript):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<!-- Code kopieren -->
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>
<script>
(function() {
	var copyBtn = '<span class="xob xob-add pr-1"></span>Kopieren';
	$('.code').after('<button class="xnonquoteable copy btn btn-secondary btn-sm mt-1">' + copyBtn + '</button>');
 
	var clipboard = null;
	var t = null;
	$('.codeblock .copy').on('click', function() {
		t = $(this);
 
		/* copy to clipboard */
		if (clipboard != null) clipboard.destroy();
		clipboard = new ClipboardJS('.copy', { target: function(trigger) { return trigger.previousElementSibling; } });
 
		/* display "copied" briefly */
		t.addClass("disabled").html('<span class="xob xob-check-mark pr-1"></span> Kopiert').css('pointer-events', 'none');
		clipboard.on('success', function(e) {
			setTimeout(function() { t.removeClass("disabled").html(copyBtn).css('pointer-events', 'auto'); }, 3000);
			e.clearSelection();
		});
	});
})();
</script>
 

Schlie�en

Weitere Verbesserung für Code-Blocks:
Syntax-Highlighting: [Code] farbig darstellen

Wolfgang, Hans58 und Mato finden das Top!

Antworten

#2 | RE: Kopieren-Button zu Code-Block hinzufügen datum

12.09.2021 18:31

Funktioniert das auch für die Gaia Templates?

Antworten

#3 | RE: Kopieren-Button zu Code-Block hinzufügen datum

12.09.2021 18:45 (zuletzt bearbeitet: 12.09.2021 19:45)

Der Code für das Business-Theme funktioniert in allen Templates. Ich habe es gerade getestet und im Beitrag gekennzeichnet.

Anne findet das Top!

Antworten

#4 | RE: Kopieren-Button zu Code-Block hinzufügen datum

12.09.2021 22:51

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

Antworten

#5 | Kopier-Button ohne zusätzliche "clipboard.js - 10,2KB" datum

14.09.2021 19:02 (zuletzt bearbeitet: 17.09.2021 09:42)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3663
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1528

Kopier-Button ohne zusätzliche "clipboard.js - 10,2 KB"
Aktualisiert 19.09.21

Zitat von Anne im Beitrag #4
Es 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!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<!-- Code kopieren -->
<style>
.bbcode_code .copy {background:#ffffff; color:#000000; font-size:12px; width:150px !important; border:1px solid #383838; padding:2px 15px; margin-top: 15px; margin-left: 10px; cursor:pointer; display:block; opacity:0.4; }
.bbcode_code .copy:hover {background:#eeeeee;opacity:1.0;}
.bbcode_code .kopiert {background: #005000;  color: #ffffff; border:1px solid #383838; pointer-events: none; opacity: 1.0;}
</style>
 
<script>
window.addEventListener('load', function(){
 
 $('.bbcode_code .code').after('<input class="copy" type="button" value="Code kopieren">')
 
  $('.copy').on('click', function() {
    $(this).prev().each(function(event){
 
     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>
 

Schlie�en

Spoiler mit einem Klick öffnen und schließen!

PS:

Wer das Syntax-Highlighting nutzt, bitte updaten!

Bis dann und nochmal besten Dank an Creator
Wolfgang

Antworten

#6 | RE: Kopier-Button ohne zusätzliche "clipboard.js" datum

15.09.2021 10:37

Hallo Wolfgang
Habe es ausprobiert von creator
Der kopiert auch ohne zu markieren

Antworten

#7 | Fragen: Kopier-Button ohne zusätzliche "clipboard.js" datum

15.09.2021 14:40

Fragen: Kopier-Button ohne zusätzliche "clipboard.js"

Zitat von Anne im Beitrag #6
Hallo 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.

Wolfgang

Antworten

#8 | RE: Fragen: Kopier-Button ohne zusätzliche "clipboard.js" datum

16.09.2021 00:38

Ich hatte es falsch verstanden Wolfgang
hatte gedacht, man muss den Code trotzdem markieren und dann auf den Kopierknopf klicken

Wolfgang und Hans58 finden das Top!

Antworten

#9 | Fehlersuche: Kopier-Button ohne zusätzliche "clipboard.js - 10,2KB" datum

19.09.2021 12:47

Einen schönen Sonntag gewünscht

Bei mir kopiert der Code nicht.
Hab jetzt alles ausprobiert aber nichts

http://malibu-beach.xobor.de/t9f25059-Gesuchvorlage.html

Antworten

#10 | Fehlersuche: Kopier-Button ohne zusätzliche "clipboard.js - 10,2KB" datum

19.09.2021 17:28

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3663
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1528

Fehlersuche: Kopier-Button ohne zusätzliche "clipboard.js - 10,2KB"

Zitat von Anne im Beitrag #9
Einen schönen Sonntag gewünscht

Bei mir kopiert der den Code nicht.
Hab jetzt alles ausprobiert aber nichts

http://malibu-beach.xobor.de/t9f25059-Gesuchvorlage.html

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 oder als Plugin unter "?
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 !
Teste mal in beiden Zeile!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<!-- Code kopieren -->
<style>
.bbcode_code .copy {background:#ffffff; color:#000000; font-size:12px; width:150px !important; border:1px solid #383838; padding:2px 15px; margin-top: 15px; margin-left: 10px; cursor:pointer; display:block; opacity:0.4; }
.bbcode_code .copy:hover {background:#eeeeee;opacity:1.0;}
.bbcode_code .kopiert {background: #005000;  color: #ffffff; border:1px solid #383838; pointer-events: none; opacity: 1.0;}
</style>
 
<script>
window.addEventListener('load', function(){
 
 $('.bbcode_code .code').after('<input class="copy" type="button" value="Code kopieren">')
 
  $('.copy').on('click', function() {
    $(this).prev().each(function(event){
 
     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!

Bis dann und viel Erfolg beim Fehlersuchen!

Wolfgang

Daishi und bienchen finden das Top!

Antworten

Eigene HTML-Box im Xobor (v6)-Template einbauen? � � Infobox mit CSS - Wie kann ich das realisieren?

Seite 1 von 2 � Seite 1 2 Seite �

�hnliche Themen

Antworten

Letzter Beitrag

Profilvorlage HTML Code nimmt keine Bilder an
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Blackbox84 6 27.02.2025 23:33
Anne • Zugriffe: 231
Hilfe bei animierten Button (li, ul, etc.)
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von bienchen 11 07.11.2024 19:12
Anne • Zugriffe: 662

Versuche den HTML - Code zu teilen - Spoiler für die Iconbar
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von Daishi

15.02.2025 22:36
von

Anne • Zugriffe: 1333

Mein Projekt Teilen Button
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von Daishi 11 28.03.2024 21:18
Daishi • Zugriffe: 700

Neuer Foren-Code: Formularfelder mit "fieldset" und "legend"!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

25.09.2023 21:55
von

Wolfgang • Zugriffe: 567

Drucker-Button in der Bildergalerie!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 0 01.01.2020 11:02
Wolfgang • Zugriffe: 1022

Signatur wahlweise ausblenden - Mit Check-Button!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

21.05.2024 10:34
von

Wolfgang • Zugriffe: 2474

Spoiler-Veschachtelung mit Code und Pre
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 1 30.10.2017 20:16
Wolfgang • Zugriffe: 4029
Facebook-Button in die Homepage einbinden
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 5 03.06.2015 11:01
Winch • Zugriffe: 2429

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 45 €

17%

Kopier-Button ohne zusätzliche "clipboard.js - 10,2 KB"Aktualisiert 19.09.21

Fragen: Kopier-Button ohne zusätzliche "clipboard.js"

Fehlersuche: Kopier-Button ohne zusätzliche "clipboard.js - 10,2KB"

Kopier-Button ohne zusätzliche "clipboard.js - 10,2 KB"
Aktualisiert 19.09.21