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

IT技术 javascript html clipboard
2021-02-23 08:47:59

前提

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

5个回答

对于现代浏览器，如果您只想复制富文本，有一个非常简单的解决方案，无需使用任何包。见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);
};

⚠️剪贴板事件. clipboardData是实验性技术。查看MDN 中的浏览器兼容性表(05-03-21)

在 Safari 11.1.1 中不起作用。没有任何副本，以前在剪贴板上的内容仍然存在。
2021-04-18 08:47:59
对于那个很抱歉。我没有在 IE 11 或 Edge 上测试它。我想知道......如果你颠倒两者，e.clipboardData.setData那么也许你可以用 IE 边缘粘贴富文本......？只是一个想法
2021-04-24 08:47:59
这在 FF、Chrome、Edge 和 IE11 中对我有用。IE11 会提示用户是否允许访问剪贴板。它在 Safari 中不起作用。为此需要另一种方法，据我所知，您无法复制“富文本”，只能复制纯文本。
2021-05-04 08:47:59
谢谢你。我通过复制并粘贴到 Word 中对此进行了测试。它在 Chrome 上运行良好。它似乎根本不适用于 IE11。在 Edge 上，它将粘贴文本但没有格式。
2021-05-14 08:47:59

这个小小的 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."
});
对于现代浏览器，如果您只想要 COPY RICH TEXT，则有一个非常简单的解决方案，无需使用任何包。参见jsfiddle.net/jdhenckel/km7prgv4/3
2021-05-01 08:47:59
如果富文本包含图像，我将无法正常工作。
2021-05-01 08:47:59
@JohnHenckel，太棒了！你应该让它成为一个答案！
2021-05-04 08:47:59
只是要指出，对于 IE @SFlagg 的解决方案不会复制富文本，而只会复制纯文本
2021-05-06 08:47:59
就像一个魅力，确实很简单。
2021-05-08 08:47:59

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

https://github.com/zeroclipboard/zeroclipboard

我只是想 id 提供了一个答案。由于没有可靠的 JS 方法来执行此操作
2021-04-20 08:47:59
@codenamejames：好的，我尝试使用 ZC 上的帮助，但并不认为我在这里很成功。这是我的代码，它仍然无法正常工作:(
2021-04-27 08:47:59
<div id="d_clip_button">复制到剪贴板</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') ); </脚本> `
2021-04-29 08:47:59
OP 在他的问题中提到了 zeroclipboard，我在评论中谈到了它。
2021-05-04 08:47:59
我认为应该更像这样 ZeroClipboard.config({ moviePath: "ZeroClipboard.swf" }); var client = new ZeroClipboard(document.getElementById('d_clip_button'));
2021-05-11 08:47:59

我现在搜索了一个星期，终于找到了我的答案！！！对于那些希望使用 javascript 将富文本复制到剪贴板的人，然后使用下面链接中的功能，就像一个魅力。不需要flash灯和其他建议的东西:)

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

那是用于图像，而不是富文本。无论如何，它只是 IE :-(
2021-04-20 08:47:59
其它你可能感兴趣的问题
上一篇延迟 JQuery 效果 下一篇处理快速异步中间件中的错误