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 Betriebssystem MS Windows 10, 8.1, 8 und 7 - Tricks & Tipps MS Windows 10, 8.1, 8 und 7 - Fragen & Antworten �rger mit Ihrem PC? �rger mit dem PC - Vorbeugung und Hilfe �rger mit dem PC - 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 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:	78
Registriert seit:	17.10.2020

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Likes	61

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:	3186
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Likes	1097

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:	3186
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Likes	1097

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

YouTube-Videogalerie für das eigene Forum installieren! � � Infobox mit CSS - Wie kann ich das realisieren?

Seite 1 von 2 � Seite 1 2 Seite �

�hnliche Themen

Antworten

Letzter Beitrag

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: 108

Mitgliederliste - Code mit Filterung
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Anne 2 01.07.2023 18:23
Anne • Zugriffe: 152
Code Syntax-Highlighting
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Daishi 1 01.07.2022 17:33
Wolfgang • Zugriffe: 261
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: 715

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

25.07.2023 22:44
von

Wolfgang • Zugriffe: 1673

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: 3608

Textbausteine nebeneinander anordnen - Tabelle mit BB-Code
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Julia Ady Eden

19.05.2018 18:02
von

Wolfgang • Zugriffe: 2923

Samsung Galaxie S5 - Bildschirm-Kopie / Screenshot erstellen
Erstellt im Forum Tricks & Tipps f�r Smartphones und iPhones von Wolfgang 0 13.06.2015 20:21
Wolfgang • Zugriffe: 988
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: 2158

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: 85 €

141%