• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Button zum Kopieren des Body in HTML Formatierter Form

M

mastermueller

New member
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.
 
Zuletzt bearbeitet von einem Moderator:
mastermueller schrieb:
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.
Zum Vergrößern anklicken....
Wie kommst du darauf, dass man die Formatierung mit kopieren könnte?
Aus welchem Browser von welcher Webseite in welche Zielanwendung funktioniert das?
 
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
 

Anhänge

  • Desktop.jpg
    Desktop.jpg
    313,9 KB · Aufrufe: 5
  • Word.jpg
    Word.jpg
    62,9 KB · Aufrufe: 3
mastermueller schrieb:
Wie ich darauf komme. Könntest du mal irgendeine Webseite (in Windows) öffnen und dann in Word einfügen.
Zum Vergrößern anklicken....
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.
 
mikdoe schrieb:
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.
Zum Vergrößern anklicken....
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: 
<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>
 
Zuletzt bearbeitet von einem Moderator:
mastermueller schrieb:
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.
Zum Vergrößern anklicken....


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.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben