Intlayer Visual Editor Dokumentation

www.youtube.com

Open embedded page in fullscreen

Der Intlayer Visual Editor ist ein Tool, das Ihre Website einbindet, um mit Ihren Inhaltsdeklarationsdateien über einen visuellen Editor zu interagieren.

Das intlayer-editor-Paket basiert auf Intlayer und ist für JavaScript-Anwendungen verfügbar, wie React (Create React App), Vite + React und Next.js.

Visueller Editor vs CMS

Der Intlayer Visual Editor ist ein Tool, mit dem Sie Ihre Inhalte in einem visuellen Editor für lokale Wörterbücher verwalten können. Sobald eine Änderung vorgenommen wird, wird der Inhalt in der Code-Basis ersetzt. Das bedeutet, dass die Anwendung neu gebaut wird und die Seite neu geladen wird, um den neuen Inhalt anzuzeigen.

Im Gegensatz dazu ist das Intlayer CMS ein Tool, mit dem Sie Ihre Inhalte in einem visuellen Editor für entfernte Wörterbücher verwalten können. Sobald eine Änderung vorgenommen wird, wirkt sich der Inhalt nicht auf Ihre Code-Basis aus. Und die Website zeigt automatisch den geänderten Inhalt an.

Intlayer in Ihre Anwendung integrieren

Für weitere Details zur Integration von Intlayer siehe den entsprechenden Abschnitt unten:

Integration mit Next.js

Für die Integration mit Next.js, siehe den Setup-Leitfaden.

Integration mit Create React App

Für die Integration mit Create React App, siehe den Setup-Leitfaden.

Integration mit Vite + React

Für die Integration mit Vite + React, siehe den Setup-Leitfaden.

Wie der Intlayer Editor funktioniert

Der visuelle Editor in einer Anwendung umfasst zwei Dinge:

• Eine Frontend-Anwendung, die Ihre Website in einem iframe anzeigt. Wenn Ihre Website Intlayer verwendet, erkennt der visuelle Editor automatisch Ihre Inhalte und ermöglicht Ihnen, mit ihnen zu interagieren. Sobald eine Änderung vorgenommen wurde, können Sie Ihre Änderungen herunterladen.

• Sobald Sie auf die Schaltfläche "Herunterladen" klicken, sendet der visuelle Editor eine Anfrage an den Server, um Ihre Inhaltsdeklarationsdateien mit dem neuen Inhalt zu ersetzen (wo auch immer diese Dateien in Ihrem Projekt deklariert sind).

Beachten Sie, dass der Intlayer Editor Ihre Inhaltsdeklarationsdateien derzeit als JSON-Dateien schreibt.

Installation

Sobald Intlayer in Ihrem Projekt konfiguriert ist, installieren Sie einfach intlayer-editor als Entwicklungsabhängigkeit:

npm install intlayer-editor --save-dev

Mit dem --with Flag können Sie den Editor parallel mit einem anderen Befehl starten:

{
  "scripts": {
    "start:editor": "npx intlayer-editor start --with 'next dev --turbopack'",
  },
}

Konfiguration

In Ihrer Intlayer-Konfigurationsdatei können Sie die Editor-Einstellungen anpassen:

import type { IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... andere Konfigurationseinstellungen
  editor: {
    /**
     * Erforderlich
     * Die URL der Anwendung.
     * Dies ist die URL, die vom visuellen Editor angezielt wird.
     * Beispiel: 'http://localhost:3000'
     */
    applicationURL: process.env.INTLAYER_APPLICATION_URL,
    /**
     * Optional
     * Standardmäßig `true`. Wenn `false`, ist der Editor inaktiv und kann nicht aufgerufen werden.
     * Kann verwendet werden, um den Editor aus Sicherheitsgründen für bestimmte Umgebungen wie Produktion zu deaktivieren.
     */
    enabled: process.env.INTLAYER_ENABLED,
    /**
     * Optional
     * Standardmäßig `8000`.
     * Der Port des Editor-Servers.
     */
    port: process.env.INTLAYER_PORT,
    /**
     * Optional
     * Standardmäßig "http://localhost:8000"
     * Die URL des Editor-Servers.
     */
    editorURL: process.env.INTLAYER_EDITOR_URL,
  },
};

export default config;

Um alle verfügbaren Parameter zu sehen, siehe die Konfigurationsdokumentation.

Verwendung des Editors

1. Wenn der Editor installiert ist, können Sie den Editor mit folgendem Befehl starten:

   bash

   Inhalt kopieren

   Code kopieren

   Kopieren Sie den Code in die Zwischenablage

   npx intlayer-editor start
   

   Beachten Sie, dass Sie Ihre Anwendung parallel ausführen sollten. Die Anwendungs-URL sollte mit der übereinstimmen, die Sie in der Editor-Konfiguration (applicationURL) festgelegt haben.

Beachten Sie, dass der Befehl vom intlayer Paket erneut exportiert wird. Sie können stattdessen npx intlayer editor start verwenden.

2. Öffnen Sie dann die bereitgestellte URL. Standardmäßig http://localhost:8000.

   Sie können jedes von Intlayer indizierte Feld anzeigen, indem Sie mit dem Cursor über Ihren Inhalt fahren.

   

3. Wenn Ihr Inhalt umrissen ist, können Sie ihn lange drücken, um die Bearbeitungsleiste anzuzeigen.

Umgebungs-Konfiguration

Der Editor kann so konfiguriert werden, dass er eine bestimmte Umgebungsdatei verwendet. Dies ist nützlich, wenn Sie dieselbe Konfigurationsdatei für Entwicklung und Produktion verwenden möchten.

Um eine bestimmte Umgebungsdatei zu verwenden, können Sie beim Starten des Editors die Option --env-file oder -f verwenden:

npx intlayer-editor start -f .env.development

Beachten Sie, dass sich die Umgebungsdatei im Stammverzeichnis Ihres Projekts befinden sollte.

Oder Sie können die Option --env oder -e verwenden, um die Umgebung anzugeben:

npx intlayer-editor start -e development

Debug

Wenn Sie Probleme mit dem visuellen Editor haben, überprüfen Sie Folgendes:

• Der visuelle Editor und die Anwendung laufen.

• Die editor Konfiguration ist korrekt in Ihrer Intlayer-Konfigurationsdatei eingestellt.

  • Erforderliche Felder:
    • Die Anwendungs-URL sollte mit der übereinstimmen, die Sie in der Editor-Konfiguration (applicationURL) festgelegt haben.

• Der visuelle Editor verwendet ein iframe, um Ihre Website anzuzeigen. Stellen Sie sicher, dass die Content Security Policy (CSP) Ihrer Website die CMS-URL als frame-ancestors erlaubt (standardmäßig http://localhost:8000). Überprüfen Sie die Konsole des Editors auf Fehler.

Häufig gestellte Fragen