javascript kopieren Sie rich-text-Inhalt in die Zwischenablage kopieren

Prämisse

Ich brauche Hilfe kopieren Sie rich-text in die Zwischenablage per JavaScript. Ich suchte herum und habe nicht gefunden was für meinen speziellen Bedürfnissen.

Code

JS:

function ctrlA1(corp) {
  with(corp) {}
  if (document.all) {
    txt = corp.createTextRange()
    txt.execCommand("Copy")
  } else
    setTimeout("window.status=''", 5000)
}

HTML:

<div id="sc1">hello <br> <b> world </b> </div>
<button onclick="ctrlA1(document.getElementById('sc1') )"></button>

Problem

Den oben genannten code funktioniert nicht und führt in eine object expected error. Jede Hilfe ist willkommen!
Ich habe gesehen, eine Bibliothek es als zeroclipboard, aber lieber Schreibe meine eigene Funktion.

Edit:

Nun habe ich diese Funktion zum auswählen von text auf der Seite. ist es möglich, zu schreiben, eine Formel zu kopieren wird der ausgewählte Bereich so ist?

JS:

function containerSelect(id) {
  containerUnselect();
  if (document.selection) {
    var range = document.body.createTextRange();
    range.moveToElementText(id);
    range.select();
  } else if (window.getSelection) {
    var range = document.createRange();
    range.selectNode(id);
    window.getSelection().addRange(range);
  }
}

HTML:

<label onclick="containerSelect(this); select_all()">
  <p>hello world</p>
  <img src="imagepath.png">
</label>

InformationsquelleAutor marv | 2014-05-29
  1. 20

    Mit modernen Browsern, wenn Sie wollen kopieren Sie rich-text - nur, es gibt eine sehr einfache Lösung ohne Pakete. Sehen http://jsfiddle.net/jdhenckel/km7prgv4/3

    Hier ist der Quellcode von der fiddle

    <button onclick="copyToClip(document.getElementById('foo').innerHTML)">
  Copy the stuff
  </button>

<div id=foo style="display:none">
  This is some data that is not visible. 
  You can write some JS to generate this data. 
  It can contain rich stuff.  <b> test </b> me <i> also </i>
  <span style="font: 12px consolas; color: green;">Hello world</span> 
  You can use setData to put TWO COPIES into the same clipboard, 
  one that is plain and one that is rich. 
  That way your users can paste into either a
  <ul>
    <li>plain text editor</li>
    <li>or into a rich text editor</li>
  </ul>
