如何使用JavaScript将富文本内容复制到剪贴板

How can I copy rich text contents to the clipboard with JavaScript?

本文关键字：复制 剪贴板 文本 何使用 JavaScript      更新时间：2023-09-26

前提

我需要使用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>

对于现代浏览器，如果您只想复制富文本，有一个非常简单的解决方案，而不需要使用任何包。看见http://jsfiddle.net/jdhenckel/km7prgv4/3

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

功能

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);
};

⚠️ClipboardEvent.clipboardData是一项实验性技术。查看MDN(05-03-21(中的浏览器兼容性表

这个小小的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."
});

下面是我使用新的剪贴板API测试的一个示例：

const content = '<a href="http://google.com/">test</a>';
const blob = new Blob([content], {type: 'text/html'});
const clipboardItem = new window.ClipboardItem({ 'text/html': blob });
navigator.clipboard.write([clipboardItem]);

使用此方法，可以将html复制到剪贴板。需要注意的一件有用的事情是，这可以包括图像(可以是dataURL(。这是我发现的将多个图像粘贴到剪贴板的唯一方法。

Document.excCommand((显然已经过时了：

参考编号：https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand)，

有一个新的剪贴板API：

https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API

这里有一些例子https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard

还有这里：https://web.dev/async-clipboard/

这是一个旧的基于Flash的解决方案。由于Flash已停产，因此不应再在生产环境中使用它。

https://github.com/zeroclipboard/zeroclipboard

我搜索了一周终于找到了答案！！！对于那些想用javascript将富文本复制到剪贴板的人来说，使用下面链接中的函数，效果就像一个魅力。不需要闪光灯和其他建议的东西：(

使用JavaScript/jquery 将图像复制到剪贴板

相关文章：