- Documentation
- Concepto
- Intlayer Editor
Documentación del Editor Intlayer
El Editor Intlayer es una herramienta que transforma tu aplicación en un editor visual. Con el Editor Intlayer, tus equipos pueden gestionar el contenido de tu sitio en todos los idiomas configurados.
El paquete intlayer-editor está basado en Intlayer y está disponible para aplicaciones JavaScript, como React (Create React App), Vite + React y Next.js.
Integración
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 instalación.
Integración con Create React App
Para la integración con Create React App, consulta la guía de instalación.
Integración con Vite + React
Para la integración con Vite + React, consulta la guía de instalación.
Cómo funciona el Editor Intlayer
Cada vez que realizas un cambio con el Editor Intlayer, el servidor inserta automáticamente tus cambios en tus archivos de declaración Intlayer, dondequiera que estén declarados en tu proyecto.
De esta forma, no tienes que preocuparte por la ubicación de los archivos o por encontrar tu clave en tu colección de diccionarios.
Instalación
Una vez que Intlayer esté configurado en tu proyecto, simplemente instala intlayer-editor como una dependencia de desarrollo:
1npm install intlayer-editor1yarn add intlayer-editor1pnpm add intlayer-editorConfiguración
1. Habilitar el Editor en tu archivo intlayer.config.ts
En tu archivo de configuración de Intlayer, puedes personalizar los ajustes del editor:
1const config: IntlayerConfig = {
2 // ... otras configuraciones
3 editor: {
4 enabled: process.env.INTLAYER_ENABLED === "true", // Si es false, el editor está inactivo y no se puede acceder.
5 // Se requiere un ID de cliente y un secreto de cliente para habilitar el editor.
6 // Permiten identificar al usuario que edita el contenido.
7 // Puedes obtenerlos creando un nuevo cliente en el Panel de Proyectos de Intlayer (/ru/dashboard/projects).
8 clientId: process.env.INTLAYER_CLIENT_ID,
9 clientSecret: process.env.INTLAYER_CLIENT_SECRET,
10 },
11};Si no tienes un ID de cliente y un secreto de cliente, puedes obtenerlos creando un nuevo cliente en el Panel de Proyectos de Intlayer.
Para ver todos los parámetros disponibles, consulta la documentación de configuración.
2. Insertar el Proveedor de Editor de Intlayer en tu aplicación
Para habilitar el editor, inserta el Proveedor de Editor de Intlayer en tu aplicación.
Ejemplo para aplicaciones React JS o Vite + React:
1import { IntlayerProvider } from "react-intlayer";
2import { IntlayerEditorProvider } from "intlayer-editor";
3
4function App() {
5 return (
6 <IntlayerProvider>
7 <IntlayerEditorProvider>{/* Tu aplicación */}</IntlayerEditorProvider>
8 </IntlayerProvider>
9 );
10}Ejemplo para aplicaciones Next.js:
1import { IntlayerClientProvider } from "next-intlayer";
2import { IntlayerEditorProvider } from "intlayer-editor";
3
4function Page() {
5 return (
6 <IntlayerServerProvider locale={locale}>
7 <IntlayerClientProvider locale={locale}>
8 <IntlayerEditorProvider>{/* Tu aplicación */}</IntlayerEditorProvider>
9 </IntlayerClientProvider>
10 </IntlayerServerProvider>
11 );
12}3. Agregar las hojas de estilo a tu aplicación
Para mostrar las hojas de estilo del editor, necesitas agregar las hojas de estilo a tu aplicación.
Si se utiliza tailwind, puedes agregar las hojas de estilo a tu archivo tailwind.config.js:
1// tailwind.config.js
2import tailwindConfig, { tailwindPresetConfig } from "intlayer-editor/tailwind";
3
4module.exports = {
5 presets: [tailwindPresetConfig],
6 content: [
7 ...tailwindConfig.content,
8 // ... resto de tu contenido
9 ],
10 // ...
11};De lo contrario, puedes agregar la hoja de estilo de importación en tu aplicación:
1// app.tsx
2import "intlayer-editor/css";O
1/* app.css */
2@import "intlayer-editor/css";Uso del Editor
Cuando el editor está instalado, habilitado e iniciado, puedes ver cada campo indexado por Intlayer al pasar el cursor sobre tu contenido.
Si tu contenido está resaltado, puedes mantenerlo presionado para mostrar el panel de edición.
Si tienes una idea para mejorar esta documentación, no dudes en contribuir enviando una pull request en GitHub.
Enlace de GitHub a la documentación