Button zum Kopieren des Body in HTML Formatierter Form

Buty1973 · 25. August 2018

<html>

<head>

function CopyToClipboard(element) {

var doc = document

, text = doc.getElementById(element)

, range, selection;

if (doc.body.createTextRange)

{

range = doc.body.createTextRange();

range.moveToElementText(text);

range.select();

}

else if (window.getSelection)

{

selection = window.getSelection();

range = doc.createRange();

range.selectNodeContents(text);

selection.removeAllRanges();

selection.addRange(range);

}

document.execCommand('copy');

window.getSelection().removeAllRanges();

document.getElementById("btn").value="Copied";

}

</script>

<style>

i {font-size: 50px}

</style>

</head>

<body>

<i>Hello</i> world!

</div>

</body>

</html>

Buty1973 · 25. August 2018

Damit wäre mein Problem so gut wie gelöst.

basti1012 · 25. August 2018

was ist hier mit

http://sebastian1012.bplaced.n…august2018-2/copytext.php

Da wird alles kopiert mit größe und farbe und co

Aber könntest auch recht haben vieleicht verstehe ich es heute wirklich nicht mehr

basti1012 · 25. August 2018

Zitat von Sempervivum

Mit meinem Posting #11 wollte ich vor allem auf den Ansatz mit der Simulation von Strg+a Strg+c hinaus, was laut dem Zitat bei Stackoverflow keinen Erfolg verspricht.

Wie hast du das den verstanden ?

Ich verstehe das so das normaler click() versuch keine Chance hat 2 Buttons auf einmal zu klicken. Aber mit den simulate Script könnte es gehen ? Oder funktioniert das auch nicht ? Ich glaube ich habe heute mal wieder Suppe im Kopf und verstehe nur die hälfte.

Diese ganze Kopiererei hat doch bestimmt auch was mit den Programm zu tun wo man es wieder einfügt. Wenn ich beim letzten post von mir das Script den Text Kopieren ,und in ein Textdocument einfüge ,ist es klar das keine Formatierungen mit kommen. Füge ich es in ein Word Document oder Exel Document ein ,wird Farbe und größe mit übernommen.

Oder sehe ich das wieder Falsch

Buty1973 · 25. August 2018

Zitat von basti1012

Wie hast du das den verstanden ?

Ich verstehe das so das normaler click() versuch keine Chance hat 2 Buttons auf einmal zu klicken. Aber mit den simulate Script könnte es gehen ? Oder funktioniert das auch nicht ? Ich glaube ich habe heute mal wieder Suppe im Kopf und verstehe nur die hälfte.

Diese ganze Kopiererei hat doch bestimmt auch was mit den Programm zu tun wo man es wieder einfügt. Wenn ich beim letzten post von mir das Script den Text Kopieren ,und in ein Textdocument einfüge ,ist es klar das keine Formatierungen mit kommen. Füge ich es in ein Word Document oder Exel Document ein ,wird Farbe und größe mit übernommen.

Oder sehe ich das wieder Falsch

Alles anzeigen

Basti mit dem letzen Script gerade eben wurde das Problem gelöst. Ich weiß, dass immer der Client, in dem man es einfügt, es selbst interpretiert, die Seite habe ich extra für unseren Firmeninternen Email Client gemacht. Aber ich möchte nicht assozial sein und der Gemeinde, die mir geholfen hat, hilfreich sein den Quellcode für mein Problem geben. Es ist gelöst, nur der Copy Button wird kopiert, aber wahrscheinlich werde ich das lösen. Hier der Code:

Einfach folgendes in Head Bereich eintragen:

Code

<script> 
function CopyToClipboard(element) {


var doc = document
, text = doc.getElementById(element)
, range, selection;


if (doc.body.createTextRange) {
range = doc.body.createTextRange();
range.moveToElementText(text);
range.select();} 


    else if (window.getSelection){
selection = window.getSelection();        
range = doc.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);  }
document.execCommand('copy');
window.getSelection().removeAllRanges();
document.getElementById("btn").value="Copied";}
</script>

<input id="btn" onclick="CopyToClipboard('body1')" type="button" value="Copy"></input>

</head>
<body id="body1">

Alles anzeigen

Nun wirst du sehen, dass deine Webseite, wenn du den Copy Button drückst und dann in Word oder dein Email Client der Wahl einträgst mit Formatierung eingefügt wird. Natürlich kann beim Einfügen ein Buggy verhalten entstehen, weil es viele Html Prozessoren gibt, die nicht alles unterstützen und co. Aber das muss du immer wieder testen.

Wichtig: Body muss man eine ID zuweisen, in meinem Fall war das body1.

Ich danke für deine Hilfe Basti. Problem wurde gelöst.

Sempervivum · 25. August 2018

Zitat

Body muss man eine ID zuweisen, in meinem Fall war das body1.

Geht auch ohne: document.querySelector("body")

Buty1973 · 25. August 2018

Hey ich habe eine bessere Lösung gefunden. Ich habe einen Wrapper mit ID=wrap1 eingefügt und somit erreiche ich, dass nicht der copy mitkopiert wird. Also mein Problem wurde gelöst.

Ich weiß leider kaum irgendwas über JS, nur html, css und php.

document.querySelector("body") was das machen soll, davon habe ich keine Ahnung.

Der Code sieht so aus :

Code

<script> 
function CopyToClipboard(element) {

        var doc = document
        , text = doc.getElementById(element)
        , range, selection;
    
    if (doc.body.createTextRange)
    {
        range = doc.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } 
    
    else if (window.getSelection)
    {
        selection = window.getSelection();        
        range = doc.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
     }
    document.execCommand('copy');
    window.getSelection().removeAllRanges();
    document.getElementById("btn").value="Copied";
}

</script>

<input id="btn" onclick="CopyToClipboard('wrap1')" type="button" value="Copy"></input>



</head>
<body>
<wrapper id="wrap1">

Alles anzeigen

Buty1973 · 25. August 2018

Und bei einer responsive Seite wird die aktuelle respositiät kopiert. Also wenn ihr die Seite auf dem Smartphone öffnet und copy drück, dann wird es genauso in der zwischenablage gespeichert. Und hier fange sehr viele vorteile für mich an.

Arne Drews · 25. August 2018

Mir fällt kein einziger Nutzen dazu ein, aber wenn es Dich glücklich macht, freue ich mich für Dich...

basti1012 · 25. August 2018

Zitat von Buty1973

Code

<input id="btn" onclick="CopyToClipboard('wrap1')" type="button" value="Copy"></input>

Das </input> ist hier nicht nötig weil es ein inline Element ist .

ein <button> brauch aber wieder beides ( <button>Klick</button> )

Button zum Kopieren des Body in HTML Formatierter Form

Jetzt mitmachen!

Teilen