Documentazione dell'Editor Visivo di Intlayer

L'Editor Visivo di Intlayer è uno strumento che avvolgerà 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

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

   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).

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.

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 visivo utilizza un iframe per visualizzare il tuo sito web. Assicurati che la Content Security Policy (CSP) del tuo sito web consenta l'URL del CMS come frame-ancestors ('http://localhost:8000' di default). Controlla la console dell'editor per eventuali errori.