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

Мне нужно реализовать задачу, которая является довольно распространенной функцией для 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 являются нулевыми (Chrome, Firefox).

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

Ответ 1

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

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

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

Ответ 2

Я на самом деле проделал большую работу над этим, и просто написал хороший пост в блоге, описывая, как мы это подробно рассмотрели в 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 clipboard через javascript. Что вам нужно сделать, так это позволить браузеру вставить в контентный 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);
}

Ответ 3

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

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