Editor HTML en línea v2.0

Acerca de Editor HTML en línea

Un editor HTML online es una herramienta que te deja escribir, dar formato y previsualizar código HTML directamente en el navegador, sin instalar nada. El editor HTML de ToolsPivot va un paso más allá: pone el panel visual y el panel de código uno al lado del otro y los mantiene sincronizados mientras escribes. Resuelve el problema que más tiempo hace perder al pegar contenido desde Word o Google Docs, un marcado sucio lleno de estilos que rompen la maquetación de tu web.

Qué es el editor HTML online de ToolsPivot

Funcionalidad principal

El editor HTML de ToolsPivot combina un panel visual de tipo WYSIWYG con un panel de código fuente sincronizados en tiempo real. El panel visual es una zona editable nativa del navegador, así que genera HTML real y limpio en lugar de marcado artificial. El panel de código usa CodeMirror con numeración de líneas y resaltado de sintaxis. Cuando escribes en un lado, el otro se actualiza al instante, sin botones de "aplicar" ni saltos entre pestañas.

Usuarios objetivo y casos de uso

Lo usan sobre todo redactores, gestores de contenido, desarrolladores web y responsables de marketing de pymes. Los perfiles no técnicos lo aprovechan para limpiar textos antes de publicarlos en WordPress o PrestaShop. Los perfiles técnicos lo usan para retoques rápidos, para comprobar etiquetas mal cerradas o para pasar un fragmento a Markdown sin abrir el editor de escritorio.

Problema y solución

El problema es doble: el HTML que sale de Word arrastra estilos mso-, etiquetas y clases sobrantes, y la mayoría de editores online te obliga a alternar entre edición y vista previa. La solución aquí es la limpieza automática al pegar y la sincronización de doble panel. Un artículo pegado desde Google Docs pasa de cientos de líneas infladas a un marcado legible en un clic, listo para pasar por el comprobador de legibilidad antes de publicarlo.

Principales ventajas del editor HTML online

• Limpieza al pegar: el contenido copiado desde Word o Google Docs se intercepta y se depura antes de entrar en el editor, sin que tengas que pulsar nada.
• Sin alternar vistas: ves el resultado y el código a la vez, así que corriges el formato mirando el efecto real y no una previsualización desfasada.
• Todo en tu navegador: lo que escribes, limpias y validas no sale del equipo. No hay subida de archivos para la edición local.
• Código de salida legible: js-beautify formatea el HTML con sangrado coherente, útil cuando otra persona tiene que revisar tu trabajo.
• Detección de etiquetas mal cerradas: el validador te dice qué etiqueta falla y en qué línea, algo poco frecuente entre las herramientas gratuitas en español.
• Salida triple: copias el HTML, copias la versión en Markdown o descargas un documento .html completo. Si después necesitas reducir peso, pásalo por el compresor de HTML.
• No pierdes el trabajo: el borrador se guarda solo en el almacenamiento local del navegador y vuelve a aparecer cuando regresas.

Funciones clave del editor HTML

• Doble panel sincronizado: visual y código conectados en ambos sentidos, con un control interno que evita bucles de actualización entre los dos.
• Menú de limpieza: quitar estilos en línea, eliminar clases e identificadores, borrar etiquetas vacías, colapsar espacios en blanco y convertir a texto plano.
• Embellecer y minificar: pasas de un bloque comprimido a HTML sangrado y vuelves atrás cuando toca reducir el tamaño del archivo.
• Validación de etiquetas: un recorrido por la pila de etiquetas que respeta los cierres opcionales de li, tr, td o p y no inventa errores falsos.
• Buscar y reemplazar: localiza y sustituye texto o patrones dentro del código fuente sin salir del editor.
• Formato de bloques e inline: párrafo, H1 a H4, cita, bloque de código, negrita, cursiva, subrayado, tachado, superíndice, subíndice y código en línea.
• Inserción completa: enlaces, imágenes por URL o subida, tablas con edición de filas y columnas, línea horizontal y 36 caracteres especiales. Para escapar símbolos que no están en esa lista, recurre al codificador de HTML.
• Vídeo incrustado: pegas una dirección de YouTube o Vimeo y se convierte en un iframe adaptable, sin tocar el código a mano.
• Importación desde archivo y nube: abres un .html local con FileReader, que se queda solo con el , o traes un documento desde Google Drive o Dropbox.
• Vistas y comodidad: modo dividido, solo código, solo visual, pantalla completa, modo oscuro recordado entre sesiones e interfaz en 18 idiomas.
• Color de texto y resaltado: aplicas color y fondo desde la barra. Para elegir el tono exacto en HEX o RGB, apóyate en el selector de color.
• Exportación a Markdown: Turndown convierte el HTML a Markdown; si después quieres seguir escribiendo en ese formato, usa el editor de Markdown.

Cómo funciona el editor HTML de ToolsPivot

1. Abre la herramienta y escribe en el panel visual o pega tu contenido desde Word, Google Docs o tu gestor de contenidos.
2. Comprueba el panel de código: verás el HTML ya limpio y con sangrado, línea a línea.
3. Aplica los ajustes que necesites desde el menú de limpieza y pulsa la validación para revisar las etiquetas.
4. Retoca lo que falle, en el panel visual si es cuestión de formato o en el código si es cuestión de estructura.
5. Copia el HTML, cópialo en Markdown o descarga el documento terminado. Antes de publicar, un repaso con el corrector gramatical evita erratas que el editor no detecta.

Cuándo usar el editor HTML online

