Копировать в буфер обмена курсивом в действии

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, что означает, что пользователи могут редактировать его содержимое - это используется для создания таких вещей, как редакторы WYSIWYG.contenteditable элементы поддерживают форматированный текст , что означает, что любой HTML может быть помещен в них; и с большим количеством копий.

Поэтому, если у вас есть скрытый элемент contenteditable, вы можете установить его содержимое так, чтобы оно было любым текстом, который вы хотите скопировать (это может быть любая строка иможет содержать HTML), сфокусировать элемент, выделить его текст, а затем скопировать его.

Это должен быть скрытый элемент, а не тот, который вы делаете на лету, в отличие от <textarea> некоторых из этихДействия занимают немного больше времени и могут быть не выполнены до удаления элементов.Эту проблему можно решить, удалив элемент только через определенное время, но это время зависит от компьютера и может заставить элемент мигать на экране.Фактически скрытые элементы (например, с помощью CSS, такие как visiblity:hidden или display:none) не могут быть сфокусированы, поэтому хорошим решением будет вместо этого расположить элемент далеко от экрана.

Оттуда и сссылка на узел 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>