Stellen Sie Ihre Frage und erhalten Sie einen Resümee des Dokuments, indem Sie diese Seite und den AI-Anbieter Ihrer Wahl referenzieren
Durch die Integration des Intlayer MCP-Servers in Ihren bevorzugten AI-Assistenten können Sie alle Dokumente direkt von ChatGPT, DeepSeek, Cursor, VSCode usw. abrufen.
Dokumentation des MCP-Servers ansehenDer Inhalt dieser Seite wurde mit einer KI übersetzt.
Den englischen Originaltext ansehenWenn Sie eine Idee haben, um diese Dokumentation zu verbessern, zögern Sie bitte nicht, durch das Einreichen eines Pull-Requests auf GitHub beizutragen.
GitHub-Link zur DokumentationMarkdown des Dokuments in die Zwischenablage kopieren
intlayer-editor: NPM-Paket zur Nutzung des Intlayer visuellen Editors
Intlayer ist eine Sammlung von Paketen, die speziell für JavaScript-Entwickler entwickelt wurden. Es ist kompatibel mit Frameworks wie React, React und Express.js.
Das intlayer-editor Paket ist ein NPM-Paket, das den Intlayer visuellen Editor in Ihr React-Projekt integriert.
Funktionsweise des Intlayer Editors
Der Intlayer Editor ermöglicht die Interaktion mit dem entfernten Intlayer-Wörterbuch. Er kann auf der Client-Seite installiert werden und verwandelt Ihre Anwendung in einen CMS-ähnlichen Editor, um die Inhalte Ihrer Website in allen konfigurierten Sprachen zu verwalten.
Installation
Installieren Sie das notwendige Paket mit Ihrem bevorzugten Paketmanager:
Kopieren Sie den Code in die Zwischenablage
npm install intlayer-editorKonfiguration
In Ihrer Intlayer-Konfigurationsdatei können Sie die Editor-Einstellungen anpassen:
Kopieren Sie den Code in die Zwischenablage
const config: IntlayerConfig = { // ... andere Konfigurationseinstellungen editor: { enabled: process.env.INTLAYER_ENABLED === "true", // Wenn false, ist der Editor inaktiv und kann nicht aufgerufen werden. // Client-ID und Client-Secret sind erforderlich, um den Editor zu aktivieren. // Sie ermöglichen die Identifizierung des Benutzers, der den Inhalt bearbeitet. // Sie können durch das Erstellen eines neuen Clients im Intlayer Dashboard - Projekte (https://intlayer.org/dashboard/projects) erhalten werden. clientId: process.env.INTLAYER_CLIENT_ID, clientSecret: process.env.INTLAYER_CLIENT_SECRET, },};Wenn Sie keine Client-ID und kein Client-Secret haben, können Sie diese durch das Erstellen eines neuen Clients im Intlayer Dashboard - Projekte erhalten.
Um alle verfügbaren Parameter zu sehen, konsultieren Sie die Konfigurationsdokumentation.
Das intlayer-editor-Paket basiert auf Intlayer und ist für JavaScript-Anwendungen wie React (Create React App), Vite + React und Next.js verfügbar.
Für weitere Details zur Installation des Pakets siehe den entsprechenden Abschnitt unten:
Integration mit Next.js
Für die Integration mit Next.js siehe die Setup-Anleitung.
Integration mit Create React App
Für die Integration mit Create React App siehe die Setup-Anleitung.
Integration mit Vite + React
Für die Integration mit Vite + React siehe die Setup-Anleitung.
Beispiel für die Integration
Um den Intlayer Visual Editor in Ihr React-Projekt zu integrieren, folgen Sie diesen Schritten:
Importieren Sie die Intlayer-Editor-Komponente in Ihre React-Anwendung:
src/App.jsxCode kopierenKopieren Sie den Code in die Zwischenablage
import { IntlayerEditorProvider } from "intlayer-editor";import { IntlayerProvider } from "react-intlayer";export default function App() { return ( <IntlayerProvider> <IntlayerEditorProvider> <IntlayerEditor>{/* Ihr App-Inhalt hier */}</IntlayerEditor> </IntlayerEditorProvider> </IntlayerProvider> );}Importieren Sie die Intlayer-Editor-Stile in Ihre Next.js-Anwendung:
src/app/[locale]/layout.jsxCode kopierenKopieren Sie den Code in die Zwischenablage
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> );}
Verwendung des Editors
Wenn der Editor installiert, aktiviert und gestartet ist, können Sie jedes von Intlayer indexierte Feld anzeigen, indem Sie mit dem Cursor über Ihren Inhalt fahren.
Wenn Ihr Inhalt umrandet ist, können Sie ihn lange drücken, um die Bearbeitungsleiste anzuzeigen.
Dokumentationsverlauf
- 5.5.10 - 2025-06-29: Historie initialisiert