variable react from and javascript clipboard copy-paste

react - javascript select and copy to clipboard



Pegar una imagen desde el portapapeles usando JavaScript (7)

¿Cómo pegamos una imagen del portapapeles en un editor de texto enriquecido personalizado usando javascript? (ctrl + c y ctrl + v o una instantánea).

¿Alguien ha usado el editor de texto enriquecido de Ajax? ¿Pegar una imagen desde el portapapeles al trabajo Ajax RTE?

Por favor comparte tus pensamientos!

¡Gracias!



Desafortunadamente, no es posible pegar una imagen desde el portapapeles al RTE.

Si copia un blob de una aplicación de escritorio como Microsoft Word que contiene una imagen y algo de texto, la imagen aparecerá como una referencia discontinua (aunque las proporciones serán correctas) y el texto se pegará correctamente (se perderá el formato) .

Lo único que es posible es copiar una imagen dentro de la RTE y volver a pegar dentro de la RTE.


El acceso al portapapeles JavaScript es un riesgo de seguridad y si (falsamente) cree que lo necesita, es probable que necesite volver a su diseño ...


Esto definitivamente es posible ahora en Chrome y Firefox. No estoy tan seguro de IE / Safari.

Mire imgur.com, onpaste, y pasteboard.co como ejemplos, y vea el código para pasteboard en github así como la excelente redacción de Joel en su blog

Para el registro, necesita que el usuario presione Ctrl + V en su elemento, y luego puede capturar los datos en el controlador de eventos de pegado leyendo en event.clipboardData pero para que funcione a nivel inferior, debe estar seguro de enfocarse está en un elemento contenteditable vacío, y extrae los resultados de allí, lo que no funciona bien en Firefox 22. Ver here


Los nuevos navegadores, como Firefox 4, admiten el pegado de datos de imágenes desde el portapapeles a un RTE como URI de datos con datos PNG codificados . Sin embargo, la mayoría de las aplicaciones web analizan incorrectamente estos URI de datos y los descartan. Yahoo mail maneja correctamente. Sin embargo, Gmail y Hotmail lo descartan. He notificado a Google y Microsoft sobre esto.


Por ahora encontré el objeto ClipboardData .

Pero solo recupera el formato de texto o la URL del portapapeles. clipboardData es solo IE, funciona con una cadena de caracteres y devuelve nulo si pegamos una imagen.

un ejemplo de prueba

<form> <input type="text" id="context" onClick="paste();"> </form> <script type="text/javascript"> function paste() { var sRetrieveData = clipboardData.getData("Text"); document.getElementById(''context'').value = sRetrieveData; } </script>

Por defecto, el acceso al portapapeles no está habilitado en Firefox, here explicación. Por otro lado, execCommand() solo procesa valores de texto y no es compatible con Firefox.

Como dijeron los demás, el hecho de que el código funcione en IE es un riesgo de seguridad, cualquier sitio puede acceder al texto de su portapapeles.

La forma más sencilla de copiar las imágenes relativas a la URL es usar un applet de java, el complemento de Windows activeX, el código .net o arrastrar y soltarlo.


Desde hace algún tiempo:

No creo que esto sea posible.

Posiblemente puede pegar el nombre del archivo, pero realmente necesita la ruta completa a la imagen. De hecho, necesitas subir la imagen desde el sistema del usuario al servidor.