Как убрать форматирование текста при вставке из буфера в элемент с редактируемым содержимым (contentEditable)?

Как исправить ошибку, которая приводит к вставке пяти текстов вместо одного при использовании данного кода? И какие еще существуют способы для вставки текста из буфера обмена?
  • 27 сентября 2023 г. 10:47
Ответы на вопрос 1
1. Чтобы удалить форматирование текста при вставке из буфера в элемент с редактируемым содержимым (contentEditable), можно использовать метод `execCommand` с параметром `"paste"` и после этого очистить форматирование с помощью метода `stripFormatting`. Пример:

```javascript
document.getElementById("editable-element").addEventListener("paste", function(e) {
  e.preventDefault();
  var text = e.clipboardData.getData("text/plain");
  document.execCommand("insertText", false, text);
  stripFormatting();
});

function stripFormatting() {
  var selection = document.getSelection();
  if (selection.rangeCount > 0) {
    var range = selection.getRangeAt(0);
    var clonedRange = range.cloneRange();
    clonedRange.selectNodeContents(range.commonAncestorContainer);
    clonedRange.setEnd(range.startContainer, range.startOffset);
    var selectedText = clonedRange.toString();
    var textNode = document.createTextNode(selectedText);
    clonedRange.deleteContents();
    range.insertNode(textNode);
    range.setStartAfter(textNode);
    range.collapse(true);
    selection.removeAllRanges();
    selection.addRange(range);
  }
}
```

2. Что касается ошибки, приводящей к вставке пяти текстов вместо одного, возможно, она вызвана повторным назначением обработчика события на элементе или его родительском элементе. Проверьте, что обработчик события `paste` назначается только один раз.

3. Также можно вставить текст из буфера обмена с помощью JavaScript метода `paste`. Пример:

```javascript
document.getElementById("editable-element").addEventListener("click", function(e) {
  var tempInput = document.createElement("input");
  document.body.appendChild(tempInput);
  tempInput.focus();
  document.execCommand("paste");
  var pastedText = tempInput.value;
  document.body.removeChild(tempInput);
  document.getElementById("editable-element").innerText = pastedText;
});
```

Этот код создает временный `input` элемент, фокусируется на нем, выполняет команду `paste` и сохраняет введенный текст в переменную `pastedText`. Затем временный `input` элемент удаляется, и текст вставляется в редактируемый элемент.
Похожие вопросы