Live-Vorschau

Die Live-Vorschau ermöglicht es Nutzer*innen, ihren Content in Echtzeit auf derselben Seite mit dem Eintragseditor anzuzeigen. Wenn Änderungen am Content vorgenommen werden, werden diese sofort im Vorschaufenster angezeigt.

Die Live-Vorschau verfügt über die folgenden Funktionen:

  • Vorschau und Bearbeitung nebeneinander – Bearbeiten Sie Ihren Eintrag und sehen Sie sich die Änderungen in der Vorschau auf derselben Web-App-Seite an. Sie müssen nicht zwischen den Registerkarten wechseln:

Live preview overview
  • Live-Updates – Während Sie Ihren Eintrag bearbeiten, werden die Änderungen gleichzeitig im Vorschaufenster angezeigt, ohne die Vorschau zu aktualisieren:

Live preview live updates
  • Inspektormodus – Klicken Sie auf „Bearbeiten“ für einen bestimmten Teil des Website-Contents, um schnell zum Quellfeld zu springen und die erforderlichen Änderungen vorzunehmen:

Live preview inspector mode

HINWEIS: Im Inspektormodus können Sie Einträge öffnen, auf die von anderen Spaces aus verwiesen wird. Der Eintrag wird in einem neuen Tab geöffnet, in dem Sie Änderungen daran vornehmen können.

Sowohl der von Contentful bereitgestellte Standard-Eintragseditor als auch jeder benutzerdefinierte Eintragseditor sind mit der Live-Vorschau kompatibel. Die Live-Vorschau zeigt den Inhalt der Editor-Registerkarte an, die sich ganz links im Eintragseditor befindet. Um die Reihenfolge der Registerkarten des Eintragseditors zu ändern, gehen Sie zur Registerkarte Eintragseditoren des entsprechenden Contenttyps.

Um die Vorschau und Bearbeitung nebeneinander verwenden zu können, müssen Sie eine Content-Vorschau einrichten, aber es sind keine Codeänderungen erforderlich. Um die erweiterten Funktionen der Live-Vorschau – Live-Updates und Inspektormodus – zu aktivieren, muss das Live-Vorschau-SDK initialisiert werden:

FunktionAnforderung zum Initialisieren des Live-Vorschau-SDK
Vorschau und Bearbeitung nebeneinanderKein Live-Vorschau-SDK erforderlich.
Live-UpdatesLive-Vorschau-SDK erforderlich.
InspektormodusLive-Vorschau-SDK erforderlich.

HINWEIS: Informationen zum Einrichten der grundlegenden und erweiterten Funktionen der Live-Vorschau finden Sie unter Live-Vorschau.

HINWEIS: Die Live-Vorschau unterstützt derzeit keine benutzerdefinierten Eintragseditoren. Derzeit wird nur der Standard-Eintragseditor unterstützt.

Im Live-Vorschaufenster wird möglicherweise die Meldung „Verbindung verweigert“ angezeigt. Dies kann passieren, wenn Ihre Website über eine Sicherheitskonfiguration verfügt, die verhindert, dass andere Websites sie in einen iframe einbetten. Wenden Sie sich an Ihr Entwickler- oder Sicherheitsteam, um die Sicherheitskonfiguration Ihrer Website zu ändern und die Unterstützung der Live-Vorschau zu aktivieren. Weitere Informationen finden Sie unter Live-Vorschau einrichten.

Live preview refused to connect

Die Live-Vorschau zeigt Ihren Eintrag in der Sprache an, die im Eintragseditor ausgewählt ist.

Sie können die Sprachen in der Live-Vorschau wechseln. Um diese Option zu aktivieren, müssen Sie in Ihren Vorschau-Einstellungen ein Sprachen-Element (entweder das {locale}-Token oder ein lokalisiertes benutzerdefiniertes Vorschau-Token) hinzufügen. Weitere Informationen finden Sie unter Content-Vorschau einrichten

HINWEIS: Die Funktion ist nur für Kund*innen mit dem Premium-Paket verfügbar.