Uncaught TypeError: item.getData не является функцией

Question

Я хочу вставить содержимое буфера обмена на HTML-страницу. Содержимое копируется из файла ms-word. Содержит текст и изображения. Рассмотрим следующий код:

<div id="pasteArea" contenteditable="True"></div>
<script type="text/javascript">
    var pasteArea = document.getElementById('pasteArea');
    pasteArea.onpaste = function (event) {
        event.preventDefault();
        event.stopPropagation();
        var items = (event.clipboardData || event.originalEvent.clipboardData).items;
        for (index in items) {
            var item = items[index];
            if(item.kind === 'string'){
                console.log(item.getData('text'));
                // Getting the error in here!
            }
            else if(item.kind === 'file'){
                // Code for handling images
            }
        }
    }
</script>

Я пытался с помощью event.clipboardData.getData('text'); но он выбирает весь текст (т.е. пропускает изображения между ними), а также форматирование текста теряется.

Любая идея о том, как справиться с вышеуказанным случаем? Спасибо.

Answer 1

Вы ищете getAsString, который требует обратного вызова для обработки буфера обмена.

https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem/getAsString

const pasteArea = document.getElementById('pasteArea');

pasteArea.onpaste = event => {
  event.preventDefault();

  const { items } = event.clipboardData;
  for (const item of items) processClipboard(item)
}

const processClipboard = item => {
  if (item.kind === 'string' && item.type === 'text/plain') {

    item.getAsString(s => console.log(s))

  }
}

div { background-color: #ccc; }

<div id="pasteArea" contenteditable="True">Paste something here</div>

Answer 2

Ваш элемент имеет тип DataTransferItem, поэтому вы должны использовать getAsString() для получения текста элемента;

Эта функция принимает функцию обратного вызова в качестве первого аргумента: item.getAsString(str => console.log(str));