¿Existe un editor de documentos (doc, docx) disponible en javascript?

¿Alguien puede sugerirme alguna biblioteca en el editor de documentos javascript (final del cliente) donde el usuario pueda ver y editar documentos como doc, docx, odf, etc.

1 respuesta

1

Lo mejor que puede hacer es buscar convertidores y luego editar el contenido convertido.

He estado buscando una solución que funcione durante un par de semanas y la mejor que he encontrado hasta ahora es docx2html.

Dependiendo de su plataforma de desarrollo, también puede utilizar "ONLYOFFICE Document Server Community Edition" de Google. Tienen editores de páginas para Word, Excel y Powerpoint, pero son asp. Esta es una plataforma abierta código fuente y está disponible en Github. Quizás valga la pena echarle un vistazo.

¿Es posible convertir doc/docx a html usando jquery/javascript?

Necesito convertir doc/docx a html. Tengo archivos almacenados en Amazon s3. Necesito verlo y editarlo en el navegador. En este momento, estoy usando Apache POI para...

Generando documentos docx a partir de una plantilla docx javascript

Estoy buscando una biblioteca en javascript que pueda generar documentos docx a partir de una plantilla docx y pueda reemplazar etiquetas con sus valores y reemplazar imágenes con otras imágenes. Encontré el nombre de la biblioteca...

cómo juzgar si un archivo es doc o docx en POI

El título puede resultar un poco confuso. El método más simple debe basarse en el nombre de la extensión, como: // representa el InputStream if (filePath.endsWith(doc)) (WordExtractor ex = new...

doc o docx: ¿existe una forma segura de identificar el tipo de "solicitudes" en python3?

1) ¿Cómo puedo diferenciar entre archivos doc y docx de las solicitudes? a) por ejemplo, si tengo url="https://www.iadb.org/Document.cfm?id=36943997" r = request.get(url,timeout=15)...

Importe archivos doc y docx a .Net y C#

escribo editor de texto y quiero agregar la posibilidad de importar archivos .doc y .docx. Sé que puedo usar OLE Automation, pero si uso una biblioteca OLE reciente no lo hará...

Edición de documentos (DOC, DOCX, RTF, TXT) en formularios web

Estoy desarrollando una aplicación web usando asp.net 3.5. Esta aplicación tiene muchos documentos como .doc, .docx, .rtf, .pdf, .txt, etc... y a veces usar necesita editar estos documentos. EN...

Convertir DOC/DOCX a HTML semántico

Me gustaría convertir documentos doc/docx a HTML semántico. Algunos deseos/requisitos: HTML semántico tal que los encabezados del documento sean tablas, etc., -...

¿Paquetes de Golang para convertir doc a docx y docx a pdf?

Estoy escribiendo una aplicación web en Golang en la que el usuario puede cargar un archivo doc o docx. Algunos de los contenidos del archivo se cambiarán según el formato predefinido. Posteriormente el usuario...

Cargue un documento de Rich Word en el editor Telerik del editor RichText

Tengo algún formulario en el que subo un documento de Word y lo guardo en la base de datos. Tengo que hacer algunas marcas en estos documentos más tarde. Actualmente no he encontrado nada para...

Convertir un archivo doc a formato docx

Convertí el archivo docx a html ya que está en formato Zip. pero también necesito convertir archivos doc. ¿Hay alguna manera de cambiar el archivo DOC a docx usando código (preferiblemente Java)? Por favor...

Un editor de código es una herramienta útil para todo programador. Y cada uno elige por sí mismo: algunos valoran la funcionalidad, otros valoran la movilidad, para otros lo principal es el diseño y la comodidad. A algunas personas incluso les gusta escribir código en el Bloc de notas, pero es como intentar construir una casa con un martillo.

JavaScript es un lenguaje poderoso y caprichoso. Por un lado, hay muchos frameworks y bibliotecas, por otro lado, no la sintaxis más simple y los peligros asociados con la "dinámica". Por eso, es importante elegir un editor para trabajar con él. La elección correcta le proporcionará un código limpio, una alta velocidad de desarrollo, un mínimo de errores y placer en el trabajo. Elegir uno de los cientos de editores existentes puede llevar mucho tiempo, por eso hemos hecho parte del trabajo por usted. Aquí están los 5 mejores.

Tormenta web

