Button zum Kopieren des Body in HTML Formatierter Form

  • Hallo Leute,

    ihr wisst, wann man strg+c drückt auf einer Webseite, dann kopiert man die ganze Webseite samt Formatierung (im Gegensatz zum unformatierten Text) in die Zwischenablage.

    Diese kann man dann zum Beispiel im Mail Client oder in Word einfügen mit strg+v.

    Nun möchte ich extra ein Button dafür erstellen überhalb der Seite, der das mit einem Button macht.

    Ich habe es teilweise geschafft, aber nur wird der Text nicht formatiert und die CSS wird buchstäblich mitgenommen.

    Der Code sieht beispielsweise so aus.



    HTML
    1. <!doctype html><html xmlns="http://www.w3.org/1999/xhtml"><head><script>function copyToClipboard(element){var $temp = $("<input>");$("body").append($temp);$temp.val($(element).text()).select();document.execCommand("copy");$temp.remove();}</script><link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><center><button onclick="copyToClipboard('.body1')">Copy TEXT 1</button></center><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=0.7, minimum-scale=0.7, user-scalable=no"><meta http-equiv="X-UA-Compatible" content="IE=edge" /><title>Test</title> <style type="text/css">.p1 {font: 30px arial, sans-serif;}</style></head><body class="body1"><p class="p1">This is a text in the main body of this file!</p></body></html>



    Aber wenn ich den Text jetzt über den Button kopiere, habe ich zwei nicht gewollte Sachen.

    1.) Die Formatierung wird strikt und einfach ignoriert, d.h. wenn ich den Inhalt in Word eintrage, dann wird keine Formatierung angewendet, sondern als reiner Text geschrieben. Wenn ich aber manuell kopiere, dann wird die Formatierung mit übernommen.

    2.) Obwohl der Script, sowie der Button nicht im Body der Email ist, wird "Copy TEXT 1Test .p1 {font: 30px arial, sans-serif;}This is a text in the main body of this file!" angezeigt, also somit die Buttonaufschrift. Es sollte normalerweise nicht so sein. Sondern nur "This is a text in the main body of this file!" kopiert werden mit der Formatierung, dass 30px, arial/sans-serif ist.

  • Nochmal der Code:


    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <script>
    function copyToClipboard(element){
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).text()).select();
    document.execCommand("copy");
    $temp.remove();
    }

    </script>
    <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <center>
    <button onclick="copyToClipboard('.body1')">Copy TEXT 1</button>
    </center>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=0.7, minimum-scale=0.7, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Test</title> 
    <style type="text/css">
    .p1 {font: 30px arial, sans-serif;}

    </style>
    </head>


    <body class="body1">

    <p class="p1">This is a text in the main body of this file!</p>
    </body>
    </html>

  • Du möchtest also wenn du den Button drückst das alles Kopiert wird ? Oder nur der Text den man sehen kann .

    Also mit html oder ohne html ?

    Ich möchte, wenn ich auf den Button drücke, den Inhalt des Bodys in formatierter Form kopieren.

    So als würdest du jetzt diese Webseite in deinem Browser aufrufen, alles markieren und dann kopieren. (STRG+A und danach STRG+C).

    Jetzt gerade kopiert der Script nur den Text "Copy TEXT 1Test .p1 {font: 30px arial, sans-serif;}This is a text in the main body of this file!" anstatt den Text so zu kopieren: "This is a text in the main body of this file!" und es fehlt die Formatierung beim Kopieren, sprich: Wenn ich das kopierte in Word oder den Email Client eingebe wird der Text ohne Formatierung kopiert, als reiner Text.

  • https://www.w3schools.com/html…sp?filename=tryhtml_intro



    Einfach den Code hier kopieren und ausführen und dann kopieren und du weißt besser was ich meine.

    Ehrlich gesagt nee.

    Gibt ja nur 2 möglichkeiten. Alles zu kopieren ,so wie es im Quelltext steht . Oder nur das kopieren wie man es im Browser sieht.


    Teste mal das und sag mal ob da was richtiges dabei ist

    Im exeComander ist jetzt nur der erste textarea drinne

    Dann sehen wir mal weiter.

    Verstehe zwar nicht warum der <script> Inhalt beim 2ten angezeigt wird ,aber da komme ich auch noch hinter

  • Ich habe es getestet.


    1.) Du hast mit dem Kopieren mir zwei Möglichkeiten gegeben:

    Entweder A: Text mit Buchstäblich alles drin ohne dass die Style Elemente ausgewertet werden.

    ODER B: Text wird als Rein-Text angezeit.


    2.) Die Scripte zeigen in den Textboxen auch noch den Script an unten.


    3.) Leider wird das nicht in die Zwischenablage kopiert und kann dann nicht benutzt werden um es in Word oder in einem E-Mail Client reinzukopieren (mit den Formatierungen. Siehe dafür bitte das Bild an, dass ich angehäng habe von einem Beispiel des Inhaltes in Word kopiert mit allen Möglichkeiten.

    Dateien

    • Word.jpg

      (64,42 kB, 4 Mal heruntergeladen, zuletzt: )
  • EIgentlich hätte ich eine bessere Idee, aber habe keine Ahnung wie das gehen soll.


    Wenn ich die jeweilige Seite aufrufe und den Button klicke, dann soll er die Tastenkombination STRG+A und STRG+C ausführen, was aber bedeuten würde, dass ich dann den Button wieder mitkopiert hätte, was auch leider nicht wieder mein Zweck erfüllt.

  • Bei mein Beispiel kannst du auch die 2 möglichkeit in den comander Kopieren , das wäre kein Problem,das sollte ja auch nur Beispiel sein damit ich weiß was du genau haben willst. Warum er da aber das Script mit kopiert das verstehe ich auch nicht weil es ist ja nicht mal im Body drinne. Aber gut das könnte man anders ausschließen.


    Die idee mit den Button ,das er die beiden Tasten drücken soll wäre auch nee idee. Ob es funktioniert weiß ich nicht .Werde es mal testen. Das problem sehe ich gerade da drinn 2 Tasten auf einmal zu drücken. Ich werde es auch mal testen ,mal kucken ob ich das hinbekomme.


    Aber du sagtest das mein 2 Beispiel ,ohne script text richtig wäre ? Vieleicht finde ich da noch was ,ohne das er das Script mit kopiert ?


    Also wie man strag + a zusammen klicken kann mit click() oder anders weiß ich nicht. Hintereinander ist das kein problem,aberdie werden nicht als zusammen gedrückt erkannt.Kein Plan wie das geht ,fals es überhaupt geht.Vieleicht kann dir da ja noch wer anders helfen.

    Ansonsten sollte man mein 2 tes Beispiel nehmen und die <scripte> da noch raus nehmen

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von basti1012 ()


  • Ich weiß, dass man mit deinem erwähnten Beispiel die Scripte kopieren kann, aber leider ohne Formatierung.

    Das Problem mit dem Body habe ich auch leider überhaupt nicht verstanden. Ob man vielleicht einen Doctype einschalten sollte oder was?


    Du musst nicht unbedingt eine Button dafür haben, damit er die Webseite kopiert, das bloße Aufrufen der Seite würde schon genügen. Aber ich glaube kaum, dass man einen Javascript ohne Button der sich automatisch in die Zwischenablage nistet kaum reinprogrammieren kann oder das sich die Browser (leider sogar Zurecht) sich dumm stellen, weil das eine Sicherheitslücke wäre. Ich weiß nicht, wie Windows damit umgeht, Sachen in die Zwischenablage zu kopieren, aber stell dir mal vor, plötzlich bei Seitenaufruf wären in deiner Zwischenablage 4GB an Daten. Das könnte so einige PC "vielleicht" abstürzen.


    Bei deinem 2 Beispiel stimmt der Text (außer der Script wird noch übernommen), jedoch wird die Formatierung ignoriert (Arial, 30px).

    Ich habe ja ein Bild von Word hochgeladen, wo du sehen kannst, wie die Resultate sind und wie ich gern hätte.


    Ich bin mir auch nicht sicher, ob man STRG+A zusammen drücken kann, weil das wäre auch wieder eine Sicherheitslücke, weil dann könnte man ein Button machen, der bestimmte Kombinationen triggert und Beispielsweise Systemdatei löscht.


    Ich glaube, dass die Button Idee bis jetzt die beste ist. Irgendwie muss man richtext oder formatierten text kopieren können oder hat das damit zutun, dass der Betriebssystem das nur machen kann.

  • Zitat


    wie man strag + a zusammen klicken kann mit click() oder anders

    Das wird hier besprochen:

    https://stackoverflow.com/ques…s-to-the-next-input-field

    Zitat
    The .trigger() function cannot be used to mimic native browser events, such as clicking on a file input box or an anchor tag. This is because, there is no event handler attached using jQuery's event system that corresponds to these events.

    There is a plug-in for this though called jquery-simulate to handle this. That being said the tab key changing focus is actually a default action in the web browser. Firing a browsers native event does not mean it will do it's default action, as the documentation for KeyboardEvents mentions:

    Note that manually firing an event does not generate the default action associated with that event. For example, manually firing a key event does not cause that letter to appear in a focused text input. In the case of UI events, this is important for security reasons, as it prevents scripts from simulating user actions that interact with the browser itself.
  • <html>

    <head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <script>

    function copy(selector){

    var $temp = $("<div>");

    $("body").append($temp);

    $temp.attr("contenteditable", true)

    .html($(selector).html()).select()

    .on("focus", function() { document.execCommand('selectAll',false,null) })

    .focus();

    document.execCommand("copy");

    $temp.remove();

    }

    </script>



    <style>



    </style>



    </head>



    <body>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


    <p id="demo" style="font-size: 50px"><b>Bold text</b> and <u>underlined text</u>.</p>

    <button onclick="copy('#demo')">Copy Keeping Format</button>


    <div id="target" contentEditable="true"></div>



    </body>



    </html>

  • Ich habe es in mein Beispiel eingefügt, aber wieder haben wir hier ein Problem. Inline Styles wird <b> oder underline werden übernommen.

    Aber wenn ich die Styles wie Pixelgröße 50 px einfüge sei es external oder inline mit style, dann wird durch das Klicken des Button nur bold und underline übernommen. Siehe das Bild für die Ergebnisse.

    Dateien

    • word.jpg

      (50,55 kB, 0 Mal heruntergeladen)
  • Also wenn ich das richtig verstehe,komme ich mit meinen versuchen nicht an das gewünschte resultat.

    Mit den "simulate" Script sollte es gehen ?

    Dann muß man das vieleicht mal versuchen.


    Buty1973 . Ich verstehe immer noch nicht was du genau kopiert haben willst.


    Wenn da ein "rotes hallo in der größe von 30pixel steht, soll das genau so kopiert werden ,aber ohne den quelltext zu sehen ?

    Dann kann man ja nur den Quelltex kopieren und den auch wieder als html() ausgeben und nicht als text().

    Wenn das rote hallo nur als hallo und ohne farbe und größe gespeichert werden soll dann muß man ja das sichtbare kopieren und als text() wieder ausgeben.


    Ich habe noch nee idee. Man liest den ganzen Inhalt aus ung geht mit einer Schleife durch alle TAGS.

    Bei jeden Tag muß man den style auslesen und als style="" in den TAG mit speicher.

    Ich glaube gerade das ich doch wieder falsch denke.8o

  • Hallo, ich glaube ich habe mich kaum gründlich ausgedrückt.


    Ich habe eine Produktseite, die mir dynamische unsere Produkte ausgibt. Natürlich mit CSS und für die dynamischen Inhalte mit PHP.

    Okay. Die Seite ist auch alles gut und schön und ich wollte jetzt noch ein Cooles Feature programmieren.

    Ein Button, der genau das gleiche tun soll, als wenn man die Seite manuell oder mit der Tastenkombination (STRG+A und STRG+C) kopieren soll.


    Der Inhalt wird später entweder in Word oder Email Client der Wahl eingefügt. Und manuell oder mit der Tastenkombination funktioniert alles perfekt.


    Aber ich wollte mit die Tastenkombination ersparen und das alles damit bewerkstelligen kann indem man einfach in ein Button drück und gut ist.




    Und hier kommt schon das Problem, was ich und du haben um das Problem zu lösen:


    Die Styles , die wenn man manuell kopiert,werden übernommen, werden mit dem Button nicht übernommen und das habe ich ja auch in der Bilddatei Word.jpg dir ja gezeigt und auch gezeigt habe ich dir, was ich erreichen will, bitte schaue dir das dritte Beispiel an.


    Und hier ist nochmal ein Beispiel, was ich will, bitte schaue dir das letze Beispiel an:


    <p id="demo" style="font-size: 50px"><b>Bold text</b> and <u>underlined text</u>.</p>



    Dieser Text sollte vom Browser verarbeitet werden und sollte so aussehen wie bsp1.jpg.

    Und jetzt gibt es drei Szenairen:


    1.) Manuell kopieren und man hat genau mit allen Styles alles. Alles okay. Aber braucht die Tastenkombination.

    2.) Über den Button kopieren :

    a.) Der Text und der Quellcode und der Script werden rein buchstäblich kopiert. Wenn ich das in Word eingebe, dann steht das so buchstäblich drin ohne das mit dem HTML Prozessor vearbeitet wurde.

    b.) Der Text wird nur als Text übernommen, die ganzen Styles werden ignoriert. Wenn ich das in Word eingebe, dann habe ich keine Styles, die ich aber brauchen.




    Hoffe ihr habt es jetzt verstanden.



    Und was ich haben will ist folgendes:


    Ich möchte auf den Button drücken und der ganze Inhalt des Body soll so kopiert werden, wie im Browser dargestellt (oder wenn ich das manuell oder über die Tastenkombination kopieren würde.)



    Mfg Buty1973

    Dateien

    • bsp1.jpg

      (19,38 kB, 0 Mal heruntergeladen)
  • Und Schriftgröße und Schriftart sollten auch übernommen werden, halt das gleiche wenn man manuell kopiert.

  • Wenn ich jetzt diese Seite kopiere ( strg + C ) und das im normalen html document einfüge wird das so übernommen.

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


    Das ist ja auch nur zur hälfte richtig ,weil farben übernimmt e auch nicht alle und größen auch nicht.

    Im Word oder Email Client sieht das dann auch wieder anders aus .

    Vieleicht ist das von browser zu browser auch wieder anders



    EDIT

    Teste das mal und füge den Kopierten Text mal bei word oder so ein ,ob er das so übernommen hat.

    Ich habe da nix zum testen

    http://sebastian1012.bplaced.n…e-august2018-2/test1.php#

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von basti1012 ()

  • Hi basti,


    ich habe es ausgetestet, aber ich glaube kaum, dass irgend jemand mich verstanden hat. Der Button soll einfach nur das gleiche tun, als ob die Seite manuell kopieren würde. Egal ich finde schon eine Lösung:


    https://superuser.com/question…ocument-in-microsoft-word


    https://jsfiddle.net/zhen4baz/103/



    Ich bin ziemlich nahe an der Lösung. Wenn man das Beispiel ausführ und man fügt beim Css extra noch ein, dass ein bestimmter Fontsize: 50px ist und kopiert in Word ein, dann wird das übernommen. Ich muss mal noch dabei Ausschau halten, ob alles funktiort.