Mobile

Activer le mode barre d’outils mobile

Une feuille de style à activer explicitement, qui adapte l’éditeur aux téléphones et aux appareils tactiles. Aucune modification du balisage de l’éditeur — tout passe par le CSS, dans une media query réservée aux fenêtres étroites, si bien que les mises en page de bureau restent inchangées.

Ouvrir la démo en direct

L’activer

Ajoutez la classe rte-mobile à n’importe quel conteneur d’éditeur et incluez rte_mobile.css :

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css" />
<link rel="stylesheet" href="/richtexteditor/rte_mobile.css" />

<div id="editor" class="rte-mobile"></div>

Avec le Tag Helper ASP.NET Core, il suffit de définir enable-mobile-toolbar="true" — il émet le lien et ajoute la classe pour vous.

<richtextbox asp-for="Body" toolbar="full"
             enable-mobile-toolbar="true" />

Ce qui change

Zones tactiles de 44×44 — conformes au critère WCAG 2.5.6 Target Size.
Barre d’outils à défilement horizontal — pas de retour à la ligne, pas d’espace vertical perdu, avec un dégradé en bordure pour signaler le défilement.
Barre d’outils fixe — elle reste épinglée au-dessus du clavier virtuel.
Listes déroulantes en panneau inférieur — les menus de police, de couleur et d’insertion s’ouvrent en panneaux glissant du bas au lieu d’être coupés hors de l’écran.
Boîtes de dialogue pleine largeur — lien, image, Ask AI : marges de sécurité de 8px sur les côtés.
Panneau de relecture par le bas — le panneau des commentaires et du suivi des modifications glisse vers le haut, et non depuis la droite.
Barre d’outils flottante des paragraphes désactivée — elle entrait en conflit avec le clavier iOS.
Police du contenu à 16px — empêche le zoom automatique d’iOS lorsqu’on touche l’éditeur.

Tout est limité à l’intérieur de :

@media (max-width: 768px), (pointer: coarse) {
    .rte-mobile .rte-toolbar { /* ... */ }
    /* ... */
}

Laisser la classe en place dans le code de production est donc sans conséquence — une fenêtre de bureau n’applique aucune des règles propres au mobile.

Par défaut sur tout le site

Pour les applications d’administration où chaque éditeur est d’abord destiné au téléphone, appliquez une seule fois la classe à <body> :

<body class="rte-mobile">
    ...
</body>

Elle s’applique en cascade à tous les éditeurs de la page ; aucun attribut par instance n’est nécessaire.