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

Question

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

71

前提条件

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

- marv

顺便说一下，不建议使用with语句，因为它可能是混淆错误和兼容性问题的源头。 - Andy

仅使用JS的解决方案，请参见http://jsfiddle.net/jdhenckel/km7prgv4/3 - John Henckel

7个回答

12

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

- SFlagg

1

运行得非常好，而且确实很简单。 - Mat

9

对于现代浏览器，如果你只想复制富文本，有一个非常简单的解决方案 不需要使用任何软件包。请参考 https://jsfiddle.net/jdhenckel/km7prgv4/3/。 - John Henckel

1

@JohnHenckel，太棒了！你应该把它作为答案！ - Dan Lenski

3

提醒一下，对于IE浏览器，@SFlagg的解决方案只会复制纯文本而非富文本。 - gordon613

如果富文本包含图片，我无法使其正常工作。 - Jules Colle

我在这里创建了一个功能性的示例：https://dev59.com/NZHea4cB1Zd3GeqPliuD#33758293 - Mr. Polywhirl

8

这是我使用新的剪贴板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复制到剪贴板。需要注意的一个有用的事情是这可以包括图像(可以是数据URL)。这是我发现的唯一一种将多个图像粘贴到剪贴板的方式。

- antoineMoPa

1

这在Firefox上不起作用。请参见我在类似的帖子中的答案。 - tst

如果在控制台中尝试此操作，可能会失败，因为文档本身没有焦点，这种情况下，您可能需要将此代码放入setTimeout中，以便您有时间将焦点移回文档。 - BallpointBen

3

这是一个简单的函数，它使用剪贴板 API（在我写这篇文章时，除了 Firefox 之外的所有地方都支持）并在不支持的情况下回退到document.execCommand("copy")方法（已弃用，但目前在所有地方都有效），希望 Firefox 在放弃对execCommand的支持之前能添加对剪贴板 API 的支持 :)

/** Paste richly formatted text.
 *
 * @param {string} rich - the text formatted as HTML
 * @param {string} plain - a plain text fallback
 */
async function pasteRich(rich, plain) {
  if (typeof ClipboardItem !== "undefined") {
    // Shiny new Clipboard API, not fully supported in Firefox.
    // https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API#browser_compatibility
    const html = new Blob([rich], { type: "text/html" });
    const text = new Blob([plain], { type: "text/plain" });
    const data = new ClipboardItem({ "text/html": html, "text/plain": text });
    await navigator.clipboard.write([data]);
  } else {
    // Fallback using the deprecated `document.execCommand`.
    // https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand#browser_compatibility
    const cb = e => {
      e.clipboardData.setData("text/html", rich);
      e.clipboardData.setData("text/plain", plain);
      e.preventDefault();
    };
    document.addEventListener("copy", cb);
    document.execCommand("copy");
    document.removeEventListener("copy", cb);
  }
}

你可能也想尝试一下适用于Clipboard API的合适的polyfill。

- Miriam

1

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

https://github.com/zeroclipboard/zeroclipboard

- James Harrington

OP在他的问题中提到了zeroclipboard，而我在我的评论中谈到了它。 - Andy

我只是想提供一个答案。因为没有可靠的JS方法可以做到这一点。 - James Harrington

@codenamejames：好的，我尝试使用ZC上的帮助，但我觉得我还不太成功。这是我的代码，它仍然无法工作:( - marv

<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') ); </script> - marv

@codenamejames，不幸的是那个方法没起作用。我得到了一个“对象不支持此方法”的错误。我有另一个函数可以选择网页上的文本/图像（在我的帖子上编辑）。现在我能否编写一个函数来复制所选范围？ - marv

显示剩余2条评论

1

Document.execCommand() 显然正在变得过时:

参考: 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/

- Jungle Editor

-3

我已经搜索了一个星期，终于找到了答案！！！对于那些想要使用JavaScript将富文本复制到剪贴板的人，可以使用下面链接中的函数，非常好用。不需要使用Flash或其他建议的东西：）使用JavaScript / jQuery将图像复制到剪贴板

- marv

2

那是针对图片的，不是富文本。而且它只支持IE :-( - John Henckel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- John Henckel · Accepted Answer

使用现代浏览器，如果你只想复制富文本，有一个非常简单的解决方案，而且不需要使用任何软件包。请参考这个链接：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);
};

⚠️ ClipboardEvent.clipboardData 是实验性技术。请查看MDN中的浏览器兼容性表格（05-03-21） 编辑： 使用execCommand已被弃用！请查看新的ClipboardAPI。我强烈推荐阅读Artemis的文章。