Przejdź do treści

Wtyczka Podgląd HTML

Wierny, żywy podgląd aktywnego dokumentu HTML (i PHP), renderowany prawdziwym silnikiem przeglądarkowym (QtWebEngine) w dokowanym panelu. W odróżnieniu od podglądu Markdown renderuje CSS, JavaScript, fonty webowe i wszystko inne dokładnie tak, jak zrobiłaby to przeglądarka.

Dostępność — nie każde pobranie go zawiera

Podgląd HTML napędza QtWebEngine, czyli kompletny silnik przeglądarki, i jest odpowiednio duży. Dlatego jest opcjonalny, a o tym, czy go masz, decyduje wersja, którą pobierasz.

  • macOS — OctoEdit jest publikowany jako dwa pakiety: jeden z podglądem HTML i jeden lekki, bez niego. Wybierz pobranie opisane jako zawierające podgląd HTML — podgląd będzie dostępny od razu po uruchomieniu edytora. Nie ma dodatku do doinstalowania później: pakiet bez podglądu nie zyska go w przyszłości, więc pobierz po prostu ten drugi.
  • Windows — podgląd można także dodać do istniejącej instalacji później, jako osobne pobranie z podglądem HTML: rozpakuj je do folderu, w którym zainstalowano OctoEdit, i uruchom edytor ponownie.

Jeśli w menu nie ma pozycji Widok ▸ Podgląd HTML, Twoja kopia nie zawiera podglądu. Podgląd Markdown nie wymaga silnika przeglądarki i jest dostępny zawsze.

Kompilacja ze źródeł: podgląd kryje się za opcją CMake MTE_ENABLE_HTML_PREVIEW — notki o pakowaniu i licencjach znajdziesz w BUILDING.md.

Gdzie go znaleźć

Widok ▸ Podgląd HTML otwiera (lub zamyka) dok podglądu dla bieżącej karty.

Jak się zachowuje

  • Żywy render. Podgląd renderuje się na nowo podczas pisania (z tłumieniem; dla bardzo dużych plików tłumienie się wydłuża).
  • Pełna wierność. Arkusze stylów, skrypty, obrazy i inne zasoby ładują się względem folderu dokumentu, więc strona wygląda jak w przeglądarce.
  • Linki do folderów. Kliknięcie linku wskazującego lokalny folder ładuje dokument indeksu tego folderu (index.html / index.htm / index.xhtml) zamiast listingu katalogu.
  • Otwórz w przeglądarce. Pasek narzędzi otwiera plik z dysku (a dla poniższych trybów serwera PHP — żywy URL) w Twojej domyślnej przeglądarce.
  • Rozmiar panelu. Podgląd trzyma udział w oknie, a nie stałą szerokość, więc rośnie i maleje razem z oknem — zobacz Zapisany układ.

Jedno mrugnięcie przy renderowaniu okna na CPU

Podgląd wprowadza silnik przeglądarki do okna edytora, a przy Renderowaniu okna ustawionym na CPU okno musi zostać utworzone na nowo, żeby zrobić mu miejsce. Okno edytora mruga więc raz — przy pierwszym otwarciu podglądu HTML w sesji i nigdy więcej później. Domyślne GPU całkowicie tego unika; zobacz Preferencje ▸ Ogólne ▸ Renderowanie okna.

Widoczność podglądu

Widoczność podglądu jest zapamiętywana per plik, zarówno w trakcie sesji, jak i między restartami:

  • Pliki webowe (.html, .htm, .xhtml oraz .php / .phtml / .php3 / .php4) otwierają podgląd automatycznie przy pierwszym wyświetleniu.
  • Inne pliki nie — ale podgląd możesz otworzyć na dowolnym pliku przez Widok ▸ Podgląd HTML, a on wyrenderuje ten plik jako HTML.
  • W ramach sesji Twój wybór dla karty jest przywracany przy powrocie do niej.
  • Między restartami pamiętany jest Twój jawny wybór dla pliku: ręczne zamknięcie pozostaje zamknięte przy następnym otwarciu pliku, a podgląd otwarty na pliku, który sam by się nie otworzył, otwiera się ponownie. Pliki nigdy jawnie nie dotknięte za każdym razem podążają za domyślnym auto-otwieraniem.

Podgląd PHP

