42

En primer lugar, entiendo que una imagen no se puede "copiar" de una máquina local a un sitio web. Entiendo que debe ser cargado. Soy un programador web y estoy familiarizado con las herramientas comunes de wysiwyg web como TinyMCE y FCKEditor. Mi pregunta es si existe un programa o módulo web o algo así como lo que funciona, se realizará una carga automática de imágenes para un wysiwyg. Tengo un cliente que se queja constantemente de no poder copiar/pegar documentos con imágenes de MS Word en un wysiwyg para crear contenido en su sitio web.Wysiwyg con copiar/pegar imágenes

He examinado TX Text Control (http://labs.textcontrol.com/) y estaba buscando una wysiwyg posiblemente flash que podría cargar el archivo automáticamente detrás de las escenas. No sé si esto existe, y Google no me ayudó mucho en mi búsqueda, así que pensé en preguntarle a otros programadores.

Estoy abierto a cualquier tipo de tecnología de servidor o requisitos del navegador. Estoy buscando alguna herramienta basada en navegador en lugar de una herramienta de aplicación como Dreamweaver o de otro modo.

Si no existe una buena solución al problema, estoy dispuesto a aceptarlo en este momento.

Nota: Esta fue una solicitud de un cliente, y para mí parecía bastante irrazonable. Decidí recabar consejos de la comunidad en lugar de simplemente decirle al cliente 'No' y las opciones aquí han sido extremadamente útiles e informativas al presentar posibles soluciones.

+0

Hay una publicación relacionada interesante aquí: http://stackoverflow.com/questions/6333814/how-does-the-paste-image-from-clipboard-functionality-work-in-gmail-and- google-c Se trata de cómo gmail está haciendo esta función exacta y contiene un enlace a un contenedor de jquery. – Guillaume

+0

Implementé archivos de arrastrar y soltar usando Silverlight en este proyecto http://azureslfileuploader.codeplex.com/ –

Respuesta

28

Puede encontrar inspiración en ScreenshotMe.

Básicamente se necesitan diferentes partes:

  • algo que se lleva a cabo la imagen del portapapeles y lo sube a la web: esto podría ser un applet de Java, Flash o extensiones de Firefox. Flash o Java tendrían la ventaja de ser navegadores
  • continuación, se utiliza la etiqueta <canvas> para mostrar la imagen una vez que se ha cargado (utilizar explorercanvas para llevar canvas a Internet Explorer)

Como he señalado en mi comentario, Google está abandonando los engranajes a favor de HTML5, eche un vistazo al 7 User Interaction - HTML 5.

EDIT:

HTML5 cuando se implementa se supone que debe interactuar con el portapapeles del sistema. Me imagino el escenario siguiente funcionaría:

Hasta que HTML5 copiar/pegar arrastrar & soltar se implemente, tendrá que confiar en Flash o en (firmado) Java applet para interactuar con el portapapeles .

+0

Me gusta esta opción, y parece que las herramientas podrían estar todas allí están disponibles con HTML 5 y el elemento canvas –

+0

Esto parece ser una solución particularmente elegante para el futuro, e incluye la mención de que esto actualmente requiere Flash o Java. – BobMcGee

+0

¿Alguien sabe cuándo se implementará la integración del portapapeles en las versiones principales de los navegadores? – Symmetric

1

sólo HTML

Usted podría utilizar algo que (en arrastrar y soltar) crea automáticamente un formulario HTML invisible, una entrada de archivo, copiar la ruta del nombre de archivo en el fileinput y enviar el formulario.

Puede crear el formulario dentro de un iframe invisible para enviarlo en segundo plano sin cambiar la página actual. Ya sabes, el procedimiento Ajax estándar.

Un poco de ayuda para dejar caer/pegar

No sé si HTML permite soltar elementos de archivo. Si no lo hace, puede ver la especificación de HTML 5 que Google intenta hacer avanzar.

Otra opción es usar algún tipo de componente de cliente enriquecido (Java Applet con Swing o Flash, o Silverlight, o wathever) al menos para captar la caída del archivo (o la pegada) y crear el formulario HTML.

por las que prefiero el envío de un formulario de

prefiero la creación de la forma sobre el envío del archivo, ya que no requiere otro puerto especial en el servidor o algo por el estilo applet.

+1

Ah, y mira la larga demostración de Google Wave Video. Ha cargado automáticamente imágenes usando Gears pero su plan es usar HTML 5. Entonces ... si Google lo está viendo de esa manera ... – helios

2

Tengo un cliente que se queja constantemente de no poder copiar/pegar documentos con imágenes de MS Word en wysiwyg para crear contenido en su sitio web.

Y esto no funcionará. MS Word no crea HTML válido, las páginas aparecerán rotas para los usuarios de navegadores compatibles. Word también tiene algunos métodos raros de anclar imágenes y texto fluido que no se traducirá. En resumen, Word es un entorno pobre para la creación de HTML.

Por supuesto sus clientes probablemente no va a aceptar lo que nos lleva a la opción 2:

Debido a que su cliente ha optado por la Palabra como su editor WYSIWYG hay muy poco punto de pegar ese contenido en otra editor WYSIWYG. Su solución óptima es buscar formas de automatizar la exportación de HTML desde Word u OPen Office. Esto podría hacerse usando una combinación de VBA y una secuencia de comandos del lado del servidor para convertir primero el documento a HTML (esto también escribirá las imágenes en el disco) y luego cargar el contenido combinado en el servidor.

+0

HTMLTidy puede hacer un trabajo maravilloso al arreglar los peores excesos de MS Word, y le permite habilitar copiar y pegar de desagradable MS Word HTML sin demasiada dificultad. Estoy de acuerdo en que el cliente es claramente difícil, pero su solución puede ayudar. – BobMcGee

1

Entiendo la situación de su cliente. Estoy trabajando en lo mismo, pero con poca prioridad en este momento, así que no puedo presentar ninguna solución, solo unas pocas notas.

  • Cuando copio + pegar una imagen desde un salvados documento de OpenOffice (no funciona con uno sin guardar) en una instancia de CKeditor - no tengo MS Word aquí para probar pero supongo que funciona de manera similar - me sale el siguiente código HTML insertado en el editor:

    <img src="file:///C:/Users/PEKKAG%7E1/AppData/Local/Temp/moz-screenshot-4.png">

    que podría ser posible modificar un cargador de flash o Java de una manera que este archivo puede ser recuperado con muy poca interacción por parte del usuario.Ser capaz de buscar archivos desde la computadora del Usuario es horrible agujero de seguridad pero es posible al menos preestablecer una carga en el directorio del directorio temporal.

  • Sin embargo, el lienzo método que Gregory Pakosz menciona encuentro el más interesante, porque de esta manera se podría ser posible almacenar la imagen en el lado del servidor en silencio, sin ningún tipo de carga. Sin embargo, se aplican las mismas restricciones de seguridad que en el ejemplo anterior: la imagen está en un dominio diferente y, por lo tanto, no puede leerse mediante un script en la página. Uno debería encontrar una forma de evitar el uso de la configuración del navegador o escribir una extensión personalizada.

1

Si entiendo bien su pregunta, su cliente podría tener cualquier palabra al azar documento y que algunos de estos documentos podría contener imágenes.

Lo que parece estar describiendo es similar a la gestión de contenidos en algunos aspectos y para la creación de páginas web estáticas en otros.

Vamos a suponer que su cliente quiere visitantes a su sitio web para ver documentos tales como páginas HTML y no como tipos MIME Palabra.

Algunas opciones:

  • utilizar Word para guardar como HTML. No es el más limpio HTML pero es probablemente la solución más limpia.

  • haga que su cliente compre un producto como Dreamweaver que importará su documento de Word y limpiará el HTML generado de Word.

  • si su cliente tiene un montón de dinero, desarrollar una solución personalizada con VSTO

+0

Gracias Gerry. Sus primeras opciones aún no resuelven el problema de carga de las imágenes en el documento de Word. –

+0

@ jW De nada. Debo haber omitido algo o haber hecho algunas suposiciones falsas. En general, les enseñé a mis clientes a usar Windows ftp.exe para cargar desde la línea de comandos. Productos como Dreamweaver automatizan el proceso de carga. Mi impresión fue que su cliente intentaba mantener la integridad del documento de Word, incluidos los gráficos dentro de ese documento. si solo son los gráficos, su cliente debe guardar la imagen en un archivo y cargar ese archivo. Lo siento, no tengo una idea clara de lo que su cliente está tratando de lograr. TIMTOWTDI =. hay más de una forma de hacerlo – gerryLowry

+0

Desafortunadamente, el cliente es particularmente difícil. Lo que desean es no usar ftp, sino simplemente una interfaz web y poder copiar/pegar un documento del trabajo y (como usted dijo) preservar la integridad del documento, que incluiría las imágenes. Por lo tanto, se debe realizar una carga de los archivos de imagen para obtener los datos allí, y luego se debe convertir el formato de la palabra a HTML. Es una suposición poco razonable de un cliente, pero estaba buscando cualquier posible solución. –

0

En la búsqueda de una solución similar, me di cuenta de que Gmail permite que si usted está copiando y pegando desde un navegador.

Si copia desde Word, parece conocer las dimensiones de la imagen (puede ver un contorno de la imagen) pero en realidad no pega/carga la imagen.

Desde aplicaciones de escritorio que no son de Office parece que no hay soporte.

Suponiendo que los ingenieros de Google dedicaron un tiempo muy serio a esto, sospecho que todavía no se pueden hacer las aplicaciones de escritorio, pero tal vez podría encontrar una manera rápida de guardar el contenido en la web (por ejemplo, El blog de Word o las funciones Guardar como HTML), puede copiar y pegar desde allí, si su cliente está preparado para dar ese paso adicional y puede dejar que se guarden directamente en un servidor web.

Nick

1

Mi pregunta es si existe un módulo de programa o web o algo por el estilo que funciona llevará a cabo un proceso de carga automática de imágenes para un WYSIWYG

XStandard Pro subir imágenes al servidor pegado desde Word u otras aplicaciones/sistema de archivos.

-1

El editor WYSIWYG llamado Redactor permite copiar y pegar imágenes directamente en el editor en lugar de hacer clic en un proceso de carga imagen botón.

Aquí está a link to their copy-paste example.

+0

@brasofilo: ¿Hablas en serio? Me marcó porque (en sus palabras) "No importa que la pregunta sea antigua"? – Ola

2

Veo que este es un hilo viejo, pero en caso de que alguien todavía esté buscando algo así (como yo), me encontré con un producto llamado textbox.io esta noche de una compañía llamada Ephox (parece que compraron TinyMCE como bien).

De todos modos, este es el primer editor, si no el único, javascript/HTML5 que he encontrado que pega imágenes de una palabra con un plugin patentado que llaman PowerPaste. Luego de la pegada inicial, solicita presionar pegar nuevamente para importar las imágenes. Funcionó a las mil maravillas: el único problema que tuve fue que es infernalmente costoso para una startup como la que estoy involucrada a más de $ 500 por mes (± R6,650 + por mes en ZAR), lo que desafortunadamente lo desafortunada :(