Получить HTML из буфера обмена в JavaScript

Question

Мне нужно реализовать задачу, которая является довольно распространенной функцией для RichTextEditors - взять HTML из буфера обмена.Может кто-нибудь помочь с руководством о том, как решить эту задачу?

Должно быть кроссплатформенным (IE, FF, Chrome, Opera).Я только начал с этого кода:

<script type="text/javascript">
    $('.historyText').live('input paste', function(e) {

        var paste = e.clipboardData && e.clipboardData.getData ?
        e.clipboardData.getData('text/plain') :                // Standard
        window.clipboardData && window.clipboardData.getData ?
        window.clipboardData.getData('Text') :                 // MS
        false;

        alert(paste);
    });</script>

И window.clipboardData, и e.clipboardData имеют значение null (Chrome, Firefox).

Обновление: пользователь хочет вставить содержимое статьи из других окон браузераи мне нужно получить HTML-теги.

Answer 1

Я действительно проделал большую работу над этим и только что написал хороший пост в блоге , в котором подробно описывается, как мы делали это на Lucidchart (в качестве заявления об отказе от ответственности, я работаю на Lucidchart). У нас есть JSFiddle , который показывает копирование и вставку (протестировано в Firefox, Safari, Chrome и IE9 +).

Суть ответа в том, что вам нужно будет получить HTML во время события системной вставки. В большинстве браузеров (не IE) это можно сделать с помощью чего-то простого:

document.addEventListener('paste', function(e) {
  var html = e.clipboardData.getData('text/html');
  // Whatever you want to do with the html
}

Проблема в том, когда вы хотите получить HTML в IE. По какой-то причине IE не делает доступными данные буфера обмена text / html через javascript. Что вам нужно сделать, это позволить браузеру вставить в contenteditable div и затем получить html после того, как событие вставки закончится.

<div id="ie-clipboard-contenteditable" class="hidden" contenteditable="true"></div>

var ieClipboardDiv = $('#ie-clipboard-contenteditable'); 

var focusIeClipboardDiv = function() {
  ieClipboardDiv.focus();
  var range = document.createRange();
  range.selectNodeContents((ieClipboardDiv.get(0)));
  var selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
};

document.addEventListener('beforepaste', function() {
  if (hiddenInput.is(':focus')) {
    focusIeClipboardDiv();
  }
}, true);

document.addEventListener('paste', function(e) {
  ieClipboardDiv.empty();
  setTimeout(function() {
    var html = ieClipboardDiv.html();
    // Do whatever you want with the html
    ieClipboardDiv.empty();
    // Return focus here
  }, 0);
}

Answer 2

Вы не сможете получить данные из буфера обмена, используя только JavaScript, как и должно быть. Текущие версии TinyMCE и CKEditor делают это следующим образом:

1. Обнаружение события ctrl-v / shift-ins с помощью обработчика события нажатия клавиши
2. В этом обработчике сохраните текущий выбранный пользователь, добавьте элемент div вне экрана (скажем, слева -1000px) к документу, переместите каретку внутри этого div, таким образом эффективно перенаправляя вставку
3. Установите очень короткий таймер (скажем, 1 миллисекунду) в обработчике событий для вызова другой функции, которая извлекает содержимое HTML из div и выполняет любую необходимую обработку, удаляет div из документа, восстанавливает выбор пользователя и вставляет обработанный HTML.

Обратите внимание, что это будет работать только для событий вставки с клавиатуры, а не вставок из контекстного меню или меню редактирования. К тому времени, когда происходит событие вставки, уже слишком поздно перенаправлять курсор в div (по крайней мере, в некоторых браузерах).

Answer 3

В Chrome я получаю доступ к clipboardData через событие, используя этот код:

$(document).bind('paste', function(e) {
    var clipboardData = e.originalEvent.clipboardData;
});