WebStorm de JetBrains es maravilloso en ambas formas: como IDE admite el trabajo con sistemas de control de versiones, le permite implementar código de forma remota y, como editor, funciones estándar como resaltado de sintaxis, autocompletado y navegación.

Ventajas:

• LiveEdit: ver los cambios realizados en el código sin tener que guardarlo;
• interacción con frameworks, como React, Angular, Meteor;
• más de cien pruebas integradas para detectar errores;
• integración con Mocha, Protractor, Jest, Karma para pruebas unitarias;
• depurador a gran escala para depurar código en el lado del servidor y del cliente;
• navegación para trabajar simultáneamente con varios archivos;
• finalización de código, resaltado de sintaxis.

Defectos:

• cuesta $129 por el primer año de operación;
• Para los programadores principiantes, la funcionalidad es redundante.

Código de estudio visual

Una bifurcación del IDE de Visual Studio destinada a trabajar con código. Es fácil de aprender, fácil de usar y al mismo tiempo funcional.

Ventajas:

• finalización contextual tanto de la sintaxis como de las variables, módulos, funciones, etc. utilizados;
• depurador con puntos de interrupción, pila de llamadas, consola interactiva;
• soporte para fragmentos y plantillas;
• integración de Git;
• interfaz cómoda y sencilla;
• editor gratuito.

Defectos:

• pocos complementos.

Texto sublime

Un editor multiplataforma conveniente y probado en el tiempo, con una interfaz personalizable y la capacidad de realizar acciones triviales usando teclas de acceso rápido.

Ventajas:

• teclas de acceso rápido;
• navegación de código en forma de minimapa;
• capacidad de cambiar el tema visual;
• soporte de fragmentos;
• resaltado, autocompletado de variables y sintaxis;
• edición múltiple gracias al uso de punteros;
• construir soporte para el sistema;
• comprobación de sintaxis mientras escribe;
• guardado automático.

Defectos:

• versión completa cuesta $70;
• falta de un analizador de código para colocar enlaces.

Editor de átomos

Apareció en 2015 un editor de código de Git, copiando el diseño de Sublime Text y envuelto en Chromium.

Ventajas:

• más de 50 módulos abiertos;
• interfaz cómoda y agradable;
• gratis;
• finalización y resaltado de código;
• administrador de paquetes, de los cuales ya hay más de 3,5 mil;
• configuraciones flexibles para el editor, paquetes de complementos y temas de interfaz;
• edición y navegación mediante teclas de acceso rápido.

Defectos:

• baja productividad;
• conjunto vacío "listo para usar".

Soportes

En 2014, Brackets asustó a los programadores con errores y deficiencias, pero ahora está recuperando gradualmente la confianza con nuevas funciones de alta calidad.

Ventajas:

• equipo rico "listo para usar";
• Modo de vista previa en vivo: vista previa de las ediciones en el navegador en tiempo real;
• gerente de empaquetación;
• mostrar las imágenes y colores utilizados en el código;
• autocompletado y resaltado de sintaxis;
• analizador de código;
• gratis.

Defectos:

• enfoque estricto en la web y HTML+CSS+JavaScript;
• desarrollo lento;
• Rendimiento lento debido a las funciones de vista previa.

He creado con éxito un código para mostrar un archivo PDF en el navegador en lugar del cuadro de diálogo "abrir/guardar". Ahora estoy atascado intentando mostrar Documento de Word en el navegador. Quiero mostrar un documento de Word en Firefox, IE7+, Chrome, etc.

¿Alguien puede ayudar? Siempre aparece un cuadro de diálogo "abrir/guardar" cuando muestro la palabra documento en el navegador. Quiero implementar esta funcionalidad usando JavaScript.

6 respuestas

sin embargo, si prefiere tener soporte nativo, en la mayoría de los navegadores, si no en todos, recomendaría volver a guardar .doc/.docx como PDF; también se pueden renderizar de forma independiente utilizando PDF.js de Mozilla.

Las respuestas de Brandon y fatbotdesigns son correctas, pero al implementar Google Docs Preview encontramos varios archivos .docx que Google no pudo procesar. Cambié a la vista previa en línea de MS Office y funciona de maravilla.

https://view.officeapps.live.com/op/embed.aspx?src=http://remote.url.tld/path/to/document.doc"

Parece que hay algunas bibliotecas js que pueden manejar .docx (no .doc) para convertir html en el lado del cliente (en un orden específico):

https://github.com/lalalic/docx2html - docx a html, la mayoría de los elementos son compatibles

