在 React 中复制到剪贴板斜体

Question

我已经知道如何使用 React 将文本复制到剪贴板，但我希望 this.state.parties 为斜体，并且 this.state.citation 在粘贴时不为斜体。我可以使用<i> 标签将正确的斜体形式呈现到屏幕上。

  handleCopyCitation = () => {
    let textField = document.createElement('textarea')
    let citationText = this.state.parties + this.state.citation
    textField.innerText = citationText.italics()
    document.body.appendChild(textField)
    textField.select()
    document.execCommand('copy')
    textField.remove()
  }

Answer 1

您的问题源于<textarea> 元素只能容纳纯文本；并且没有格式化的元素。要将格式应用于<textarea> 中的文本，您可以使用 CSS，但它会影响整个字段并且不会被复制。

幸运的是，HTML5 有一个解决这个问题的方法：contenteditable 元素。在 HTML5 中，您可以创建任何元素 contenteditable，这意味着用户可以编辑其内容 - 这用于构建所见即所得编辑器之类的东西。 contenteditable 元素支持富文本，这意味着可以将任何 HTML 放入其中； 并大量复制。

因此，如果您有一个隐藏的contenteditable 元素，您可以将其内容设置为您想要复制的任何文本（可以是任何字符串，并且可以包含 HTML），聚焦该元素，选择它的文本，然后复制它。

它应该是一个隐藏元素，而不是你即时创建的元素，这与<textarea> 不同，其中一些操作需要更多时间，并且在元素移除之前可能无法完成。这可以通过仅在设定的时间后移除元素来解决，但是这个时间因计算机而异，并且可以使元素在屏幕上闪烁。实际上隐藏的元素（例如使用 visiblity:hidden 或 display:none 之类的 CSS）无法聚焦，因此一个不错的解决方案是将元素放置在远离屏幕的位置。

从那里，并参考元素的 DOM 节点，.innerHTML 可以设置文本内容（例如要复制的内容），.focus() 聚焦元素，document.execCommand("selectAll") 选择文本（注意 @987654333 @ 不存在 contenteditable 元素），最后 document.execCommand("copy") 复制文本。

这是一个工作示例。作为测试，它会复制一个包含粗体格式、斜体格式和颜色的字符串，但我相信您可以根据自己的需要进行调整。

function handleCopyCitation(citationText) {
  let copyArea = document.getElementById("copyArea");
  copyArea.innerHTML = citationText;
  copyArea.focus();
  document.execCommand("selectAll");
  document.execCommand("copy");
}

function test() {
  handleCopyCitation("<strong>Hello, </strong><em><span style=\"color:red;\">world!</span></em>");
}

#copyArea {
  position:fixed;
  left:-10000px;
  top:-10000px;
}

<button onclick="test()">Copy Text</button>

<div id="copyArea" contenteditable="true"></div>