---
title: "Bridge · Documentation Leiho"
description: "Le paquet leiho et leiho-bridge.js."
url: https://leiho.dev/fr/docs/bridge
lang: fr
updated: 2026-11-04
---
Référence

# Bridge

Le paquet leiho et leiho-bridge.js.

## Installation

## React

```bash
npm install leiho
```

Une seule fois, dans le layout racine (Next.js `app/layout.tsx`, Remix `root.tsx`, Vite `App.tsx`) :

```jsx
import { LeihoBridge } from 'leiho/react';

<LeihoBridge wpOrigin="https://your-wordpress.example" />
```

Le composant n’affiche rien et importe le bridge dynamiquement, uniquement dans l’éditeur. C’est un composant client (`'use client'`), il peut donc se placer dans un layout serveur Next.js.

## N’importe quel bundler (ESM)

```js
if (window.self !== window.top) {
  const { initLeihoBridge } = await import('leiho');
  initLeihoBridge({ wpOrigin: 'https://your-wordpress.example' });
}
```

## Balise script

Copiez `dist/leiho-bridge.js` dans votre dossier public (l’extension le propose aussi au téléchargement dans **Leiho → Démarrer**), puis dans `<head>` :

```html
<script>
  if (window.self !== window.top) {
    var s = document.createElement('script');
    s.src = '/leiho-bridge.js';
    s.setAttribute('data-wp-origin', 'https://your-wordpress.example');
    document.head.appendChild(s);
  }
</script>
```

Le fichier autonome démarre seul à partir de son attribut `data-wp-origin`.

## Options

| Option | Défaut |  |
| --- | --- | --- |
| `wpOrigin` | obligatoire | Origine de wp-admin, par ex. `https://wp.example.com`. Les messages venant de toute autre origine sont ignorés. |
| `cloakTimeout` | `4000` (`0` dans le composant React) | Masque la page jusqu’à ce que l’éditeur envoie ses valeurs, pour éviter l’affichage furtif d’un contenu périmé. `0` le désactive. |

## Autoriser l’affichage en iframe

Vos pages doivent permettre à wp-admin de les afficher :

```
Content-Security-Policy: frame-ancestors 'self' https://your-wordpress.example
```

et ne doivent pas envoyer `X-Frame-Options: DENY` ni `SAMEORIGIN`.

## Protocole

Les messages sont de la forme `{ ns: 'leiho', type, … }`, envoyés avec un `targetOrigin` explicite et vérifiés par rapport à `event.origin`.

| Sens | Type | Signification |
| --- | --- | --- |
| bridge → éditeur | `ready` | Champs, sections et ratios des emplacements d’image présents sur la page, plus son URL. Renvoyé après une navigation côté client. |
| bridge → éditeur | `fieldFocus` | Un élément modifiable a été cliqué |
| bridge → éditeur | `sectionFocus` | Une section a été cliquée |
| bridge → éditeur | `managedFocus` | Une zone gérée a été cliquée |
| bridge → éditeur | `navigate` | Un lien a été cliqué |
| bridge → éditeur | `cloakTimeout` | L’éditeur n’a pas répondu à temps |
| éditeur → bridge | `init` | Valeurs enregistrées à afficher |
| éditeur → bridge | `fieldUpdate` | Valeur en direct d’un champ en cours de modification |
| éditeur → bridge | `focusField` / `focusSection` | Faire défiler jusqu’à un élément et le mettre en évidence |

Mis à jour le 4 novembre 2026[Un point pas clair sur cette page ? Dites-le-nous →](https://github.com/pixelersagency/leiho/issues/new?title=Docs%3A%20Bridge)