Replier les sections

Repliez la section sous un titre pour alléger l’affichage d’un long document, puis dépliez-la d’un clic. Le repli ne modifie que l’affichage pendant l’édition ; le HTML enregistré contient toujours toutes les sections.

Activation

Cette fonctionnalité est fournie par le plugin foldheadings.js (également inclus dans plugins/all_plugins.js). Il suffit de le charger ; il est activé par défaut et n’a pas de 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/foldheadings.js"></script>

<div id="editor">
<h2>Installation</h2>
<p>Copy the richtexteditor folder to your site and add two script tags.</p>
<p>Then create the editor on a div or a textarea.</p>
<h3>Requirements</h3>
<p>Any modern browser.</p>
<h2>Configuration</h2>
<p>Pass a config object as the second argument.</p>
</div>
<script>
var editor = new RichTextEditor("#editor");
</script>

Utilisation

Survolez un titre (h1 à h6) : une petite flèche apparaît dans la marge gauche. Cliquez dessus pour replier la section. Un titre replié garde une flèche bleue vers la droite ; cliquez pour déplier. Cliquer sur le texte du titre place le curseur normalement sans replier. Sur écran tactile, les flèches restent légèrement visibles, car il n’y a pas de survol.

Le repli masque tous les blocs après le titre jusqu’au prochain titre de niveau égal ou supérieur. Replier un h2 masque donc aussi ses sections h3 ; replier un h3 s’arrête au prochain h3 ou h2. Si le curseur est dans un bloc qui va être masqué, il est déplacé à la fin du titre afin de ne jamais rester dans du texte invisible.

Options et API

Option	Valeur par défaut	Fonctionnement
foldHeadingsEnabled	true	false désactive le repli par clic. Les méthodes ci-dessous fonctionnent toujours.

• editor.foldAtCaret() replie ou déplie la section où se trouve le curseur (son titre ou le titre le plus proche au-dessus). Renvoie false s’il n’y a aucun titre.
• editor.toggleHeadingFold(headingElement) replie ou déplie un titre.
• editor.unfoldAll() ouvre toutes les sections.

Lorsque le plugin de commandes slash est chargé, le menu « / » propose « Fold section » et « Unfold all », qui appellent ces méthodes : les utilisateurs du clavier peuvent ainsi replier les sections.

À savoir

• L’état de repli repose sur deux classes CSS pendant l’édition : rte-fold-collapsed sur le titre et rte-fold-hidden sur les blocs masqués. getHTMLCode(), getHTMLContent() et getJSON() les retirent pendant l’appel, ce qui permet d’enregistrer les sections masquées. L’état lui-même n’est pas enregistré : un document s’ouvre toujours déplié.
• Les éléments ayant été repliés conservent un attribut class vide dans le HTML enregistré :

  <h2 id="installation" class="">Installation</h2>
  <p class="">Copy the richtexteditor folder to your site and add two script tags.</p>

  C’est sans conséquence, mais visible dans les différences. (L’attribut id provient des ancres de titres de l’éditeur, autoHeadingAnchors, et non de ce plugin.)
• Le repli déclenche l’événement change de l’éditeur, même si le contenu n’a pas changé. Tenez-en compte si cet événement sert à signaler un document non enregistré.
• Seuls les titres de même parent sont repliés ensemble. Un titre dans un conteneur, comme un div, ne replie que les blocs qui le suivent dans ce conteneur.
• Avec plugins/all_plugins.js, la poignée de déplacement des blocs (⠿) occupe la même marge gauche et recouvre la flèche : les clics atteignent donc la poignée. Définissez dragHandleEnabled: false pour replier au clic, ou utilisez le menu de commandes slash ou l’API.

Voir aussi : référence de configuration, démonstration des commandes slash, démonstration de documents volumineux.