https://github.com/mwilliamson/mammoth.js: admite encabezados, listas, tablas, notas al pie, imágenes y texto de cuadro.--1-->

https://www.npmjs.com/package/docx2html: convierte documentos HTML a DOCX en el navegador

https://github.com/artburkart/docx2html - aparentemente funciona en el navegador

Nota: Si estás buscando La mejor manera convertir el archivo doc/docx en el lado del cliente, entonces probablemente la respuesta No hay necesidad. Si realmente necesitas hacerlo, hazlo. Del lado del servidor, es decir, con LibreOffice en modo sin cabeza, Apache-poi o cualquier otra biblioteca es lo mejor para usted.

ViewerJS es útil para ver/incrustar formatos de OpenOffice como odt, odp, ods y pdf.

para incrustar documento openoffice/pdf

/ViewerJS/ es la ruta de ViewerJS

#../demo/ohm2013 - agrega la ruta a tu archivo

Esto eliminará cualquier dependencia de tiempo de ejecución de los servicios de Google y Microsoft (por ejemplo, si las hubiera o estuviera limitado a ellos).

También tiene la ventaja de que puedes ampliar a otros tipos de archivos si lo deseas (PPTX, XLS, DOC, etc.)

Seguramente te has encontrado muchas veces con editores visuales que te permiten moldear de manera muy conveniente la apariencia de páginas o algunos mensajes, por ejemplo, en un foro. Y no con códigos BB, sino obteniendo inmediatamente un resultado específico. Hay bastantes editores de este tipo en Internet. Uno de los más populares es TinyMCE, sin embargo, soy partidario de mis propios scripts y creo que para cada tarea debe haber su propia solución, y no universal. Por eso, en este artículo te contaré cómo crear un editor visual en JavaScript.

Aquí hay un código bastante bien comentado:

