Pobieranie html ze schowka w javascript

Question

Potrzebuję wykonać zadanie, które jest dość powszechną funkcją RichTextEditors - weź ze schowka zebranie HTML. Czy ktoś może pomóc z przewodnikiem, jak rozwiązać to zadanie?

To musi być platforma (IE, FF, Chrome, Opera). Właśnie zacząłem z tym kodem:

<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> 

Zarówno window.clipboardData i e.clipboardData są nieważne (Chrome, Firefox).

Aktualizacja: użytkownik chce wkleić treść artykułu z innych okien przeglądarki i muszę pobrać tagi HTML.

Answer 1

Nie będzie można uzyskać danych ze schowka przy użyciu samego JavaScript, tak właśnie powinno być. Sposób, w jaki obecne wersje TinyMCE i CKEditor zrobić to w następujący sposób:

1. Wykrywanie zdarzenia ctrl-v/Shift-ins za pomocą obsługi zdarzeń naciśnięcie
2. W tej obsługi, zapisać bieżący wybór użytkownika, dodaj element div poza ekranem (powiedzmy po lewej stronie -1000px) do dokumentu, przesuń karetkę, aby znalazła się wewnątrz tego elementu div, a tym samym skutecznie przekierowuj wklej.
3. Ustaw bardzo krótki licznik czasu (powiedzmy 1 milisekundę) w module obsługi zdarzeń, aby wywołać inny funkcja, która pobiera treść HTML z elementu div i wykonuje dowolne przetwarzanie, usuwa element div z dokumentu, przywraca wybór użytkownika i wstawia przetworzony kod HTML.

Należy zauważyć, że działa to tylko w przypadku wklejek klawiaturowych, a nie past z kontekstu lub menu edycji. Do czasu uruchomienia zdarzenia wklejania, jest zbyt późno, aby przekierować karetkę do elementu div (przynajmniej w niektórych przeglądarkach).

Answer 2

W Chrome mam dostępu clipboardData przez przypadku przy użyciu tego kodu:

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

Answer 3

I rzeczywiście zrobili dużo pracy w tej sprawie, i po prostu napisał nice blog post opisując jak zrobiliśmy to w szczegółach na Lucidchart (jako disclaimer, pracuję w Lucidchart). Mamy a JSFiddle, który pokazuje kopiowanie i wklejanie (testowane w Firefox, Safari, Chrome i IE9 +).

Najkrócej brzmi: musisz pobrać kod HTML podczas zdarzenia wklejania systemu. W większości (nie-IE) przeglądarki, można to zrobić z czymś tak prostym, jak następuje:

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

Problem jest, gdy chcesz uzyskać HTML w IE. Z jakiegokolwiek powodu, IE nie udostępnia danych schowka text/html za pośrednictwem javascript. Co musisz zrobić, to pozwolić przeglądarce wkleić zawartość do contenteditable div, a następnie uzyskać kod HTML po zakończeniu wklejania.

<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); 
}