Haz tu pregunta y obtén un resumen del documento referenciando esta página y el proveedor AI de tu elección
Al integrar el servidor MCP Intlayer a tu asistente de IA, puedes recuperar todos los documentos directamente desde ChatGPT, DeepSeek, Cursor, VSCode, etc.
Ver la documentación del servidor MCPEl contenido de esta página ha sido traducido con una IA.
Ver la última versión del contenido original en inglésSi tienes una idea para mejorar esta documentación, no dudes en contribuir enviando una pull request en GitHub.
Enlace de GitHub a la documentaciónCopiar el Markdown del documento a la portapapeles
intlayer-editor: Paquete NPM para usar el editor visual de Intlayer
Intlayer es una suite de paquetes diseñada específicamente para desarrolladores de JavaScript. Es compatible con frameworks como React, React y Express.js.
El paquete intlayer-editor es un paquete NPM que integra el editor visual de Intlayer en tu proyecto React.
Cómo Funciona el Editor Intlayer
El editor intlayer permite interactuar con el diccionario remoto de Intlayer. Puede instalarse en el lado del cliente y transformar tu aplicación en un editor tipo CMS para gestionar el contenido de tu sitio en todos los idiomas configurados.
Instalación
Instala el paquete necesario usando tu gestor de paquetes preferido:
Copiar el código al portapapeles
npm install intlayer-editorConfiguración
En tu archivo de configuración de Intlayer, puedes personalizar los ajustes del editor:
Copiar el código al portapapeles
const config: IntlayerConfig = { // ... otros ajustes de configuración editor: { enabled: process.env.INTLAYER_ENABLED === "true", // Si es falso, el editor está inactivo y no se puede acceder a él. // Se requieren el ID de cliente y el secreto de cliente para habilitar el editor. // Permiten identificar al usuario que está editando el contenido. // Se pueden obtener creando un nuevo cliente en el Panel de Intlayer - Proyectos (https://intlayer.org/dashboard/projects). clientId: process.env.INTLAYER_CLIENT_ID, clientSecret: process.env.INTLAYER_CLIENT_SECRET, },};Si no tienes un ID de cliente y un secreto de cliente, puedes obtenerlos creando un nuevo cliente en el Panel de Intlayer - Proyectos.
Para ver todos los parámetros disponibles, consulta la documentación de configuración
El paquete intlayer-editor está basado en Intlayer y está disponible para aplicaciones JavaScript, como React (Create React App), Vite + React y Next.js.
Para más detalles sobre cómo instalar el paquete, consulta la sección correspondiente a continuación:
Integración con Next.js
Para la integración con Next.js, consulta la guía de configuración.
Integración con Create React App
Para la integración con Create React App, consulta la guía de configuración
Integración con Vite + React
Para la integración con Vite + React, consulta la guía de configuración
Ejemplo de integración
Para integrar el editor visual de Intlayer en tu proyecto React, sigue estos pasos:
Importa el componente del editor Intlayer en tu aplicación React:
src/App.jsxCopiar códigoCopiar el código al portapapeles
import { IntlayerEditorProvider } from "intlayer-editor";import { IntlayerProvider } from "react-intlayer";export default function App() { return ( <IntlayerProvider> <IntlayerEditorProvider> <IntlayerEditor> {/* El contenido de tu aplicación aquí */} </IntlayerEditor> </IntlayerEditorProvider> </IntlayerProvider> );}Importa los estilos del editor Intlayer en tu aplicación Next.js:
src/app/[locale]/layout.jsxCopiar códigoCopiar el código al portapapeles
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> );}
Uso del Editor
Cuando el editor está instalado, habilitado y en funcionamiento, puedes ver cada campo indexado por Intlayer al pasar el cursor sobre tu contenido.
Si tu contenido está delineado, puedes mantenerlo presionado para mostrar el panel de edición.
Historial del Documento
- 5.5.10 - 2025-06-29: Historial inicial