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")选择文本（.select()元素不存在注释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>

在React中复制到剪贴板斜体

1 个答案: