Saltar a contenido

Plugin Vista previa de HTML

Una vista previa en vivo y de fidelidad completa del documento HTML (y PHP) activo, dibujada con un motor de navegador real (QtWebEngine) en un panel acoplable. A diferencia de la vista previa de Markdown, esta dibuja CSS, JavaScript, fuentes web y todo lo demás exactamente como lo haría un navegador.

Disponibilidad: no todas las descargas la incluyen

La vista previa de HTML la mueve QtWebEngine, un motor de navegador completo, y por eso es grande. Es, por tanto, opcional, y la descarga que tengas decide si la obtienes.

  • macOS — OctoEdit se publica en dos paquetes: uno con la vista previa de HTML y otro ligero sin ella. Elige la descarga que diga que incluye la vista previa de HTML y la tendrás en cuanto inicies el editor. No hay ningún complemento que instalar después: un paquete sin la vista previa no puede conseguirla más adelante, así que descarga el otro.
  • Windows — la vista previa también se puede añadir después a una instalación existente, como una descarga aparte de la vista previa de HTML que descomprimes en la carpeta donde está instalado OctoEdit, tras lo cual reinicias el editor.

Si Ver ▸ Vista previa de HTML no aparece en el menú, tu copia no incluye la vista previa. La vista previa de Markdown no necesita motor de navegador y siempre está disponible.

Compilando desde el código fuente: la vista previa está tras la opción de CMake MTE_ENABLE_HTML_PREVIEW — consulta BUILDING.md para ver las notas de empaquetado y de licencias.

Dónde encontrarlo

Ver ▸ Vista previa de HTML abre (o cierra) el panel de vista previa de la pestaña actual.

Cómo se comporta

  • Dibujado en vivo. La vista previa se vuelve a dibujar mientras escribes (con retardo; el retardo se relaja en archivos muy grandes).
  • Fidelidad completa. Las hojas de estilo, los scripts, las imágenes y demás recursos se cargan de forma relativa a la carpeta del documento, así que una página se previsualiza como lo haría en un navegador.
  • Enlaces a carpetas. Hacer clic en un enlace que apunta a una carpeta local carga el documento índice de esa carpeta (index.html / index.htm / index.xhtml) en lugar de un listado de directorio.
  • Abrir en el navegador. La barra de herramientas abre el archivo del disco (o, en los modos de servidor PHP de abajo, la URL en vivo) en tu navegador predeterminado.
  • Tamaño del panel. La vista previa conserva una porción de la ventana en lugar de un ancho fijo, así que crece y se encoge con ella — consulta Diseño guardado.

Un parpadeo con el renderizado de ventana por CPU

La vista previa mete un motor de navegador en la ventana del editor, y con Renderizado de la ventana en CPU la ventana tiene que volver a crearse para hacerle sitio. Por eso la ventana del editor parpadea una vez: la primera vez que abres la vista previa de HTML en una sesión, y nunca más después. El valor predeterminado, GPU, lo evita por completo; consulta Preferencias ▸ General ▸ Renderizado de la ventana.

Visibilidad de la vista previa

La visibilidad de la vista previa se recuerda por archivo, tanto durante una sesión como entre reinicios:

  • Los archivos web (.html, .htm, .xhtml y .php / .phtml / .php3 / .php4) abren la vista previa automáticamente la primera vez que los ves.
  • Los demás archivos no lo hacen, pero puedes abrir la vista previa en cualquier archivo con Ver ▸ Vista previa de HTML, y lo dibujará como HTML.
  • Dentro de una sesión, tu elección para una pestaña se restaura cuando vuelves a ella.
  • Entre reinicios se recuerda tu elección explícita para un archivo: un cierre manual sigue cerrado la próxima vez que abras ese archivo, y una vista previa que abriste en un archivo que no se abriría automáticamente vuelve a abrirse. Los archivos que nunca has tocado explícitamente siguen cada vez el valor predeterminado de apertura automática.

Previsualizar PHP

PHP se ejecuta en el servidor, así que QtWebEngine no puede ejecutarlo directamente. Elige cómo se tratan los archivos .php en Preferencias ▸ Complementos ▸ Vista previa de HTML:

Modo Qué hace Ideal para
Desactivado Muestra una página de instrucciones; nunca ejecuta ni descarga nada. Desactivar la vista previa de PHP.
Ejecutar con PHP (línea de comandos) Pasa el documento por el binario php local y dibuja su salida. Se ejecuta bajo la SAPI CLI de PHP. Archivos de plantillas o autónomos que imprimen HTML.
Ejecutar con PHP (servidor integrado) Sirve el documento a través del servidor web integrado de PHP (php -S) que el editor inicia y detiene por ti. Se ejecuta bajo la SAPI web. Páginas completas: phpinfo(), $_SERVER, sesiones, enrutado.
Usar un servidor propio (URL) Asigna el archivo abierto a una URL de un servidor que ejecutas tú (Apache, nginx, Docker, php artisan serve, …). Una pila de desarrollo local ya existente.

La ruta del ejecutable de PHP y Actualizar automáticamente mientras se escribe se aplican tanto al modo de línea de comandos como al de servidor integrado. Deja la ruta vacía para buscar en tu PATH y en las ubicaciones de instalación habituales (en macOS, una aplicación lanzada desde el Finder no hereda el PATH de tu intérprete de comandos, así que indica la ruta completa, p. ej. /opt/homebrew/bin/php).

Línea de comandos frente a servidor integrado

Estos dos modos ejecutan ambos el binario php local, pero bajo entornos (SAPI) distintos, y eso cambia lo que funciona:

  • Línea de comandos (SAPI CLI). Rápida y sencilla: se limita a mostrar lo que el script imprime. Pero phpinfo() se dibuja como texto plano, y funciones web como $_SERVER, las sesiones y el enrutado son limitadas o están vacías. Estupenda para archivos que sobre todo emiten HTML.

  • Servidor integrado (SAPI web). El editor lanza un pequeño php -S 127.0.0.1:<port> con raíz en la carpeta de tu archivo y carga la página por HTTP, de modo que se dibuja exactamente como en un servidor real: phpinfo() es una página HTML con estilos, $_SERVER está poblado, y las sesiones y las peticiones de recursos y subrecursos funcionan todas.

  • El servidor se inicia solo cuando previsualizas por primera vez un archivo .php en este modo, se reutiliza entre dibujados, se reinicia si cambias a un archivo de otra carpeta y se detiene cuando cierras el editor o abandonas el modo.

  • Se enlaza únicamente a 127.0.0.1, así que nunca es accesible desde la red.
  • Las ediciones sin guardar también se previsualizan: tu búfer en vivo se escribe en un archivo temporal de la carpeta del documento (para que __DIR__ y los include/require relativos se resuelvan correctamente) y es eso lo que se sirve. El archivo temporal se sustituye en cada dibujado y se elimina al salir o al cambiar de modo.

Tip

Si una página PHP aparece como texto en lugar de como página dibujada, cambia de línea de comandos a servidor integrado: es la diferencia entre la SAPI CLI y la web, no un error.

Usar un servidor propio (URL)

Si ya ejecutas PHP tras un servidor web, apunta la vista previa hacia él:

  • URL base — la raíz de tu servidor, p. ej. http://127.0.0.1:8000.
  • Raíz de documentos — la carpeta local que se sirve en esa URL base. El archivo abierto se asigna a una URL por debajo de ella. Déjala vacía para servir el archivo por su nombre desde la URL base. Si el archivo está fuera de la raíz de documentos, la vista previa lo informa para que puedas corregir la correspondencia.

Cuando no se encuentra PHP

En los modos de línea de comandos y de servidor integrado, si no se puede localizar ningún binario php, la vista previa muestra un breve error que explica cómo indicar la ruta o instalar PHP. La página de instrucciones del modo Desactivado enlaza también a las descargas de PHP y muestra cómo iniciar un servidor.

Véase también