Vai al contenuto

Plugin Anteprima HTML

Un'anteprima dal vivo, a fedeltà piena, del documento HTML (e PHP) attivo, resa con un vero motore di browser (QtWebEngine) in un pannello ancorabile. A differenza dell'anteprima Markdown, questa rende CSS, JavaScript, caratteri web e tutto il resto esattamente come farebbe un browser.

Disponibilità: non ogni download la include

L'anteprima HTML è mossa da QtWebEngine, un motore di browser completo, ed è di conseguenza grande. È quindi facoltativa, e il download che hai decide se la ottieni.

  • macOS — OctoEdit viene pubblicato in due pacchetti: uno con l'anteprima HTML e uno snello senza. Scegli il download che dichiara di includere l'anteprima HTML, e l'anteprima c'è dal momento in cui avvii l'editor. Non c'è alcun componente aggiuntivo da installare dopo: un pacchetto senza l'anteprima non può guadagnarla più tardi, quindi scarica piuttosto l'altro.
  • Windows — l'anteprima si può anche aggiungere in seguito a un'installazione esistente, come un download separato dell'anteprima HTML che scompatti nella cartella in cui OctoEdit è installato, e poi riavvii l'editor.

Se Visualizza ▸ Anteprima HTML manca dal menu, la tua copia non include l'anteprima. L'anteprima Markdown non ha bisogno di un motore di browser ed è sempre disponibile.

Compilando dai sorgenti: l'anteprima sta dietro l'opzione CMake MTE_ENABLE_HTML_PREVIEW — vedi BUILDING.md per le note su pacchettizzazione e licenze.

Dove trovarlo

Visualizza ▸ Anteprima HTML apre (o chiude) il pannello di anteprima della scheda corrente.

Come si comporta

  • Resa dal vivo. L'anteprima viene ridisegnata mentre digiti (con ritardo; il ritardo si allenta per i file molto grandi).
  • Fedeltà piena. Fogli di stile, script, immagini e altre risorse vengono caricati rispetto alla cartella del documento, quindi una pagina si vede in anteprima come si vedrebbe in un browser.
  • Collegamenti a cartelle. Fare clic su un collegamento che punta a una cartella locale carica il documento indice di quella cartella (index.html / index.htm / index.xhtml) invece di un elenco di directory.
  • Apri nel browser. La barra degli strumenti apre il file su disco (oppure, per le modalità server PHP qui sotto, l'URL dal vivo) nel tuo browser predefinito.
  • Dimensione del pannello. L'anteprima mantiene una quota della finestra anziché una larghezza fissa, quindi cresce e si restringe con essa — vedi Disposizione salvata.

Un lampeggio con il rendering della finestra su CPU

L'anteprima porta un motore di browser dentro la finestra dell'editor, e con Rendering della finestra impostato su CPU la finestra va ricreata per fargli posto. La finestra dell'editor lampeggia quindi una volta — la prima volta che apri l'anteprima HTML in una sessione, e mai più dopo. Il valore predefinito, GPU, lo evita del tutto; vedi Preferenze ▸ Generale ▸ Rendering della finestra.

Visibilità dell'anteprima

La visibilità dell'anteprima viene ricordata per file, sia durante una sessione sia tra i riavvii:

  • I file web (.html, .htm, .xhtml e .php / .phtml / .php3 / .php4) aprono l'anteprima automaticamente la prima volta che li visualizzi.
  • Gli altri file no, ma puoi aprire l'anteprima su qualsiasi file con Visualizza ▸ Anteprima HTML, e renderà quel file come HTML.
  • Dentro una sessione, la tua scelta per una scheda viene ripristinata quando vi torni.
  • Tra i riavvii viene ricordata la tua scelta esplicita per un file: una chiusura manuale resta chiusa la volta successiva che apri quel file, e un'anteprima che hai aperto su un file che non si aprirebbe automaticamente si riapre. I file che non hai mai toccato esplicitamente seguono ogni volta il valore predefinito di apertura automatica.

Anteprima di PHP

PHP gira sul server, quindi QtWebEngine non può eseguirlo direttamente. Scegli come vengono trattati i file .php in Preferenze ▸ Estensioni ▸ Anteprima HTML:

Modalità Che cosa fa Ideale per
Disattivata Mostra una pagina di istruzioni; non esegue né recupera mai nulla. Spegnere l'anteprima di PHP.
Esegui con PHP (riga di comando) Passa il documento attraverso il binario php locale e rende il suo output. Gira sotto la SAPI CLI di PHP. File di modello / autonomi che stampano HTML.
Esegui con PHP (server integrato) Serve il documento attraverso il server web integrato di PHP (php -S) che l'editor avvia e ferma per te. Gira sotto la SAPI web. Pagine complete: phpinfo(), $_SERVER, sessioni, instradamento.
Usa un server gestito da te (URL) Associa il file aperto a un URL su un server che gestisci tu (Apache, nginx, Docker, php artisan serve, …). Uno stack di sviluppo locale già esistente.

Il percorso dell'eseguibile di PHP e Aggiorna automaticamente durante la digitazione valgono sia per la modalità riga di comando sia per quella server integrato. Lascia il percorso vuoto per cercare nel tuo PATH e nelle posizioni di installazione più comuni (su macOS un'applicazione avviata dal Finder non eredita il PATH della tua shell, quindi indica il percorso completo, ad es. /opt/homebrew/bin/php).

