Ergebnis 1 bis 7 von 7
Like Tree1Likes
  • 1 Post By kkapsner

Thema: Button zum Kopieren des Body in HTML Formatierter Form

  1. #1
    mastermueller ist offline Doppel-As
    registriert
    02-11-2005
    Beiträge
    133

    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-Code:
    <!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.
    Geändert von mikdoe (25-08-2018 um 08:52 Uhr) Grund: Code Tags

  2. #2
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.637

    AW: Button zum Kopieren des Body in HTML Formatierter Form

    Zitat Zitat von mastermueller Beitrag anzeigen
    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.
    Wie kommst du darauf, dass man die Formatierung mit kopieren könnte?
    Aus welchem Browser von welcher Webseite in welche Zielanwendung funktioniert das?
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  3. #3
    mastermueller ist offline Doppel-As
    registriert
    02-11-2005
    Beiträge
    133

    AW: Button zum Kopieren des Body in HTML Formatierter Form

    Wie ich darauf komme. Könntest du mal irgendeine Webseite (in Windows) öffnen und dann in Word einfügen.
    Ich füge jetzt auch ein Bild ein, dass die Formatierung mitkopiert wird, wie in Beispiel angezeigt wird.

    - - - Aktualisiert - - -

    Hier ist das Bild.

    - - - Aktualisiert - - -

    Das Bild Word.jpg öffnen, das andere Bild wurde fälschlicherweise hinzugefpgt.

    - - - Aktualisiert - - -

    Ich möchte das Ergebnis genauso wie in Ergebnis drei in dem Word.jpg
    Angehängte Grafiken Angehängte Grafiken

  4. #4
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.637

    AW: Button zum Kopieren des Body in HTML Formatierter Form

    Zitat Zitat von mastermueller Beitrag anzeigen
    Wie ich darauf komme. Könntest du mal irgendeine Webseite (in Windows) öffnen und dann in Word einfügen.
    Jo das kenne ich schon aber ob das so gewollt ist? Ich halte das eher für Zufall. Probier das mal mit einem anderen Browser und/oder anderen Zielanwendung. Dann geht es nämlich nicht mehr oder total fehlerhaft.
    Sehr häufig sind auch nicht sichtbare Steuerzeichen dabei und wenn man das z. B. in seinen Quellcode einfügt kann das böse böse Fehler hervorrufen und man sucht tagelang die Ursache. Und wenn man dann vergessen hat, welche Teile man kopiert und welche selbst geschrieben hat sieht das ganz schön doof aus.

    Ich rate dringend davon ab, Texte aus Browsern heraus zu kopieren! Es sei denn es sind Formular Eingabefelder oder es ist auf der Webseite extra zum Kopieren ausgewiesen.

    Entsprechend ist meine Antwort zu deiner Frage: ob Formatierungen mit kopiert werden oder nicht kannst du mit der Webseite nicht beeinflussen. Das hängt vom Browser und der Zielanwendung ab. Das ist meine Erfahrung. Ob das so richtig und/oder gewollt ist oder nicht weiß ich nicht.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  5. #5
    mastermueller ist offline Doppel-As
    registriert
    02-11-2005
    Beiträge
    133

    AW: Button zum Kopieren des Body in HTML Formatierter Form

    Zitat Zitat von mikdoe Beitrag anzeigen
    Jo das kenne ich schon aber ob das so gewollt ist? Ich halte das eher für Zufall. Probier das mal mit einem anderen Browser und/oder anderen Zielanwendung. Dann geht es nämlich nicht mehr oder total fehlerhaft.
    Sehr häufig sind auch nicht sichtbare Steuerzeichen dabei und wenn man das z. B. in seinen Quellcode einfügt kann das böse böse Fehler hervorrufen und man sucht tagelang die Ursache. Und wenn man dann vergessen hat, welche Teile man kopiert und welche selbst geschrieben hat sieht das ganz schön doof aus.

    Ich rate dringend davon ab, Texte aus Browsern heraus zu kopieren! Es sei denn es sind Formular Eingabefelder oder es ist auf der Webseite extra zum Kopieren ausgewiesen.

    Entsprechend ist meine Antwort zu deiner Frage: ob Formatierungen mit kopiert werden oder nicht kannst du mit der Webseite nicht beeinflussen. Das hängt vom Browser und der Zielanwendung ab. Das ist meine Erfahrung. Ob das so richtig und/oder gewollt ist oder nicht weiß ich nicht.
    Hallo,

    ich weiß, dass jeder Browser oder HTML Prozessor (Word Engine) das anders interpretiert und man meistens etwas Buggy zustande kommt. Doch ich habe es mit meiner Webseite mit Word und unserem Favoriten Email-Client der Wahl getestet und alles funktiert (STRG+A und STRG+C). Nur möchte ich das mit einem Button machen, was irgenwie nicht funktioniert.

    Und ich wollte sagen, dass das ein Firmeninterner Webseite ist mit pw geschützt und co. Und ja das ist so gewollt.
    Die Seite ist meistens dynamisch und hat einen HTML und CSS Struktur und gibt die Produkte aus, aber ich möchte den Kopiervorgang erreichen mit einem Button. Ob das wohl überhaupt geht????

    - - - Aktualisiert - - -

    Teste mal das hier aus und versuche mir zu sagen, wieso der CSS Style nicht übernommen wird wenn man es irgendwo einfügt.


    HTML-Code:
    <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>
    Geändert von mikdoe (25-08-2018 um 15:30 Uhr) Grund: Code Tags

  6. #6
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.683

    AW: Button zum Kopieren des Body in HTML Formatierter Form

    Probier' mal die Selection-API aus: https://developer.mozilla.org/en-US/.../API/Selection
    D.h. anstatt den gewünschten Teil in eine temporäre Node zu schreiben und dann versuchen das zu kopieren, mal direkt den gewünschten Teil markieren und kopieren.
    mikdoe likes this.

  7. #7
    Avatar von cartny36
    cartny36 ist offline Grünschnabel
    registriert
    16-09-2016
    Beiträge
    9

    AW: Button zum Kopieren des Body in HTML Formatierter Form

    Zitat Zitat von mastermueller Beitrag anzeigen
    Hallo,

    ich weiß, dass jeder Browser oder HTML Prozessor (Word Engine) das anders interpretiert und man meistens etwas Buggy zustande kommt. Doch ich habe es mit meiner Webseite mit Word und unserem Favoriten Email-Client der Wahl getestet und alles funktiert (STRG+A und STRG+C). Nur möchte ich das mit einem Button machen, was irgenwie nicht funktioniert.

    Wenn es nicht in jedem Browser funktioniert wirst du arg zu kämpfen haben um den Button gängig zu kriegen.
    Im Chromium funktioniert STRG+C nicht kopiert nüscht.

Ähnliche Themen

  1. [FRAGE] HTML-Tabelle in Zwischenablage kopieren
    Von HenselIT im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 20-11-2015, 09:58
  2. Antworten: 4
    Letzter Beitrag: 31-05-2013, 12:42
  3. Formatierter Text aus einer Tabelle auslesen
    Von xela84 im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 23-02-2010, 22:22
  4. HTML body onLoad-probleme
    Von uid im Forum JavaScript
    Antworten: 18
    Letzter Beitrag: 09-08-2007, 10:38
  5. HTML body onLoad-probleme
    Von uid im Forum Serverseitige Programmierung
    Antworten: 2
    Letzter Beitrag: 08-08-2007, 12:42

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •