Dokumentacja Intlayer Visual Editor

www.youtube.com

Open embedded page in fullscreen

Intlayer Visual Editor to narzędzie, które otacza Twoją stronę internetową, aby umożliwić interakcję z plikami deklaracji zawartości za pomocą edytora wizualnego.

Pakiet intlayer-editor jest oparty na Intlayer i jest dostępny dla aplikacji JavaScript, takich jak React (Create React App), Vite + React oraz Next.js.

Edytor wizualny a CMS

Intlayer Visual Editor to narzędzie, które pozwala zarządzać zawartością w edytorze wizualnym dla lokalnych słowników. Po dokonaniu zmiany zawartość zostanie zastąpiona w bazie kodu. Oznacza to, że aplikacja zostanie przebudowana, a strona przeładowana, aby wyświetlić nową zawartość.

W przeciwieństwie do tego, Intlayer CMS to narzędzie, które pozwala zarządzać zawartością w edytorze wizualnym dla zdalnych słowników. Po dokonaniu zmiany zawartość nie wpłynie na bazę kodu. Strona internetowa automatycznie wyświetli zmienioną zawartość.

Integracja Intlayer z Twoją aplikacją

Aby uzyskać więcej szczegółów na temat integracji Intlayer, zobacz odpowiednią sekcję poniżej:

Integracja z Next.js

Aby zintegrować z Next.js, zapoznaj się z przewodnikiem konfiguracji.

Integracja z Create React App

Aby zintegrować z Create React App, zapoznaj się z przewodnikiem konfiguracji.

Integracja z Vite + React

Aby zintegrować z Vite + React, zapoznaj się z przewodnikiem konfiguracji.

Jak działa Intlayer Editor

Edytor wizualny w aplikacji obejmuje dwie rzeczy:

• Aplikację frontendową, która wyświetli Twoją stronę internetową w iframe. Jeśli Twoja strona korzysta z Intlayer, edytor wizualny automatycznie wykryje Twoją zawartość i pozwoli Ci z nią interagować. Po dokonaniu modyfikacji będziesz mógł pobrać swoje zmiany.

• Po kliknięciu przycisku pobierania, edytor wizualny wyśle żądanie do serwera, aby zastąpić pliki deklaracji zawartości nową zawartością (w miejscach, gdzie te pliki są zadeklarowane w Twoim projekcie).

Zauważ, że Intlayer Editor zapisze Twoje pliki deklaracji zawartości jako JSON, jeśli rozszerzenie pliku to .json. Jeśli rozszerzenie pliku to .ts, .tsx, .js, .jsx, .mjs, .cjs, zapisze plik jako plik JavaScript, używając transformera babel.

Instalacja

Gdy Intlayer jest skonfigurowany w Twoim projekcie, po prostu zainstaluj intlayer-editor jako zależność deweloperską:

npm install intlayer-editor --save-dev

Dzięki flagowi --with możesz uruchomić edytor równolegle z innym poleceniem:

{
  "scripts": {
    "start:editor": "npx intlayer-editor start --with 'next dev --turbopack'",
  },
}

Konfiguracja

W pliku konfiguracyjnym Intlayer możesz dostosować ustawienia edytora:

import type { IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... inne ustawienia konfiguracyjne
  editor: {
    /**
     * Wymagane
     * URL aplikacji.
     * To jest URL, na który celuje edytor wizualny.
     * Przykład: 'http://localhost:3000'
     */
    applicationURL: process.env.INTLAYER_APPLICATION_URL,
    /**
     * Opcjonalne
     * Domyślnie `true`. Jeśli `false`, edytor jest nieaktywny i nie można uzyskać do niego dostępu.
     * Może być używane do wyłączenia edytora w określonych środowiskach ze względów bezpieczeństwa, takich jak produkcja.
     */
    enabled: process.env.INTLAYER_ENABLED,
    /**
     * Opcjonalne
     * Domyślnie `8000`.
     * Port serwera edytora.
     */
    port: process.env.INTLAYER_PORT,
    /**
     * Opcjonalne
     * Domyślnie "http://localhost:8000"
     * URL serwera edytora.
     */
    editorURL: process.env.INTLAYER_EDITOR_URL,
  },
};

export default config;

Aby zobaczyć wszystkie dostępne parametry, zapoznaj się z dokumentacją konfiguracji.

Używanie edytora

1. Po zainstalowaniu edytora możesz go uruchomić za pomocą następującego polecenia:

   bash

   Kopiuj zawartość

   Kopiuj kod

   Skopiuj kod do schowka

   npx intlayer-editor start
   

   Uwaga: aplikacja powinna być uruchomiona równolegle. URL aplikacji powinien odpowiadać temu, który ustawiłeś w konfiguracji edytora (applicationURL).

   Uwaga: polecenie jest reeksportowane przez pakiet intlayer. Możesz zamiast tego użyć npx intlayer editor start.

2. Następnie otwórz podany URL. Domyślnie http://localhost:8000.

   Możesz zobaczyć każde pole indeksowane przez Intlayer, najeżdżając kursorem na zawartość.

   

3. Jeśli Twoja zawartość jest obrysowana, możesz przytrzymać ją dłużej, aby wyświetlić panel edycji.

Konfiguracja środowiska

Edytor można skonfigurować tak, aby używał konkretnego pliku środowiskowego. Jest to przydatne, gdy chcesz używać tego samego pliku konfiguracyjnego dla środowiska deweloperskiego i produkcyjnego.

Aby użyć konkretnego pliku środowiskowego, możesz użyć flagi --env-file lub -f podczas uruchamiania edytora:

npx intlayer-editor start -f .env.development

Zauważ, że plik środowiskowy powinien znajdować się w katalogu głównym Twojego projektu.

Lub możesz użyć flagi --env lub -e, aby określić środowisko:

npx intlayer-editor start -e development

Debugowanie

Jeśli napotkasz jakiekolwiek problemy z edytorem wizualnym, sprawdź następujące kwestie:

• Edytor wizualny oraz aplikacja są uruchomione.

• Konfiguracja editor jest poprawnie ustawiona w Twoim pliku konfiguracyjnym Intlayer.
  • Wymagane pola:

• URL aplikacji powinien odpowiadać temu, który ustawiłeś w konfiguracji edytora (applicationURL).

• Edytor wizualny używa iframe do wyświetlania Twojej strony internetowej. Upewnij się, że Polityka Bezpieczeństwa Treści (CSP) Twojej strony pozwala na adres URL CMS jako frame-ancestors (domyślnie http://localhost:8000). Sprawdź konsolę edytora pod kątem błędów.

Często Zadawane Pytania