Riga di comando contro server integrato

Le due modalità eseguono entrambe il binario php locale, ma sotto ambienti (SAPI) diversi, e questo cambia ciò che funziona:

  • Riga di comando (SAPI CLI). Rapida e semplice: si limita a mostrare ciò che lo script stampa. Ma phpinfo() viene reso come testo semplice, e le funzionalità web come $_SERVER, le sessioni e l'instradamento sono limitate o vuote. Ottima per file che soprattutto emettono HTML.

  • Server integrato (SAPI web). L'editor avvia un piccolo php -S 127.0.0.1:<port> con radice nella cartella del tuo file e carica la pagina via HTTP, così viene resa esattamente come su un server vero: phpinfo() è una pagina HTML con stili, $_SERVER è popolato, e sessioni e richieste di risorse e sotto-risorse funzionano tutte.

  • Il server viene avviato solo quando visualizzi in anteprima per la prima volta un file .php in questa modalità, riutilizzato tra una resa e l'altra, riavviato se passi a un file in un'altra cartella, e fermato quando chiudi l'editor o esci dalla modalità.

  • Si lega solo a 127.0.0.1, quindi non è mai raggiungibile dalla rete.
  • Anche le modifiche non salvate vengono viste in anteprima: il tuo buffer dal vivo viene scritto in un file temporaneo nella cartella del documento (così __DIR__ e gli include/require relativi si risolvono correttamente) ed è quello a essere servito. Il file temporaneo viene sostituito a ogni resa e rimosso quando esci o cambi modalità.

Tip

Se una pagina PHP compare come testo invece che come pagina resa, passa da riga di comando a server integrato: è la differenza tra SAPI CLI e web, non un difetto.

Usa un server tuo (URL)

Se già esegui PHP dietro un server web, punta l'anteprima verso di esso:

  • URL di base — la radice del tuo server, ad es. http://127.0.0.1:8000.
  • Radice dei documenti — la cartella locale servita a quell'URL di base. Il file aperto viene associato a un URL sotto di essa. Lasciala vuota per servire il file per nome dall'URL di base. Se il file è fuori dalla radice dei documenti, l'anteprima lo segnala così puoi correggere l'associazione.

Quando PHP non si trova

Nelle modalità riga di comando e server integrato, se non si riesce a individuare alcun binario php, l'anteprima mostra un breve errore che spiega come impostare il percorso o installare PHP. Anche la pagina di istruzioni della modalità Disattivata rimanda ai download di PHP e mostra come avviare un server.

Vedi anche