Resulta más útil cuando el contenido viene de otro sitio y tiene que acabar en una web. Ese trayecto, del procesador de textos al CMS, es donde se cuela el marcado sucio y donde se rompen las maquetaciones. También sirve para cualquier retoque puntual que no justifica abrir un entorno de desarrollo.

• Antes de publicar en WordPress: limpias el artículo y evitas que los estilos de Word pisen la hoja de estilos del tema.
• Fichas de producto: preparas descripciones con listas y tablas para WooCommerce o PrestaShop sin dejar restos de clases ajenas.
• Firmas y plantillas de correo: depuras el marcado, que en el correo electrónico es especialmente sensible al código sobrante.
• Aprender HTML: escribes en visual y ves qué etiquetas genera, que es la forma más rápida de entender la relación entre formato y código.
• Auditar un fragmento ajeno: pegas el código que te pasa un cliente y localizas de un vistazo las etiquetas sin cerrar.
• Convertir a Markdown: pasas un contenido antiguo en HTML a Markdown para un repositorio o una documentación.
• Retoques sin herramientas: cuando estás en un equipo prestado y no puedes instalar tu editor de siempre.

No es la herramienta indicada si necesitas maquetar una web entera con hojas de estilo y scripts propios, ni para proyectos con control de versiones. Para eso, un entorno de desarrollo sigue siendo la opción sensata.

Casos de uso

Redactora freelance que entrega en WordPress

Contexto: escribe en Google Docs y su cliente le pide el artículo maquetado en el CMS.

• Pega el texto en el panel visual y el limpiador retira clases y estilos heredados.
• Ajusta los encabezados de H2 a H3 desde el desplegable de formato.
• Copia el HTML resultante y lo pega en el editor de código de WordPress.

Resultado: el artículo hereda el diseño del tema y no aparecen fuentes ni interlineados extraños. Un vistazo previo con el contador de palabras confirma que cumple la extensión pactada.

Autónomo con tienda en PrestaShop

Contexto: actualiza cincuenta descripciones de producto heredadas de un proveedor.

• Pega cada descripción y aplica "eliminar estilos en línea" y "quitar clases".
• Reconstruye las tablas de características con el editor de filas y columnas.
• Valida las etiquetas antes de guardar para no romper la plantilla de la ficha.

Resultado: las fichas quedan homogéneas y el marcado pesa una fracción de lo que ocupaba. Comprueba después la relación entre código y texto para ver la mejora.

Responsable de marketing en una pyme

Contexto: prepara la newsletter mensual y la firma de correo del equipo comercial.

• Monta la estructura con tablas, que siguen siendo lo más fiable en clientes de correo.
• Inserta el logotipo por URL y ajusta la alineación desde la barra.
• Minifica el resultado antes de pegarlo en la plataforma de envío.

Resultado: la plantilla se ve igual en Outlook y en Gmail, sin los desajustes que provoca el código heredado de Word. Si el logotipo pesa demasiado, redúcelo antes con el compresor de imágenes.

Estudiante de desarrollo web

Contexto: empieza con HTML y se pierde entre la teoría y el resultado en pantalla.

• Escribe una lista o una tabla en el panel visual y observa el código que aparece.
• Modifica una etiqueta a mano y ve el efecto inmediato en el panel visual.
• Usa el validador para entender qué significa una etiqueta sin cerrar.

Resultado: asocia cada elemento visual con su etiqueta sin memorizar listados. Para practicar con contenido de relleno, tira del generador de Lorem Ipsum.

Por qué el HTML de Word rompe tu maquetación

Word no genera HTML pensado para la web, sino un marcado que reproduce su propio modelo de documento. Al copiar, el portapapeles arrastra estilos con el prefijo mso-, etiquetas propietarias como , spans y fonts vacíos, y clases del tipo MsoNormal. Cuando ese bloque aterriza en un CMS, sus estilos en línea tienen más prioridad que la hoja de estilos del tema, así que el texto se ve con otra fuente, otro tamaño y otro interlineado por mucho que el diseño diga lo contrario.

Google Docs hace algo parecido, aunque de forma más discreta: reparte estilos en línea por cada párrafo y envuelve el texto en spans anidados. El resultado es el mismo, un contenido que se resiste al diseño del sitio. Por eso la limpieza al pegar actúa antes de que el contenido llegue al editor, no después, y por eso el menú de limpieza permite retirar estilos, clases e identificadores por separado según lo que quieras conservar.

Qué se queda en tu navegador y qué no

La edición, la limpieza, la validación y la exportación se ejecutan íntegramente en tu navegador, sin enviar nada a un servidor. El borrador se guarda en el almacenamiento local del propio navegador, no en una cuenta remota, y CodeMirror, js-beautify y Turndown se sirven desde el mismo dominio en lugar de cargarse desde una CDN externa.

Hay una excepción que conviene decir con claridad: la importación desde Google Drive o Dropbox sí pasa por el servidor, porque el archivo que eliges hay que descargarlo y convertirlo a texto. Si trabajas con documentos que contienen datos personales y te aplica el RGPD o la LOPDGDD, la ruta segura es abrir el archivo desde tu equipo, no desde la nube. Muchas herramientas del mercado español anuncian privacidad total sin distinguir estos dos caminos; aquí la diferencia está sobre la mesa para que decidas tú.

Qué comprueba la validación de etiquetas y qué no

La validación recorre el código fuente construyendo una pila de etiquetas y avisa de las que quedan sin cerrar o mal anidadas, con el número de línea. Respeta las reglas de cierre opcional de HTML, así que un