Aperçu en direct

Qu’est-ce que l’aperçu en direct ?

L’aperçu en direct permet de voir son contenu en temps réel, directement dans la même page que l’éditeur d’entrée. Lorsque des modifications sont apportées au contenu, elles sont immédiatement reflétées dans le volet de prévisualisation.

Fonctionnalités d’aperçu en direct

L’aperçu en direct inclut les fonctionnalités suivantes :

  • Prévisualisation et édition côte à côte — Modifiez votre entrée et prévisualisez les modifications dans la même page de l’application Web, sans avoir à basculer entre les onglets :

Live preview overview
  • Mises à jour en direct — Lorsque vous modifiez votre entrée, les modifications sont simultanément affichées dans le volet de prévisualisation, sans actualiser l’aperçu :

Live preview live updates
  • Mode Inspecteur — Cliquez sur Modifier à côté d’un élément de contenu du site pour accéder rapidement à son champ source et y apporter les changements nécessaires :

Live preview inspector mode

REMARQUE : en mode Inspecteur, vous pouvez ouvrir des entrées qui sont référencées depuis d’autres espaces. L’entrée s’ouvre dans un nouvel onglet, depuis lequel vous pouvez effectuer vos modifications.

Aperçu en direct et éditeur personnalisé

L’éditeur d’entrées par défaut fourni par Contentful et tout éditeur d’entrées personnalisé sont compatibles avec l’aperçu en direct. L’aperçu en direct affiche le contenu de l’onglet de l’éditeur qui se trouve le plus à gauche dans l’éditeur d’entrées. Pour réorganiser les onglets de l’éditeur d’entrées, accédez à l’ onglet Éditeurs d’entrées du type de contenu correspondant.

Prérequis

Pour pouvoir utiliser l’aperçu et la modification côte à côte, vous devez configurer un aperçu du contenu, mais aucune modification de code n’est nécessaire. Pour activer les fonctionnalités avancées d’aperçu en direct - mises à jour en direct et mode Inspecteur - il est nécessaire d’initialiser le SDK d’aperçu en direct :

Fonctionnalité

Nécessité d’initialiser le SDK d'aperçu en direct

Aperçu et édition côte à côte

Aucun SDK d’aperçu en direct requis.

Mises à jour en direct

SDK d’aperçu en direct requis.

Mode Inspecteur

SDK d’aperçu en direct requis.

REMARQUE : pour savoir comment configurer les fonctionnalités de base et avancées de l’aperçu en direct, reportez-vous à la section Aperçu en direct.

REMARQUE : l’aperçu en direct ne prend actuellement pas en charge les éditeurs d’entrées personnalisés ; seul l’éditeur d’entrées par défaut est pris en charge pour le moment.

Pourquoi mon site Web refuse-t-il de se connecter ?

Le volet d’aperçu en direct peut afficher un message « Refus de connexion ». Cela peut se produire si votre site Web a une configuration de sécurité qui empêche d’autres sites Web de l’intégrer dans un iframe. Contactez votre équipe de développement ou de sécurité pour modifier la configuration de sécurité de votre site Web afin d’activer la prise en charge de l’aperçu en direct. Pour en savoir plus, reportez-vous à la section Configurer l’aperçu en direct.

Live preview refused to connect

Paramètres de langue-région dans l’aperçu en direct

L’aperçu en direct affiche votre entrée dans les paramètres de langue-région sélectionnés dans l’éditeur d’entrées.

Vous pouvez changer les paramètres de langue-région dans l’aperçu en direct. Pour activer cette option, vous devez ajouter un élément de langue (le token {paramètre de langue-région} ou un token d’aperçu personnalisé localisé) dans vos paramètres d’aperçu. Pour en savoir plus, reportez-vous à la section Configurer l’aperçu du contenu

REMARQUE : la fonctionnalité n’est disponible que pour les clients de la formule Premium.