> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lekalao.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Les éditeurs

> Blocs visuels, Markdown, HTML ou MJML : choisir comment écrire.

Chaque campagne, e-mail d'automatisation et modèle s'écrit dans l'un des quatre éditeurs. On le choisit à la création, et on peut en changer ensuite dans le champ **Éditeur** (le contenu n'est pas converti : changer d'éditeur, c'est repartir de ce qui est écrit).

| Éditeur           | Pour qui                                              | Mise en page                                                             |
| ----------------- | ----------------------------------------------------- | ------------------------------------------------------------------------ |
| **Blocs visuels** | Tout le monde, sans code.                             | Lekalao la construit, aux couleurs de votre [charte](/fr/content/brand). |
| **Markdown**      | Les textes d'abord : lettres d'information, annonces. | Lekalao enveloppe le texte dans une mise en page propre.                 |
| **HTML**          | Ceux qui ont déjà un HTML d'e-mail.                   | La vôtre, entièrement.                                                   |
| **MJML**          | Les intégrateurs qui veulent un responsive fiable.    | Compilée en HTML compatible avec les messageries.                        |

<Note>Les modèles transactionnels ne proposent pas l'éditeur de blocs.</Note>

## L'écran d'édition

<Frame caption="L'éditeur de contenu d'une campagne : champs, outils, code et aperçu.">
  <img src="https://mintcdn.com/lekalao/1MhDqJH_2b8fUZJ7/images/content-editor.png?fit=max&auto=format&n=1MhDqJH_2b8fUZJ7&q=85&s=a007f112c8082f6fcf033d5ccbf421a4" alt="Éditeur de contenu d'une campagne" width="2880" height="1800" data-path="images/content-editor.png" />
</Frame>

* **La première ligne** porte ce qui décrit l'e-mail : **Objet**, **Modèle**, **Éditeur**.
* **La seconde ligne** porte les outils : **Variables**, **Images**, **Vérifier les liens**, **Vérifier pour les lecteurs**, **Envoyer un test**, puis **Sauvegarder** (<kbd>⌘</kbd> <kbd>S</kbd>).
* **À gauche** le contenu, **à droite** l'aperçu, rendu par le moteur d'envoi lui-même et mis à jour pendant que vous tapez. Voir [Aperçu et contrôles](/fr/content/checks).
* Le bouton **Mode concentration** replie la navigation et masque les en-têtes : ne restent que le texte et son aperçu. <kbd>Échap</kbd> pour en sortir.

Au-dessus, les **onglets de langue** permettent d'écrire l'e-mail dans d'autres langues. Voir [Langues](/fr/content/languages).

## Blocs visuels

On empile des blocs avec **Ajouter un bloc**, on les réordonne avec **Monter** et **Descendre**.

| Bloc              | Réglages                                                                          |
| ----------------- | --------------------------------------------------------------------------------- |
| **Titre**         | Texte du titre.                                                                   |
| **Texte**         | Paragraphe en Markdown : `**gras**`, `*italique*`, `[lien](https://…)`, listes.   |
| **Image**         | Image de la médiathèque ou adresse, description (texte alternatif), lien au clic. |
| **Bouton**        | Texte du bouton et lien.                                                          |
| **Séparateur**    | Une ligne.                                                                        |
| **Espacement**    | Un espace vertical réglable.                                                      |
| **Zone éditable** | Uniquement dans un modèle : l'endroit que les campagnes rempliront.               |

Le panneau **Style** règle, pour cet e-mail seulement, le fond de la page, le fond du contenu, la couleur des liens et des boutons. Tout ce qui n'est pas réglé vient de la charte de l'équipe.

**Morceaux enregistrés** garde un pied de page, un en-tête ou un encart pour le réinsérer d'un clic dans n'importe quel e-mail. Voir [Médiathèque et morceaux](/fr/content/media-and-blocks).

## Markdown

```markdown theme={null}
# Nouveautés de septembre

Bonjour {{ subscriber.first_name }},

La **brioche au beurre de karité** est arrivée. [Réservez la vôtre](https://exemple.com/brioche).

- Pain au levain le dimanche
- Dégustation samedi de 10 h à 13 h
```

Le Markdown accepte aussi des balises HTML au milieu du texte (un `<img>`, un `<table>`) ; pour une mise en page entièrement à vous, choisissez l'éditeur HTML. Dans un bloc **Texte** de l'éditeur visuel, en revanche, le HTML est affiché tel quel, sans être interprété.

## HTML

Collez ou écrivez votre HTML dans l'éditeur de code (coloration, numéros de ligne). Lekalao :

* **inline le CSS** de vos balises `<style>` dans les attributs `style`, en gardant les media queries ;
* génère la **version texte** ;
* réécrit les liens pour le **suivi des clics**, si le suivi est actif.

## MJML

```xml theme={null}
<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text>Bonjour {{ subscriber.first_name }}</mj-text>
        <mj-button href="https://exemple.com">Commander</mj-button>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>
```

<Warning>
  MJML est compilé par Node.js sur le serveur. S'il manque, l'éditeur affiche
  « MJML ne peut pas être compilé sur ce serveur » : voir
  [Prérequis](/fr/self-hosting/requirements).
</Warning>