web-dev-qa-db-ja.com

javascriptリッチテキストコンテンツをクリップボードにコピー

前提

JavaScriptを使用してリッチテキストをクリップボードにコピーする方法を教えてください。私は周りを検索しましたが、自分の特定のニーズに合うものは見つかりませんでした。

コード

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>

問題

前述のコードは機能せず、object expected error。どんな助けでもありがたいです！ zeroclipboardと呼ばれるライブラリを目にしたことがありますが、独自の関数を記述したいと思います。

編集：

これで、ページ上のテキストを選択するためのこの機能があります。選択した範囲をそのままコピーする式を書くことは可能ですか？

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

最新のブラウザーでは、リッチテキストのみをコピーする場合、パッケージを使用せずに非常に簡単な解決策があります。 http://jsfiddle.net/jdhenckel/km7prgv4/3 を参照

これがフィドルのソースコードです

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

関数

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

この小さなJSプラグインは、Flashを使用せずにリッチテキストをコピーします： https://www.npmjs.com/package/clipboard-js

https://clipboardjs.com/ に基づいていますが、オリジナルはプレーンテキストしかサポートしていないため、私の意見ではアップグレードです。

コードは簡単です：

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

さてここでは、ほとんどの最新のWebブラウザーがクリップボードにアクセスできないようにする取り決めがあります。しかし、すべての場合と同様に、回避策があります。

https://github.com/zeroclipboard/zeroclipboard

これは、クリップボードにテキストをコピーできるjs/flashプラグインです。
（リッチテキストに使用できると思います。）

1
James Harrington