Obtener html desde el portapapeles en javascript

Question

Necesito implementar la tarea que es una característica bastante común para RichTextEditors - tome HTML desde el portapapeles. ¿Alguien puede ayudar con la guía sobre cómo resolver esta tarea?

Tiene que ser multiplataforma (IE, FF, Chrome, Opera). acabo de empezar desde este código:

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

Tanto window.clipboardData y e.clipboardData son nulos (Chrome, Firefox).

Actualización: el usuario desea pegar el contenido del artículo desde otras ventanas del navegador, y necesito obtener etiquetas html.

Answer 1

No podrá obtener datos del portapapeles utilizando solo JavaScript, que es la forma en que debería ser. Las versiones actuales vías de TinyMCE y CKEditor hacer esto es como sigue:

1. detectar un evento Ctrl-V/SHIFT-ins utilizando un controlador de eventos de pulsación de tecla
2. En ese controlador, guardar la selección del usuario actual, añadir una div elemento fuera de pantalla (digamos a la izquierda -1000px) en el documento, mueva el cursor para estar dentro de ese div, así redirigiendo efectivamente la pasta
3. Establezca un temporizador muy breve (digamos 1 milisegundo) en el controlador de eventos para llamar a otro función que recupera el contenido HTML del div y hace el procesamiento requerido, elimina el div del documento, restaura la selección del usuario e inserta el HTML procesado.

Tenga en cuenta que esto solo funcionará para los eventos de pegado del teclado y no se pega desde el menú de contexto o edición. Para cuando se activa el evento de pegado, es demasiado tarde para redirigir el cursor al div (en algunos navegadores, al menos).

Answer 2

En Chrome, accedo clipboardData a través del evento utilizando este código:

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

Answer 3

De hecho, me he hecho mucho trabajo en esto, y acaba de escribir un nice blog post describir cómo lo hicimos en detalle Lucidchart (como un descargo de responsabilidad, trabajo en Lucidchart). Tenemos a JSFiddle que muestra copiar y pegar (probado en Firefox, Safari, Chrome e IE9 +).

El resumen de la respuesta es que deberá obtener el código HTML durante el evento de pegado del sistema. En la mayoría de los navegadores (no-IE), esto se puede hacer con algo tan simple como la siguiente:

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

El problema es cuando se desea conseguir HTML en IE. Por alguna razón, IE no hace accesibles los datos del portapapeles text/html a través de javascript. Lo que tienes que hacer es dejar que el navegador pegue en un div satisfactorio y luego obtener el html después de que el evento pegar haya terminado.

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