web-dev-qa-db-fra.com

javascript copie le contenu en texte riche dans le presse-papiers

Prémisse

J'ai besoin d'aide pour copier du texte riche dans le presse-papiers à l'aide de JavaScript. J'ai cherché autour et je n'ai rien trouvé pour répondre à mes besoins spécifiques.

Code

function ctrlA1(corp) {
  with(corp) {}
  if (document.all) {
    txt = corp.createTextRange()
    txt.execCommand("Copy")
  } else
    setTimeout("window.status=''", 5000)
}
<div id="sc1">hello <br> <b> world </b> </div>
<button onclick="ctrlA1(document.getElementById('sc1') )"></button>

Problème

Le code susmentionné ne fonctionne pas et entraîne un object expected error. Toute aide est appréciée! J'ai vu une bibliothèque appelée zeroclipboard, mais je préférerais écrire ma propre fonction.

Éditer:

J'ai maintenant cette fonction pour sélectionner du texte sur la page. est-il possible d'écrire une formule pour copier la plage sélectionnée telle quelle?

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);
  }
}
<label onclick="containerSelect(this); select_all()">
  <p>hello world</p>
  <img src="imagepath.png">
</label>
javascripthtmlclipboard
30
marv

Avec les navigateurs modernes, si vous voulez copier uniquement du texte riche , il existe une solution très simple sans utiliser de packages. Voir http://jsfiddle.net/jdhenckel/km7prgv4/

Voici le code source du violon

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

la fonction

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);
};
23
John Henckel

Ce minuscule plugin JS copie du texte enrichi sans utiliser Flash : https://www.npmjs.com/package/clipboard-js

Il est basé sur https://clipboardjs.com/ - mais c'est une mise à niveau à mon avis, car l'original ne prend en charge que le texte brut.

Le code est simple:

clipboard.copy({
    "text/html": "<i>Markup</i> <b>text</b>. Paste me into a rich text editor."
});
8
SFlagg

Eh bien, voici l'accord que la plupart des navigateurs Web modernes ne vous permettront pas d'accéder au presse-papiers. Cependant, comme avec tout, il y a un travail autour.

https://github.com/zeroclipboard/zeroclipboard

il s'agit d'un plugin js/flash qui vous permet de copier du texte dans votre presse-papiers.
(je crois que vous pouvez l'utiliser pour du texte enrichi.)

1
James Harrington