Documentation de l'Éditeur Visuel Intlayer

www.youtube.com

Open embedded page in fullscreen

L'Éditeur Visuel Intlayer est un outil qui enveloppe votre site web pour interagir avec vos fichiers de déclaration de contenu à l'aide d'un éditeur visuel.

Le package intlayer-editor est basé sur Intlayer et est disponible pour les applications JavaScript, telles que React (Create React App), Vite + React, et Next.js.

Éditeur visuel vs CMS

L'Éditeur Visuel Intlayer est un outil qui vous permet de gérer votre contenu dans un éditeur visuel pour des dictionnaires locaux. Une fois une modification effectuée, le contenu sera remplacé dans la base de code. Cela signifie que l'application sera reconstruite et que la page sera rechargée pour afficher le nouveau contenu.

En revanche, le CMS Intlayer est un outil qui vous permet de gérer votre contenu dans un éditeur visuel pour des dictionnaires distants. Une fois une modification effectuée, le contenu n'affectera pas votre base de code. Et le site web affichera automatiquement le contenu modifié.

Intégrer Intlayer dans votre application

Pour plus de détails sur l'intégration d'Intlayer, consultez la section correspondante ci-dessous :

Intégration avec Next.js

Pour l'intégration avec Next.js, consultez le guide d'installation.

Intégration avec Create React App

Pour l'intégration avec Create React App, consultez le guide d'installation.

Intégration avec Vite + React

Pour l'intégration avec Vite + React, consultez le guide d'installation.

Comment fonctionne l'Éditeur Intlayer

L'éditeur visuel dans une application comprend deux éléments :

• Une application frontend qui affichera votre site web dans une iframe. Si votre site web utilise Intlayer, l'éditeur visuel détectera automatiquement votre contenu et vous permettra d'interagir avec lui. Une fois une modification effectuée, vous pourrez télécharger vos changements.

• Une fois que vous avez cliqué sur le bouton de téléchargement, l'éditeur visuel enverra une requête au serveur pour remplacer vos fichiers de déclaration de contenu par le nouveau contenu (où que ces fichiers soient déclarés dans votre projet).

Notez que pour l'instant, l'Éditeur Intlayer écrira vos fichiers de déclaration de contenu sous forme de fichiers JSON.

Installation

Une fois Intlayer configuré dans votre projet, installez simplement intlayer-editor en tant que dépendance de développement :

npm install intlayer-editor --save-dev

Avec le flag --with, vous pouvez démarrer l'éditeur en parallèle avec une autre commande :

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

Configuration

Dans votre fichier de configuration Intlayer, vous pouvez personnaliser les paramètres de l'éditeur :

import type { IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... autres paramètres de configuration
  editor: {
    /**
     * Obligatoire
     * L'URL de l'application.
     * C'est l'URL ciblée par l'éditeur visuel.
     * Exemple : 'http://localhost:3000'
     */
    applicationURL: process.env.INTLAYER_APPLICATION_URL,
    /**
     * Optionnel
     * Par défaut à `true`. Si `false`, l'éditeur est inactif et ne peut pas être accessible.
     * Peut être utilisé pour désactiver l'éditeur pour des environnements spécifiques pour des raisons de sécurité, comme la production.
     */
    enabled: process.env.INTLAYER_ENABLED,
    /**
     * Optionnel
     * Par défaut à `8000`.
     * Le port du serveur de l'éditeur.
     */
    port: process.env.INTLAYER_PORT,
    /**
     * Optionnel
     * Par défaut à "http://localhost:8000"
     * L'URL du serveur de l'éditeur.
     */
    editorURL: process.env.INTLAYER_EDITOR_URL,
  },
};

export default config;

Pour voir tous les paramètres disponibles, consultez la documentation de configuration.

Utilisation de l'Éditeur

1. Une fois l'éditeur installé, vous pouvez démarrer l'éditeur en utilisant la commande suivante :

   bash

   Copier le contenu

   Copier le code

   Copier le code dans le presse-papiers

   npx intlayer-editor start
   

   Notez que vous devez exécuter votre application en parallèle. L'URL de l'application doit correspondre à celle que vous avez définie dans la configuration de l'éditeur (applicationURL).

   Notez que la commande est réexportée par le package intlayer. Vous pouvez utiliser npx intlayer editor start à la place.

2. Ensuite, ouvrez l'URL fournie. Par défaut http://localhost:8000.

   Vous pouvez visualiser chaque champ indexé par Intlayer en survolant votre contenu avec votre curseur.

   

3. Si votre contenu est encadré, vous pouvez effectuer un appui long pour afficher le tiroir d'édition.

Configuration de l'environnement

L'éditeur peut être configuré pour utiliser un fichier d'environnement spécifique. Cela est utile lorsque vous souhaitez utiliser le même fichier de configuration pour le développement et la production.

Pour utiliser un fichier d'environnement spécifique, vous pouvez utiliser le flag --env-file ou -f lors du démarrage de l'éditeur :

npx intlayer-editor start -f .env.development

Notez que le fichier d'environnement doit être situé à la racine de votre projet.

Ou vous pouvez utiliser le flag --env ou -e pour spécifier l'environnement :

npx intlayer-editor start -e development

Débogage

Si vous rencontrez des problèmes avec l'éditeur visuel, vérifiez les points suivants :

• L'éditeur visuel et l'application sont en cours d'exécution.

• La configuration de l'éditeur est correctement définie dans votre fichier de configuration Intlayer.

  • Champs obligatoires :
    • L'URL de l'application doit correspondre à celle que vous avez définie dans la configuration de l'éditeur (applicationURL).

• L'éditeur visuel utilise une iframe pour afficher votre site web. Assurez-vous que la politique de sécurité du contenu (CSP) de votre site web autorise l'URL du CMS en tant que frame-ancestors (http://localhost:8000 par défaut). Vérifiez la console de l'éditeur pour toute erreur.

Questions fréquentes