JavaScript将富文本内容复制到剪贴板

我需要使用JavaScript将富文本复制到剪贴板。 我搜查了四周,并没有找到任何适合我的具体需求的东西。

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

上面的代码无法正常工作并且收到对象预期的错误。 任何帮助表示赞赏。 我看到一个名为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>

这个微小的JS插件在不使用Flash的情况下复制Richtext: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."
});

那么这里的交易最现代的网页浏览器不会让你有权访问剪贴板。 然而就像所有的东西都有解决方法。

https://github.com/zeroclipboard/zeroclipboard

这是一个js / flash插件,可让您将文本复制到剪贴板。
(我相信你可以将它用于富文本。)


使用现代浏览器,如果您只想复制富文本 ,则不需要使用任何软件包就可以获得非常简单的解决方案。 见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);
};
链接地址: http://www.djcxy.com/p/19709.html

上一篇: javascript copy rich text contents to clipboard

下一篇: Disabling Chrome cache for website development