Contraer secciones por encabezado

Contrae la sección bajo un encabezado para apartar partes de un documento largo y vuelve a expandirla con un clic. Contraer solo cambia lo que se ve durante la edición; el HTML guardado siempre contiene todas las secciones.

Cómo activarlo

Esta función la ofrece el plugin foldheadings.js (también incluido en plugins/all_plugins.js). Basta con cargarlo; está activado de forma predeterminada y no tiene botón en la barra de herramientas.

<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>

Cómo usarlo

Pasa el puntero sobre un encabezado (deh1 a h6) y aparecerá una flecha pequeña en el margen izquierdo. Haz clic para contraerlo. Un encabezado contraído conserva una flecha azul que apunta a la derecha; haz clic para expandirlo. Al hacer clic en el texto del encabezado se coloca el cursor como de costumbre, sin contraerlo. En pantallas táctiles, las flechas permanecen ligeramente visibles, ya que no existe el estado de puntero encima.

Al contraer se ocultan todos los bloques posteriores al encabezado hasta el siguiente del mismo nivel o de uno superior. Por tanto, contraer un h2 también oculta las secciones h3 que contiene; contraer un h3 se detiene en el siguiente h3 o h2. Si el cursor está en un bloque que va a ocultarse, se mueve al final del encabezado para que nunca quede dentro de texto oculto.

Opciones y API

Opción	Valor predeterminado	Función
foldHeadingsEnabled	true	false desactiva la contracción mediante clic. Los métodos siguientes siguen funcionando.

• editor.foldAtCaret() contrae o expande la sección donde está el cursor (su propio encabezado o el más cercano por encima). Devuelve false si no hay encabezado.
• editor.toggleHeadingFold(headingElement) contrae o expande un encabezado.
• editor.unfoldAll() expande todas las secciones.

Con el plugin de comandos con barra cargado, el menú "/" incluye las entradas "Fold section" y "Unfold all", que llaman a estos métodos y permiten contraer secciones a quienes usan el teclado.

Aspectos a tener en cuenta

• Durante la edición, el estado de contracción se representa con dos clases CSS: rte-fold-collapsed en el encabezado y rte-fold-hidden en los bloques ocultos. getHTMLCode(), getHTMLContent() y getJSON() las quitan durante la llamada, por lo que las secciones ocultas se guardan. El estado en sí no se guarda: un documento siempre se abre expandido.
• Los elementos que se han contraído conservan un atributo class vacío en el HTML guardado:

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

  Es inofensivo, pero aparece en las diferencias. (El id procede de las anclas de encabezados del editor, autoHeadingAnchors, no de este plugin).
• Contraer una sección dispara el evento change del editor, aunque el contenido no haya cambiado. Tenlo en cuenta si usas el evento para marcar un documento como pendiente de guardar.
• Solo se contraen juntos los encabezados que son hermanos. Un encabezado dentro de un contenedor, como un div , contrae únicamente los bloques que lo siguen dentro de ese contenedor.
• Con plugins/all_plugins.js, el control de arrastre de bloques (⠿) ocupa el mismo margen izquierdo y tapa la flecha, de modo que los clics llegan al control. Establece dragHandleEnabled: false si quieres contraer mediante clic, o usa el menú de comandos con barra o la API.

Relacionado: referencia de configuración, demo de comandos con barra, demo de documentos grandes.