Documentazione dell'Editor Visivo di Intlayer

www.youtube.com

Open embedded page in fullscreen

L'Editor Visivo di Intlayer è uno strumento che avvolge il tuo sito web per interagire con i tuoi file di dichiarazione dei contenuti utilizzando un editor visivo.

Il pacchetto intlayer-editor si basa su Intlayer ed è disponibile per applicazioni JavaScript, come React (Create React App), Vite + React e Next.js.

Editor visivo vs CMS

L'Editor Visivo di Intlayer è uno strumento che ti consente di gestire i tuoi contenuti in un editor visivo per dizionari locali. Una volta apportata una modifica, il contenuto verrà sostituito nella base di codice. Ciò significa che l'applicazione verrà ricostruita e la pagina verrà ricaricata per visualizzare il nuovo contenuto.

Al contrario, il CMS di Intlayer è uno strumento che ti consente di gestire i tuoi contenuti in un editor visivo per dizionari remoti. Una volta apportata una modifica, il contenuto non influenzerà la tua base di codice. E il sito web mostrerà automaticamente il contenuto modificato.

Integrare Intlayer nella tua applicazione

Per maggiori dettagli su come integrare Intlayer, consulta la sezione pertinente qui sotto:

Integrazione con Next.js

Per l'integrazione con Next.js, consulta la guida di configurazione.

Integrazione con Create React App

Per l'integrazione con Create React App, consulta la guida di configurazione.

Integrazione con Vite + React

Per l'integrazione con Vite + React, consulta la guida di configurazione.

Come funziona l'Editor di Intlayer

L'editor visivo in un'applicazione include due elementi:

• Un'applicazione frontend che visualizzerà il tuo sito web in un iframe. Se il tuo sito web utilizza Intlayer, l'editor visivo rileverà automaticamente i tuoi contenuti e ti consentirà di interagire con essi. Una volta effettuata una modifica, potrai scaricare le tue modifiche.

• Una volta cliccato il pulsante di download, l'editor visivo invierà una richiesta al server per sostituire i tuoi file di dichiarazione dei contenuti con il nuovo contenuto (dovunque questi file siano dichiarati nel tuo progetto).

Nota che, per ora, l'Editor di Intlayer scriverà i tuoi file di dichiarazione dei contenuti come file JSON.

Installazione

Una volta che Intlayer è configurato nel tuo progetto, installa semplicemente intlayer-editor come dipendenza di sviluppo:

npm install intlayer-editor --save-dev

Con il flag --with, puoi avviare l'editor in parallelo con un altro comando:

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

Configurazione

Nel file di configurazione di Intlayer, puoi personalizzare le impostazioni dell'editor:

import type { IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... altre impostazioni di configurazione
  editor: {
    /**
     * Obbligatorio
     * L'URL dell'applicazione.
     * Questo è l'URL mirato dall'editor visivo.
     * Esempio: 'http://localhost:3000'
     */
    applicationURL: process.env.INTLAYER_APPLICATION_URL,
    /**
     * Opzionale
     * Di default è `true`. Se `false`, l'editor è inattivo e non può essere accessibile.
     * Può essere utilizzato per disabilitare l'editor in ambienti specifici per motivi di sicurezza, come la produzione.
     */
    enabled: process.env.INTLAYER_ENABLED,
    /**
     * Opzionale
     * Di default è `8000`.
     * La porta del server dell'editor.
     */
    port: process.env.INTLAYER_PORT,
    /**
     * Opzionale
     * Di default è "http://localhost:8000"
     * L'URL del server dell'editor.
     */
    editorURL: process.env.INTLAYER_EDITOR_URL,
  },
};

export default config;

Per vedere tutti i parametri disponibili, consulta la documentazione di configurazione.

Utilizzo dell'Editor

1. Quando l'editor è installato, puoi avviare l'editor utilizzando il seguente comando:

   bash

   Copia contenuto

   Copiare il codice

   Copiare il codice nella clipboard

   npx intlayer-editor start
   

   Nota che dovresti eseguire la tua applicazione in parallelo. L'URL dell'applicazione dovrebbe corrispondere a quello impostato nella configurazione dell'editor (applicationURL).

Nota il comando è riesportato dal package intlayer. Puoi usare npx intlayer editor start invece.

2. Poi, apri l'URL fornito. Di default http://localhost:8000.

   Puoi visualizzare ogni campo indicizzato da Intlayer passando il cursore sopra il tuo contenuto.

   

3. Se il tuo contenuto è delineato, puoi tenerlo premuto a lungo per visualizzare il cassetto di modifica.

Configurazione dell'ambiente

L'editor può essere configurato per utilizzare un file di ambiente specifico. Questo è utile quando vuoi usare lo stesso file di configurazione per sviluppo e produzione.

Per utilizzare un file di ambiente specifico, puoi usare il flag --env-file o -f quando avvii l'editor:

npx intlayer-editor start -f .env.development

Nota che il file di ambiente dovrebbe trovarsi nella directory principale del tuo progetto.

Oppure puoi usare il flag --env o -e per specificare l'ambiente:

npx intlayer-editor start -e development

Debug

Se riscontri problemi con l'editor visivo, controlla quanto segue:

• L'editor visivo e l'applicazione sono in esecuzione.

• La configurazione editor è correttamente impostata nel file di configurazione di Intlayer.

  • Campi obbligatori:
    • L'URL dell'applicazione dovrebbe corrispondere a quello impostato nella configurazione dell'editor (applicationURL).

• L'editor visuale utilizza un iframe per visualizzare il tuo sito web. Assicurati che la Content Security Policy (CSP) del tuo sito consenta l'URL del CMS come frame-ancestors (http://localhost:8000 per impostazione predefinita). Controlla la console dell'editor per eventuali errori.

Domande frequenti