Beiträge von Buty1973

  • Button zum Kopieren des Body in HTML Formatierter Form

    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 :


  • Button zum Kopieren des Body in HTML Formatierter Form

    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:



    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. :D

  • Button zum Kopieren des Body in HTML Formatierter Form

    <html>

    <head>

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

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



    <style>

    i {font-size: 50px}

    </style>

    </head>

    <body>



    <div id="text">

    <i>Hello</i> world!

    </div>

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






    </body>

    </html>

  • Button zum Kopieren des Body in HTML Formatierter Form

    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.

  • Button zum Kopieren des Body in HTML Formatierter Form

    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

  • Button zum Kopieren des Body in HTML Formatierter Form

    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.

  • Button zum Kopieren des Body in HTML Formatierter Form

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

  • Button zum Kopieren des Body in HTML Formatierter Form


    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.

  • Button zum Kopieren des Body in HTML Formatierter Form

    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.

  • Button zum Kopieren des Body in HTML Formatierter Form

    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.

  • Button zum Kopieren des Body in HTML Formatierter Form

    Zitat von basti1012

    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.

  • Button zum Kopieren des Body in HTML Formatierter Form

    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>

  • 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
    <!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.