// Mostrar botones de edición
documento.write("");
documento.write("");
documento.escribir("
");
documento.write(""); //Añadir un iframe
/* Dependiendo del navegador, obtenemos acceso al marco creado */
var isGecko = navigator.userAgent.toLowerCase().indexOf("gecko") != -1;
var iframe = (isGecko)? document.getElementById("frameId") : marcos["frameId"];
var iWin = (isGecko)? iframe.contentWindow: iframe.ventana;
var iDoc = (isGecko)? iframe.contentDocument: iframe.documento;
/* Crea el código para una página HTML vacía */
iHTML = "";
iDoc.open(); //abre el marco
iDoc.write(iHTML); // Agrega el código escrito al marco.
iDoc.cerrar(); //Cierra el marco
iDoc.designMode = "activado"; // Habilitar el modo de edición de fotogramas
/* Funciones a configurar apariencia texto seleccionado
Conjunto completo de comandos posibles: http://javascript.itsoft.ru/execcom/execCommands.html */
función setBold() (
iWin.enfoque();
iWin.document.execCommand("negrita", nulo, "");
}
función establecerItal() (
iWin.enfoque();
iWin.document.execCommand("cursiva", nulo, "");
}
función guardar() (
/* Guardando el código HTML en el campo oculto para que luego puedas pasar el código HTML resultante al controlador de script */
document.getElementById("contenido").value = iDoc.body.innerHTML;
devolver verdadero;
}

A primera vista, el código parece muy complejo. Y así es, pero si lo miras en función de sus elementos básicos, entonces no hay nada complicado. Hay un formulario normal y un campo oculto, donde se guarda el código HTML generado en el editor. El editor en sí es un marco normal, es decir, una página HTML normal en la que podemos escribir texto (designMode = "on"). Y se crean varios formatos utilizando el método execCommand(), que ejecuta el comando especificado en el parámetro. Y creo que no le resultará difícil crear nuevos botones y adjuntarles controladores similares.

No hay nada superfluo en este script, solo lo más importante y básico, y puedes usarlo como base para crear el tuyo propio. editor visual en JavaScript, en el que no habrá nada superfluo, sino solo lo que necesitas.

Puede escribir código JavaScript en un Bloc de notas normal; simplemente guarde el resultado con la extensión .js y no solo se conectará al sitio, sino que incluso funcionará. Sin embargo, el uso de un editor tan limitado ralentizará enormemente el desarrollo. Por tanto, es mejor llevar algo especializado. Existen varios criterios principales según los cuales debe elegir un editor para trabajar con código JavaScript.

Primero, necesitamos resaltar la sintaxis: nombres, operadores y Símbolos especiales debe mostrarse de manera diferente para que el código se pueda leer rápidamente.

Resaltado de sintaxis en Notepad++

En segundo lugar, necesita el autocompletado: cuando ingresa el nombre de una función o variable, el editor debería ofrecer varias opciones para los comandos que probablemente ingresará. Es aconsejable que también muestre sugerencias sobre el componente seleccionado, por ejemplo, argumentos requeridos, tipo de variable, Breve descripción etcétera.

Autocompletar en Notepad++

En tercer lugar, necesitamos la posibilidad de ocultar bloques individuales. Cuando se trabaja en proyectos grandes, esto es útil porque no es necesario desplazarse por grandes fragmentos de código para encontrar lo que necesita.

Ocultar bloques en Visual Studio Code

Es deseable que los errores estén resaltados; así podrá notarlos y corregirlos inmediatamente:

Mostrar errores en Visual Studio Code

Buenas ventajas serán la capacidad de trabajar con varios archivos en una ventana, un administrador de proyectos, selección de temas, instalación de complementos, etc.

Existe una gran cantidad de editores que cumplen con estos requisitos y son adecuados para trabajar con JavaScript. Sobre qué escribir código es un asunto personal de cada uno, pero muchas personas tienen problemas para elegir el programa adecuado, por eso hemos compilado una lista de 6 buenas herramientas.

Bloc de notas++

Notepad++ es un editor de código abierto sencillo y práctico. Tiene resaltado de sintaxis para varios idiomas, incluido JS, formato automático y autocompletado. Hay navegación en forma de pestañas, administrador de archivos y tarjetas de códigos.

Puede trabajar con diferentes codificaciones, conectar compiladores, utilizar complementos y otras funciones útiles. Por ejemplo, agregar QuickText mejorará el autocompletado integrado.

Notepad++ se actualiza periódicamente, por lo que los errores se corrigen rápidamente y se agregan nuevas funciones. Desafortunadamente, sólo funciona en Windows.

Empuje

El editor Vim ha sido un clásico durante mucho tiempo. Mucha gente dice que es difícil de entender, pero si le dedicas suficiente tiempo ya no querrás utilizar nada más.

Además de cumplir con todos los criterios elegidos, Vim también es totalmente personalizable, por lo que puedes:

• instalar complementos;
• cambiar de tema;
• asignar teclas de acceso rápido, etc.

Vim es completamente gratuito y funciona en todas las plataformas, desde Windows, MacOS y Linux hasta MS DOS y OS/2.

Microsoft Visual Studio

Microsoft Visual Studio es un IDE que tiene todo lo necesario para trabajar con JS. Además del resaltado de sintaxis y el autocompletado habituales, también puede utilizar un depurador y crear pruebas unitarias.

Sin embargo, el programa pesa bastante y carga mucho el sistema, por lo que no es muy adecuado para trabajar en ordenadores débiles.

Una suscripción mensual puede costar entre $45 y $250 por mes, pero también hay versión gratuita para desarrolladores principiantes y aquellos que crean programas de código abierto. El IDE está disponible para Windows y MacOS y se puede instalar en Linux usando Wine.

Código de estudio visual

Visual Studio Code es una versión ligera (~170 MB frente a 30 GB), multiplataforma y gratuita de Visual Studio. Este editor viene preinstalado con soporte para JavaScript, TypeScript y Node.JS.

Las extensiones para otros idiomas se pueden descargar directamente desde Visual Studio Code.

El depurador integrado y los comandos de Git para trabajar con el sistema de control de versiones de GitHub le permiten acelerar las pruebas y la publicación de aplicaciones.

Texto sublime

Sublime Text es un sencillo editor multiplataforma. Su interfaz es personalizable y puedes realizar algunas acciones usando teclas de acceso rápido.

También admite fragmentos, autocompletado, resaltado de sintaxis y navegación. Bonificación interesante: guardado automático. Sin embargo, es más necesario para los principiantes; después de todo, los programadores profesionales, a lo largo de los años de trabajo, desarrollan el hábito de guardar después de ingresar cada comando.

La principal desventaja de Sublime Text es que la versión completa cuesta 80 dólares (la licencia se emite para un usuario, que puede utilizar el editor en cualquier ordenador). Por lo demás encaja bien
Desarrolladores JS.