PHP działa po stronie serwera, więc QtWebEngine nie może go wykonać wprost. Wybierz obsługę plików .php w Preferencje ▸ Wtyczki ▸ Podgląd HTML:

Tryb Działanie Najlepszy do
Wyłączony Pokazuje stronę z instrukcjami; niczego nie wykonuje ani nie pobiera. Wyłączenia podglądu PHP.
Uruchom przez PHP (wiersz poleceń) Przepuszcza dokument przez lokalny plik binarny php i renderuje wynik. Działa pod CLI SAPI PHP. Szablonów / samodzielnych plików, które wypisują HTML.
Uruchom przez PHP (wbudowany serwer) Serwuje dokument przez wbudowany serwer WWW PHP (php -S), który edytor uruchamia i zatrzymuje za Ciebie. Działa pod web SAPI. Pełnych stron — phpinfo(), $_SERVER, sesje, routing.
Użyj własnego serwera (URL) Mapuje otwarty plik na URL na serwerze, który Ty prowadzisz (Apache, nginx, Docker, php artisan serve, …). Istniejącego lokalnego stacka deweloperskiego.

Ścieżka w polu Program PHP i Aktualizuj automatycznie podczas pisania dotyczą obu trybów: wiersza poleceń i serwera wbudowanego. Zostaw ścieżkę pustą, aby przeszukać PATH i typowe lokalizacje instalacji (na macOS aplikacja uruchomiona z Findera nie dziedziczy PATH powłoki, więc ustaw pełną ścieżkę, np. /opt/homebrew/bin/php).

Wiersz poleceń kontra serwer wbudowany

Oba tryby uruchamiają lokalny plik binarny php, ale w różnych środowiskach (SAPI), co zmienia to, co działa:

  • Wiersz poleceń (CLI SAPI). Szybko i prosto — pokazuje po prostu to, co skrypt wypisze. Ale phpinfo() renderuje się jako zwykły tekst, a webowe mechanizmy jak $_SERVER, sesje i routing są ograniczone albo puste. Świetny do plików, które głównie emitują HTML.

  • Serwer wbudowany (web SAPI). Edytor uruchamia mały php -S 127.0.0.1:<port> zakorzeniony w folderze pliku i ładuje stronę po HTTP, więc renderuje się dokładnie jak na prawdziwym serwerze: phpinfo() to ostylowana strona HTML, $_SERVER jest wypełnione, sesje i żądania zasobów/podzasobów działają.

  • Serwer startuje dopiero przy pierwszym podglądzie pliku .php w tym trybie, jest współdzielony między renderami, restartowany po przejściu do pliku w innym folderze i zatrzymywany przy zamknięciu edytora lub wyjściu z trybu.

  • Wiąże się tylko z 127.0.0.1, więc nigdy nie jest osiągalny z sieci.
  • Podglądane są też niezapisane zmiany: Twój żywy bufor jest zapisywany do pliku tymczasowego w folderze dokumentu (żeby __DIR__ i względne include/require rozwiązywały się poprawnie) i to on jest serwowany. Plik tymczasowy jest podmieniany przy każdym renderze i usuwany przy wyjściu lub zmianie trybu.

Tip

Jeśli strona PHP pokazuje się jako tekst zamiast wyrenderowanej strony, przełącz się z wiersza poleceń na serwer wbudowany — to różnica CLI-vs-web-SAPI, nie błąd.

Użyj własnego serwera (URL)

Jeśli już masz PHP za serwerem WWW, wskaż podglądowi ten serwer:

  • Bazowy adres URL — korzeń Twojego serwera, np. http://127.0.0.1:8000.
  • Katalog główny dokumentów — lokalny folder serwowany pod bazowym URL. Otwarty plik jest mapowany na URL pod nim. Zostaw puste, aby serwować plik po nazwie z bazowego URL. Jeśli plik leży poza katalogiem głównym, podgląd to zgłasza, żebyś mógł poprawić mapowanie.

Gdy PHP nie zostaje znalezione

W trybach wiersza poleceń i serwera wbudowanego, jeśli nie da się znaleźć pliku binarnego php, podgląd pokazuje krótki błąd wyjaśniający, jak ustawić ścieżkę albo zainstalować PHP. Strona instrukcji trybu Wyłączony także linkuje do pobrań PHP i pokazuje, jak uruchomić serwer.

Zobacz też