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
intlayer-editor : Package NPM pour utiliser l'éditeur visuel Intlayer
Intlayer est une suite de packages conçue spécifiquement pour les développeurs JavaScript. Il est compatible avec des frameworks comme React, React, et Express.js.
Le package intlayer-editor est un package NPM qui intègre l'éditeur visuel Intlayer dans votre projet React.
Fonctionnement de l'éditeur Intlayer
L'éditeur Intlayer permet d'interagir avec le dictionnaire distant Intlayer. Il peut être installé côté client et transforme votre application en un éditeur de type CMS pour gérer le contenu de votre site dans toutes les langues configurées.
Installation
Installez le package nécessaire en utilisant votre gestionnaire de paquets préféré :
Copier le code dans le presse-papiers
npm install intlayer-editorConfiguration
Dans votre fichier de configuration Intlayer, vous pouvez personnaliser les paramètres de l'éditeur :
Copier le code dans le presse-papiers
const config: IntlayerConfig = { // ... autres paramètres de configuration editor: { enabled: process.env.INTLAYER_ENABLED === "true", // Si false, l'éditeur est inactif et ne peut pas être accessible. // L'ID client et le secret client sont nécessaires pour activer l'éditeur. // Ils permettent d'identifier l'utilisateur qui édite le contenu. // Ils peuvent être obtenus en créant un nouveau client dans le tableau de bord Intlayer - Projets (https://intlayer.org/dashboard/projects). clientId: process.env.INTLAYER_CLIENT_ID, clientSecret: process.env.INTLAYER_CLIENT_SECRET, },};Si vous n'avez pas d'ID client et de secret client, vous pouvez les obtenir en créant un nouveau client dans le Tableau de bord Intlayer - Projets.
Pour voir tous les paramètres disponibles, référez-vous à la documentation de configuration
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.
Pour plus de détails sur l'installation du package, consultez la section correspondante ci-dessous :
Intégration avec Next.js
Pour l'intégration avec Next.js, référez-vous au guide d'installation.
Intégration avec Create React App
Pour l'intégration avec Create React App, référez-vous au guide d'installation
Intégration avec Vite + React
Pour l'intégration avec Vite + React, référez-vous au guide d'installation
Exemple d'intégration
Pour intégrer l'éditeur visuel Intlayer dans votre projet React, suivez ces étapes :
Importez le composant éditeur Intlayer dans votre application React :
src/App.jsxCopier le codeCopier le code dans le presse-papiers
import { IntlayerEditorProvider } from "intlayer-editor";import { IntlayerProvider } from "react-intlayer";export default function App() { return ( <IntlayerProvider> <IntlayerEditorProvider> <IntlayerEditor> {/* Le contenu de votre application ici */} </IntlayerEditor> </IntlayerEditorProvider> </IntlayerProvider> );}Importez les styles de l'éditeur Intlayer dans votre application Next.js :
src/app/[locale]/layout.jsxCopier le codeCopier le code dans le presse-papiers
import { IntlayerEditorStyles } from "intlayer-editor";export default async function RootLayout({ children, params }) { const { locale } = await params; return ( <IntlayerClientProvider locale={locale}> <IntlayerEditorProvider> <html lang={locale}> <body className={IntlayerEditorStyles}>{children}</body> </html> </IntlayerEditorProvider> </IntlayerClientProvider> );}
Utilisation de l'éditeur
Lorsque l'éditeur est installé, activé et démarré, vous pouvez voir chaque champ indexé par Intlayer en survolant votre contenu avec votre curseur.
Si votre contenu est encadré, vous pouvez appuyer longuement dessus pour afficher le tiroir d'édition.
Historique du document
- 5.5.10 - 2025-06-29 : Historique initial