Posez votre question et obtenez un résumé du document en referencant cette page et le Provider AI de votre choix
En intégrant le serveur MCP Intlayer à votre assistant AI, vous pouvez récupérer tous les documents directement depuis ChatGPT, DeepSeek, Cursor, VSCode, etc.
Voir la documentation du serveur MCPLe contenu de cette page a été traduit à l'aide d'une IA.
Voir la dernière version du contenu original en anglaisSi vous avez une idée d’amélioration pour améliorer cette documentation, n’hésitez pas à contribuer en submitant une pull request sur GitHub.
Lien GitHub de la documentationCopier le Markdown du doc dans le presse-papiers
Documentation de l'Éditeur Visuel Intlayer
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 :
Copier le code dans le presse-papiers
npm install intlayer-editor --save-dev
Configuration
Dans votre fichier de configuration Intlayer, vous pouvez personnaliser les paramètres de l'éditeur :
Copier le code dans le presse-papiers
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
Une fois l'éditeur installé, vous pouvez démarrer l'éditeur en utilisant la commande suivante :
bashCopier le codeCopier 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).
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.
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 :
Copier le code dans le presse-papiers
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 :
Copier le code dans le presse-papiers
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).
- Champs obligatoires :
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.
Historique de la documentation
- 5.5.10 - 2025-06-29 : Historique initial