writetext - javascript paste from clipboard

Obtener imagen pegada desde el portapapeles de Firefox

Question

Estoy tratando de permitir que el usuario pegue una imagen en un div . El problema es que necesito que funcione en Firefox.

Por lo que he leído, Firefox desde la versión 13 (creo) no permite el acceso de JavaScript al portapapeles, y event.clipboard no existe en él. Sé que se puede hacer porque Gmail y Yahoo lo permiten incluso en Firefox.

Solo quiero que funcione de cualquier manera posible, sea con jQuery, JavaScript, HTML5, no importa mientras funcione en la última versión de Firefox. (Sin flash sin embargo).

Answer 1

Utilicé el código de esta pregunta para mi implementación de pegado en varios navegadores. Funciona en todos los navegadores que he probado (desplácese hacia abajo para encontrar la solución / código real). Se debe tener en cuenta que event.clipboardData caduca inmediatamente después de que el evento de pegado haya finalizado su ejecución.

Seguí adelante y verifiqué cuádruple que esto funciona en la versión 19 de Firefox (no tengo 13 disponibles, pero parece que esta pregunta era sobre la degradación de una característica en las versiones más nuevas).

A continuación se muestra la respuesta, citada por Nico Burns :

Solución

Probado en IE6 +, FF 3.5+, versiones recientes de Opera, Chrome, Safari.

function handlepaste (elem, e) {
  var savedcontent = elem.innerHTML;
  if (e && e.clipboardData && e.clipboardData.getData) {// Webkit - get data from clipboard, put into editdiv, cleanup, then cancel event
    if (/text//html/.test(e.clipboardData.types)) {
      elem.innerHTML = e.clipboardData.getData(''text/html'');
    }
    else if (/text//plain/.test(e.clipboardData.types)) {
      elem.innerHTML = e.clipboardData.getData(''text/plain'');
    }
    else {
      elem.innerHTML = "";
    }
    waitforpastedata(elem, savedcontent);
    if (e.preventDefault) {
      e.stopPropagation();
      e.preventDefault();
    }
    return false;
  }
  else {// Everything else - empty editdiv and allow browser to paste content into it, then cleanup
    elem.innerHTML = "";
    waitforpastedata(elem, savedcontent);
    return true;
  }
}

function waitforpastedata (elem, savedcontent) {
  if (elem.childNodes && elem.childNodes.length > 0) {
    processpaste(elem, savedcontent);
  }
  else {
    that = {
      e: elem,
      s: savedcontent
    }
    that.callself = function () {
      waitforpastedata(that.e, that.s)
    }
    setTimeout(that.callself,20);
  }
}

function processpaste (elem, savedcontent) {
  pasteddata = elem.innerHTML;
  //^^Alternatively loop through dom (elem.childNodes or elem.getElementsByTagName) here

  elem.innerHTML = savedcontent;

  // Do whatever with gathered data;
  alert(pasteddata);
}

<div id=''div'' contenteditable=''true'' onpaste=''handlepaste(this, event)''>Paste</div>

Explicación

El evento onpaste tiene handlepaste función de handlepaste , y pasó dos argumentos: this (es decir, una referencia al elemento al que se adjunta el evento) y el event que es el objeto del evento.

La función del handlepaste :

La primera línea simplemente guarda el contenido del div editable en una variable para que pueda restaurarse nuevamente al final.

El if comprueba si el navegador es un navegador webkit (chrome o safari) y, si lo está, establece el contenido del div editable a los datos que se pegan. Luego cancela el evento para evitar que el webkit pegue cualquier cosa dos veces. Esto se debe a que el webkit es incómodo y no pegará nada si simplemente borras el div.

Si no es un navegador webkit, simplemente borra el div editable.

A continuación, llama a la función waitforpastedata

La función waitforpastedata :

Esto es necesario porque los datos pegados no aparecen de inmediato, por lo que, si acaba de llamar a processpaste inmediato, no tendrá que procesar ningún dato.

Lo que hace es verificar si el div editable tiene algún contenido, si lo hace, entonces llama a processpaste , de lo contrario, establece un temporizador para llamarse a sí mismo y verificar nuevamente en 20 milisegundos.

La función de processpaste :

Esta función guardó el innerHTML del div editable (que ahora es el dato pegado) en una variable, restaura el hHH interior del div editable a su valor original y alerta a los datos pegados. Obviamente, en un escenario de uso real, probablemente querrá algo más que solo alertar datos, puede hacer lo que quiera con esto desde aquí.

Es probable que también desee ejecutar los datos pegados a través de algún tipo de proceso de desinfección de datos. Esto se puede hacer mientras todavía está en la división editable o en la cadena extraída.

En una situación real, probablemente querría guardar la selección antes y restaurarla después ( Establecer la posición del cursor en contentEditable <div> ). Luego, podría insertar los datos pegados en la posición en la que se encontraba el cursor cuando el usuario inició la acción de pegar.

PS La combinación de este código, IE <= 8 y jsfiddle no parece funcionar, pero sí funciona en ie <= 8 en un entorno que no sea jsfiddle.