</div>

    die Funktion

    function copyToClip(str) {
  function listener(e) {
    e.clipboardData.setData("text/html", str);
    e.clipboardData.setData("text/plain", str);
    e.preventDefault();
  }
  document.addEventListener("copy", listener);
  document.execCommand("copy");
  document.removeEventListener("copy", listener);
};
    • Danke. Getestet habe ich diese durch kopieren und einfügen in Word. Es funktioniert wunderbar auf Chrome. Es scheint nicht zu funktionieren, auf IE11 überhaupt. Am Rand wird es fügen Sie den text jedoch ohne Formatierung.
    • Tut mir Leid, dass. Ich habe nicht testen Sie es auf IE 11 oder edge. Ich Frage mich,... wenn Sie umkehren die beiden e.clipboardData.setData dann vielleicht können Sie fügen Sie rich-text mit IE Kante... ? nur so ein Gedanke
    • Funktioniert nicht in Safari 11.1.1. Nichts kopiert, was war vorher in der Zwischenablage ist immer noch da.
    • Dies funktioniert bei mir in FF, Chrome, Edge und IE11. IE11 wird der Benutzer aufgefordert, wenn Sie den Zugriff auf die Zwischenablage. Es funktioniert nicht in Safari. Eine andere Methode erforderlich ist, und soweit ich sagen kann, Sie können nicht kopieren Sie die "rich text", nur text.
    InformationsquelleAutor John Henckel
  2. 8

    Diese winzige JS-plugin kopiert richtext ohne die Verwendung von Flash:
    https://www.npmjs.com/package/clipboard-js

    Es basiert auf https://clipboardjs.com/, aber es ist ein upgrade meiner Meinung nach, weil die ursprünglichen unterstützt nur text.

    Der code ist einfach:

    clipboard.copy({
    "text/html": "<i>Markup</i> <b>text</b>. Paste me into a rich text editor."
});
    • Funktioniert wie einen Charme, und ist in der Tat sehr einfach.
    • Mit modernen Browsern, wenn Sie wollen KOPIEREN Sie RICH-TEXT-nur, es gibt eine sehr einfache Lösung, ohne irgendwelche Pakete. Siehe jsfiddle.net/jdhenckel/km7prgv4/3
    • github.com/lgarron/clipboard-polyfill#can-i-use-it
    • das ist fantastisch! Sie sollten machen Sie es eine Antwort!
    • Nur darauf hinweisen, dass für den IE @SFlagg ist keine Lösung, kopieren Sie rich-text, aber nur plain text
    • ich kann nicht diese Arbeit, wenn die rich-text-Bilder enthält.
    • Ich erstellte eine funktionale Beispiel hier: stackoverflow.com/a/33758293/1762224

    InformationsquelleAutor SFlagg
  3. 1

    Also hier ist der deal die meisten modernen web-Browsern wird nicht lassen Sie Zugriff auf die clip-board. Aber wie mit allem gibt es eine Arbeit um.

    https://github.com/zeroclipboard/zeroclipboard

    dies ist ein js/flash-plugin, das ermöglicht das kopieren von text in die Zwischenablage zu kopieren.

    (ich glaube, Sie können verwenden Sie es für rich-text.)

    • Der OP erwähnt zeroclipboard in seiner Frage, und ich erzähle es in meinem Kommentar.
    • ich dachte nur-id bieten eine Antwort. Da es keine zuverlässige JS-Methode, es zu tun
    • ok, ich habe versucht mit der Hilfe auf ZC und denke nicht, ich bin sehr erfolgreich hier. hier ist mein code, der nicht funktioniert immer noch 🙁
    • <div id="d_clip_button">Kopieren Auf Zwischenablage</div> <script type="text/javascript" src="ZeroClipboard.js"></script> <script type="text/javascript"> ZeroClipboard.setMoviePath("ZeroClipboard.swf"); var client = new ZeroClipboard( document.getElementById('d_clip_button') ); </script> `
    • ich denke, es sollte mehr so sein wie diese ZeroClipboard.config({ moviePath: "ZeroClipboard.swf" }); var client = new ZeroClipboard(document.getElementById('d_clip_button'));
    • das hat nicht funktioniert leider. ein "object doesnt support diese Methode" - Fehler. Ich habe eine andere Funktion, die wählt Texte/Bilder auf der Webseite (bearbeitet meine post oben). kann ich jetzt eine Funktion schreiben, kopieren Sie den ausgewählten Bereich?
    • die Letzte Funktion, die ich gepostet, funktioniert einwandfrei, muss nur wissen, wie zu kopieren, dass der ausgewählte text :p

    InformationsquelleAutor James Harrington
  4. -2

    suchte ich nach einer Woche jetzt und endlich gefunden, meine Antwort!!!
    für diejenigen, die zu kopieren Sie rich-text in die Zwischenablage mit javascript, verwenden Sie dann die Funktion auf den unten stehenden link, funktioniert wie ein Charme.
    keine Notwendigkeit von flash und anderen Sachen vorgeschlagen 🙂

    Kopieren Sie ein Bild in die Zwischenablage mit JavaScript/jquery

    • Das ist für Bilder, nicht für rich-text. Und sowieso ist es nur IE 🙁
    InformationsquelleAutor marv
Schreibe einen Kommentar