Cómo editar contenido en el editor visual y en la vista de código HTML

Un banco de trabajo de texto enriquecido con vista de código HTML: escribe o pega contenido en el editor visual, dale formato con la barra de herramientas y cambia a la vista de código cuando quieras editar el marcado directamente. El diálogo de vista previa muestra el documento actual y desde el código copias el HTML final.

El editor se ejecuta por completo en esta pestaña. No se sube nada y no hay botón de guardado, así que copia el código antes de cerrar la página si quieres conservar el resultado.

  1. Haz clic en el área de edición y escribe o pega el contenido: texto sin formato o marcado copiado de otra página.
  2. Dale formato con la barra de herramientas: negrita, cursiva, encabezados, listas, alineación, enlaces, tablas, imágenes por URL y más.
  3. Pulsa el botón de código para ver el mismo documento como HTML y editar etiquetas y atributos como texto.
  4. Usa Vista previa para renderizar el documento en un diálogo, o Limpiar HTML y Formato automático para quitar estilos o reordenar el marcado.
  5. Copia el HTML desde la vista de código: la página no guarda nada por ti.

Qué hace el editor con tu contenido

Barra de herramientas y diálogos

La barra cubre deshacer y rehacer, negrita, cursiva, subrayado y tachado, encabezados H1 a H4, familia y tamaño de fuente, colores de texto y fondo, alineación, listas numeradas y con viñetas, sangría, subíndice y superíndice, altura de línea, enlaces, imágenes, tablas con combinación y división de celdas, líneas horizontales, emoticonos, anclas y saltos de página.

Los diálogos de imagen, multimedia y Flash insertan desde una URL porque las subidas de archivos están desactivadas. Los bloques de código se insertan como elementos pre con una clase de idioma, por ejemplo lang-js; la página no carga ningún resaltador de sintaxis.

Vista de código y normalización del marcado

La vista de código y el editor visual son dos vistas del mismo documento, y al alternar entre ellas se vuelve a renderizar el marcado. El editor normaliza lo que renderiza: por ejemplo, una línea horizontal vuelve como etiqueta autocerrada, un estilo en línea gana el punto y coma final y las tablas reciben un contenedor tbody.

Por eso, un ciclo por el editor visual no es idéntico byte a byte al código que escribiste. Conserva el marcado original aparte si los bytes exactos importan y usa la vista de código para editar etiquetas a mano.

Procesamiento, privacidad y límites

Todo ocurre en la pestaña del navegador: el contenido nunca se sube, el editor sigue funcionando sin conexión una vez cargada la página y no hay botón de guardado ni de publicación: el documento solo existe hasta que cierras la pestaña.

El editor está pensado para contenido web normal. Los documentos muy grandes pueden ralentizar el área de edición, y el contenido pegado conserva los estilos con los que llega salvo que los quites con Limpiar HTML.

Herramientas recientes: