L'éditeur de contenu

Texte enrichi, barre d'outils, images, encadrés, aperçu.

Le texte enrichi en dix minutes

L'éditeur accepte du texte simple, enrichi par quelques conventions. Vous n'avez rien à apprendre par cœur : la barre d'outils écrit ces signes pour vous. Mais les connaître va plus vite.

Vous écrivez Vous obtenez
## Un titre Un titre de section
### Un sous-titre Un titre plus petit
**important** important
*nuance* nuance
`apt update` Une commande, en police fixe
- point Une liste à puces
1. étape Une liste numérotée
> citation Une citation en retrait
[texte](https://…) Un lien
![Légende](url) Une image
--- Un filet de séparation

Pour un bloc de commandes sur plusieurs lignes, encadrez-le de trois accents graves et nommez le langage — la coloration syntaxique et le bouton Copier viennent avec :

```bash
sudo apt update
sudo apt install nginx
```

Les tableaux s'écrivent avec des barres verticales :

| Commande | Effet |
| --- | --- |
| `ls` | Liste le contenu |
| `cd` | Change de dossier |

Sur téléphone, un tableau trop large se transforme automatiquement en fiches lisibles : vous n'avez pas à vous en soucier.

La barre d'outils

Au-dessus de la zone de texte : gras, italique, code, titres, listes, citation, lien, image, bloc de code, tableau, encadré, puis le menu Blocs et l'onglet Aperçu.

Chaque bouton agit sur votre sélection : sélectionnez un mot, cliquez sur G, il devient gras. Sans sélection, le bouton insère un gabarit où placer le curseur.

Raccourcis : Ctrl+B gras, Ctrl+I italique, Ctrl+K lien (Cmd sur Mac).

Sans JavaScript, l'éditeur reste utilisable

La barre d'outils et l'aperçu sont des commodités. Si les scripts sont bloqués, il reste une zone de texte parfaitement fonctionnelle : votre contenu s'enregistre et se rend normalement.

Insérer une image et régler sa taille

Trois façons de téléverser :

  1. le bouton image de la barre d'outils ;
  2. glisser-déposer le fichier sur la zone de texte ;
  3. coller une image copiée (une capture d'écran, par exemple).

Formats acceptés : PNG, JPEG, WebP, GIF. Taille maximale : 5 Mo.

Après téléversement, l'éditeur insère la ligne à votre place et vous propose une largeur : la largeur naturelle de l'image si elle est raisonnable, sinon une valeur adaptée à la colonne de lecture. Pour la régler à la main :

![Le panneau de configuration](/medias/image/12/){: width="600" }

La hauteur suit automatiquement : l'image n'est jamais déformée.

Le texte de la légende n'est pas décoratif : c'est lui que lit un lecteur d'écran, et lui qui s'affiche si l'image ne charge pas. Décrivez ce que l'image montre, pas le fichier : « le panneau de configuration de GRUB », pas « capture 3 ».

Vos images sont rattachées au cours et servies par une page qui vérifie les droits : elles ne fuient pas hors de vos élèves.

Les encadrés

Pour attirer l'œil sur une remarque :

!!! note "À retenir"
    Le texte de l'encadré, indenté de quatre espaces.

Quatre tons sont disponibles : note, tip, warning, danger. Réservez danger à ce qui peut détruire quelque chose — un encadré rouge tous les deux paragraphes ne signale plus rien.

Le bloc [[encadre]] (section suivante) fait la même chose avec un titre plus libre et la palette de la plateforme. Les deux coexistent ; utilisez celui qui vous vient naturellement.

L'aperçu

L'onglet Aperçu, à droite de la barre d'outils, montre le rendu final.

Il est calculé par le serveur, avec exactement la même chaîne de traitement que la publication : ce que vous voyez dans l'aperçu est ce que verra l'élève, sans divergence possible. Les blocs interactifs y fonctionnent réellement.

Pour la mise en page dans la vraie page de cours — sommaire, largeur de colonne, boutons de navigation — utilisez plutôt Aperçu élève (voir Voir le cours comme un élève).

Ce que l'éditeur refuse, et pourquoi

Le contenu est nettoyé à l'enregistrement. Sont retirés :

  • les balises <script> et tout attribut onclick, onload, etc. ;
  • les <iframe> — une vidéo s'insère avec [[video=…]], qui ne charge rien avant le clic de l'élève ;
  • les styles arbitraires et les balises HTML non prévues.

Ce n'est pas une défiance envers vous : c'est ce qui garantit qu'un compte d'enseignant compromis ne puisse pas servir à attaquer vos élèves, et que la mise en page du site reste cohérente d'un cours à l'autre.

Si une mise en forme vous manque, demandez-la : un bloc s'ajoute proprement, et il profite alors à tout le monde.