Curseur entre les blocs

Permet d’ajouter un paragraphe là où le curseur ne peut normalement pas aller : avant un tableau tout en haut du document, ou entre deux tableaux, séparateurs ou autres blocs directement accolés. Une touche fléchée, un clic dans l’espace ou sur une ligne d’aide bleue crée le paragraphe.

Deux tableaux consécutifs dans l’éditeur, avec une ligne bleue et un point dans l’espace entre eux sous le pointeur — Le survol de la frontière entre deux tableaux affiche la ligne d’aide. Un clic y insère un paragraphe vide.

Les mêmes tableaux avec un nouveau paragraphe entre eux contenant Prices exclude tax. — Après le clic : un paragraphe entre les tableaux, avec le texte saisi.

Activation

Cette fonctionnalité est fournie par le plugin gapcursor.js (également inclus dans plugins/all_plugins.js). Il suffit de le charger ; aucun bouton dans la barre d’outils.

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css">
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/gapcursor.js"></script>

<div id="editor"><table style="width:100%"><tbody><tr><td>Plan</td><td>Price</td></tr><tr><td>Starter</td><td>$129</td></tr></tbody></table><table style="width:100%"><tbody><tr><td>Region</td><td>Tax</td></tr><tr><td>EU</td><td>20%</td></tr></tbody></table></div>
<script>
var editor = new RichTextEditor("#editor");
</script>

Sans le plugin, dans ce document, Flèche haut depuis la première cellule laisse le curseur dans la cellule, et Flèche droite depuis la fin du premier tableau place le texte saisi entre les tableaux, hors de tout paragraphe.

Espaces pris en compte

Un espace n’est proposé que là où l’auteur est bloqué : avant le premier bloc, entre deux blocs ou après le dernier bloc, si le bloc voisin est de type table, hr, img, figure, iframe, video, audio, object, embed, canvas, svg ou pre et qu’aucun paragraphe n’y existe déjà. Seuls les blocs directement dans le corps du document sont examinés. L’éditeur conserve déjà un paragraphe vide après un tableau en fin de document : en pratique, les espaces se trouvent donc en haut et entre les blocs.

Utilisation

Clavier. Flèche bas, Flèche droite, Fin ou Page suivante à la fin d’un tel bloc, ou Flèche haut, Flèche gauche, Début ou Page précédente à son début, insèrent un paragraphe de ce côté. Dans un tableau, « la fin » signifie la dernière ligne pour Flèche bas et la dernière cellule pour Flèche droite ; à l’intérieur du tableau, ces touches naviguent normalement. Les combinaisons avec Maj, Ctrl, Alt ou Cmd restent inchangées : la sélection et le déplacement des blocs avec Alt+Flèche ne sont pas affectés.
Clic. Un clic dans un espace vide de l’éditeur correspondant à un intervalle y insère le paragraphe.
Aide visuelle. Deux tableaux peuvent se toucher sans aucun pixel entre eux. Placer le pointeur à moins de 10 pixels de cette frontière affiche une ligne bleue ; y appuyer sur le bouton de la souris insère le paragraphe.

Le nouveau paragraphe est <p><br></p> : il a donc une hauteur et le curseur y est visible.

Options et API

Option	Valeur par défaut	Fonctionnement
`gapCursorKeys`	`true`	Les flèches et les touches Début, Fin et Page insèrent un paragraphe au bord d’un bloc.
`gapCursorClick`	`true`	Un clic dans un espace insère un paragraphe.
`gapCursorHint`	`true`	Affiche la ligne d’aide bleue lorsque le pointeur approche d’un espace.

editor.getGapPositions() renvoie les indices des enfants où un paragraphe peut être inséré, par exemple [0, 1] pour le document ci-dessus.
editor.insertParagraphAt(index) insère un paragraphe vide avant l’enfant du corps situé à cet indice et y place le curseur.
editor.insertParagraphBefore(element) et editor.insertParagraphAfter(element) font de même à côté d’un élément donné.

À savoir

Rien n’est ajouté sans demande de l’utilisateur : un document commençant par un tableau est donc enregistré sans modification.
La ligne d’aide est un véritable élément dans la zone d’édition pendant son affichage : <div class="rte-gap-hint" contenteditable="false" aria-hidden="true"></div>. Elle disparaît lorsque le pointeur se déplace ailleurs dans l’éditeur, mais dans la version 2.6.12, elle reste si le pointeur sort directement depuis un espace, par exemple de l’espace au-dessus d’un tableau initial vers la barre d’outils ; getHTMLCode() l’inclut alors. Si vous enregistrez depuis un bouton de la barre d’outils, définissez gapCursorHint: false, ou supprimez div.rte-gap-hint sur le serveur.
En mode suggestion (suivi des modifications), le plugin n’insère rien, car un paragraphe vide ne peut pas encore être suivi.

Voir aussi : démonstration des tableaux, tri des tableaux et numérotation des lignes.