Forum - Kopieren-Button zu Code-Block hinzufügen

An Aus

Forum → XOBOR-Foren und Homepages → Das neue Template Xobor (v6) → Kopieren-Button zu Code-Block hinzufügen

Hier sehen Sie Beitr�ge zu den einzelnen Themen

Seite 1 von 4 � Seite 1 2 3 4 Seite �

Themen-Einstellungen Thema

Thema abonnieren

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

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

Antworten

Like!

Wolfgang, Hans58 und Mato finden das Top!

Thema abonnieren Forum �bersicht Letzte Beitr�ge

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

Like!

Thema abonnieren Forum �bersicht Letzte Beitr�ge

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.

Antworten

Like!

Anne findet das Top!

Thema abonnieren Forum �bersicht Letzte Beitr�ge

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

Like!

Thema abonnieren Forum �bersicht Letzte Beitr�ge

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

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>
 