如何复制到剪贴板并保留格式答案

【问题标题】：How can I copy to clipboard and preserve formatting如何复制到剪贴板并保留格式
【发布时间】：2021-11-11 20:27:35
【问题描述】：

我有一些文本已输入到“dangerouslySetInnerHTML”中以显示适当的格式。格式包括换行符、粗体标签和超链接。

我希望用户能够从剪贴板进行复制，同时保留模板的格式。

我设法从剪贴板复制，但复制的文本包括原始 html 而不是格式。

例如

const myTemplate = <p>Hello <a href="${link}">User</a></p>

//Template 
<Dialog
  isShown={showDialog}
  onCloseComplete={() => setShowDialog(false)}
  topOffset={4}
  footer={
     <Button onClick={() => navigator.clipboard.writeText(
             document?.getElementById('to-copy')?.innerHTML,
            )
          }
          >
          Click here to copy the template
         </Button>


<div id="to-copy" dangerouslySetInnerHTML={{ __html: `${myTemplate}` }}></div>

期望的输出：

你好用户（超链接）

【问题讨论】：

嘿@JamesWisley - 这个问题仍然悬而未决。问题的回答是否令人满意？如果我们可以提供更多帮助，请在任何答案下方添加评论，或编辑您的问题以澄清您还想知道什么。否则，请选择“最佳答案”（通过单击答案旁边的复选标记）以结束问题。如果没有答案提供有用的信息，请添加您自己的答案并将其选为最佳答案（关闭问题）。那会帮助我们。 谢谢！

标签： javascript html css reactjs

【解决方案1】：

如何复制到剪贴板？

您可能必须将其转换为原始字符串并使用实用程序库，例如剪贴板复制 (https://www.npmjs.com/package/clipboard-copy)

【讨论】：

【解决方案2】：

不确定我是否理解您问题的细微差别，但这里有一些可能（我希望）有所帮助。

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

<button onclick="copyToClip(document.getElementById('richtext').innerHTML)">
  Copy to Clipboard
  </button>

<div>
<br>
Click the above <kbd>Copy to Clipboard</kbd> button and then paste the clipboard contents into MS Word or LibreOffice Writer.
<br><br>
Beneath this div is an invisible (display:none) div that contains formatted text (bolded, italicized, colored, different font). <i>The contents of that invisible div are copied to your clipboard when you click the Copy To Clipboard button up top.</i>
</div>

<div id=richtext style="display:none">
  The data in this div is not visible. 
  It contains rich text. 
  Rich (i.e. "formatted") data can also be generated by javascript.
  The next word is <b>bolded</b>, and the next one is in <i>italics</i>.
  <span style="font:24px Arial; color:purple;">Some large purple text</span>. 
  
You can use two setData directives to insert TWO copies of this text 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>
  
  Here is a <a href="https://rumble.com">Link to Rumble</a> - you must Ctrl-Click the link in Word.
</div>

参考资料：

Clipboard API (MDN) 的文档

之前，我们使用document.execCommand() 写入剪贴板。它现在已被弃用（可能需要将页面放入 designMode），但根据您的要求，它可能有用。

document.execCommand()

Document.designMode

【讨论】：