froala demos web-applications html5 wysiwyg copy-paste clipboard-interaction

web-applications - demos - froala options



Wysiwyg con imagen copiar/pegar (11)

Primero, entiendo que una imagen no puede ser "copiada" de una máquina local a un sitio web. Entiendo que hay que subirlo. Soy un programador web, y estoy familiarizado con las herramientas de web wysiwyg comunes como TinyMCE y FCKEditor. Mi pregunta es si existe un programa o módulo web o algo similar que funcione y 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.

He buscado en TX Text Control ( http://labs.textcontrol.com/ ) y estuve buscando en un flash wysiwyg que podría cargar el archivo automáticamente entre bastidores. No sé si esto existe, y Google no me ayudó mucho en mi búsqueda, así que pensé en preguntar a otros programadores.

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

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í me pareció bastante irrazonable. Decidí reunir el consejo de la comunidad en lugar de simplemente decirle al cliente ''No'' y las opciones aquí han sido extremadamente útiles e informativas para presentar posibles soluciones.

Mi pregunta es si existe un programa o módulo web o algo similar que funcione y se realizará una carga automática de imágenes para un wysiwyg

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

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.

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

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

Dado que su cliente ha optado por Word como su editor WYSIWYG, no tiene mucho sentido pegar ese contenido en otro editor WYSIWYG. Su solución óptima es buscar formas de automatizar la exportación HTML desde Word u OPen Office. Esto podría hacerse usando una combinación de VBA y un script 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.

Al buscar una solución similar, noté que GMail lo permite si estás 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.

Así que suponiendo que los ingenieros de Google han dedicado un tiempo serio a esto, sospecho que todavía no se puede hacer desde las aplicaciones de escritorio, pero tal vez si pudiera encontrar una manera rápida de guardar el contenido en la web (por ejemplo, mediante el blog de Word o Guardar). como características de HTML), entonces puede copiar y pegar desde eso, si su cliente está preparado para dar ese paso adicional y puede dejarlo guardar directamente en un servidor web.

Mella

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

Aquí hay un enlace a su ejemplo de copiar y pegar .

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 algunas notas.

  • Cuando copio y pego una imagen de un documento de OpenOffice guardado (no funciona con uno no guardado) en una instancia de CKEDitor, no tengo MS Word aquí para probar, pero supongo que funciona de manera similar. en el editor:

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

    podría ser posible ajustar un cargador de Flash o Java de una manera que este archivo pueda ser recuperado con muy poca interacción del usuario. Ser capaz de recuperar archivos de la computadora del usuario es un horrible agujero de seguridad, pero podría ser posible al menos preestablecer un cargador en el directorio del directorio temporal.

  • Sin embargo, el método de Canvas que menciona Gregory Pakosz me parece el más interesante, porque de esta manera podría ser posible almacenar la imagen en el lado del servidor en silencio, sin ninguna carga. Sin embargo, todavía se aplican las mismas restricciones de seguridad que en el ejemplo anterior: la imagen se encuentra en un dominio diferente y, por lo tanto, no puede leerse mediante una secuencia de comandos en la página. Uno tendría que encontrar una manera de evitar eso usando la configuración del navegador o escribiendo una extensión personalizada.

Puedes encontrar inspiración en ScreenshotMe .

Básicamente necesitas diferentes partes:

  • algo que saca la imagen del portapapeles y la carga en la web: esto podría ser un applet de Java, flash o extensiones de Firefox. Flash o Java tendrían la ventaja de ser un navegador cruzado
  • luego usa la etiqueta <canvas> para mostrar la imagen una vez que se ha cargado (use explorercanvas para traer el canvas a Internet Explorer)

Como señalé en mi comentario, Google está descontinuando los engranajes en favor de HTML5, eche un vistazo a 7 Interacción del usuario: HTML 5 .

EDITAR:

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

Hasta que se implemente el método de copiar y pegar HTML5, arrastre y suelte, tendrá que confiar en Flash o un applet de Java (firmado) para interactuar con el portapapeles.

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

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

Asumiré que su cliente desea que los visitantes de su sitio web vean documentos como páginas HTML y no como tipos MIME de Word.

Algunas opciones:

  • Usa Word para guardar como HTML. No es el HTML más limpio, pero 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 mucho dinero, desarrolle una solución personalizada utilizando VSTO

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

De todos modos, este es el primer, si no solo el editor javascript / HTML5 que he encontrado que pega con éxito imágenes de Word usando un plugin propietario que llaman PowerPaste. Al pegar por primera vez, le pide que vuelva a pegar para importar las imágenes. Funcionó como un amuleto. El único problema que tuve fue que es tremendamente caro para una empresa como la que tengo, con más de $ 500 por mes (± R6,650 + por mes en ZAR), que por desgracia sale de nuestras opciones. :(

Solo HTML

Podría usar algo que (al arrastrar y soltar) crea automáticamente un formulario HTML invisible, una entrada de archivo, copie la ruta del nombre de archivo en la entrada de archivo y envíe 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 estándar de Ajax.

Un poco de ayuda para soltar / pegar

No sé si HTML permite soltar elementos de archivo. Si no es así, puede consultar la especificación HTML 5 que Google está tratando de hacer.

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 el pegado) y crear el formulario HTML.

Por qué prefiero enviar un formulario

Prefiero la creación del formulario sobre el applet que envía el archivo porque no requiere otro puerto especial en el servidor o algo así.