Recolher títulos

Recolha a seção abaixo de um título para tirar do caminho um documento longo, e expanda-a de novo com um clique. Recolher só muda o que é exibido durante a edição; o HTML salvo sempre contém todas as seções.

Ative o recurso

O recurso é o plugin foldheadings.js (também incluído em plugins/all_plugins.js). Basta carregá-lo; ele vem ativado por padrão e não tem botão na barra de ferramentas.

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

Como usar

Passe o mouse sobre um título (h1 a h6) e uma pequena seta aparece na margem à esquerda dele. Clique na seta para recolher. Um título recolhido mantém uma seta azul apontando para a direita; clique nela para expandir. Clicar no texto do título posiciona o cursor normalmente e não recolhe nada. Em telas de toque, as setas ficam levemente visíveis, já que não existe o passar do mouse.

Recolher oculta todos os blocos depois do título até o próximo título do mesmo nível ou de um nível superior. Recolher um h2, portanto, também oculta as seções h3 dentro dele; recolher um h3 para no próximo h3 ou h2. Se o cursor estiver dentro de um bloco que vai ser ocultado, ele é movido para o fim do título, para nunca ficar em um texto oculto.

Opções e API

Opção	Padrão	O que faz
foldHeadingsEnabled	true	false desativa o recolhimento por clique. Os métodos abaixo continuam funcionando.

• editor.foldAtCaret() recolhe ou expande a seção em que o cursor está (o próprio título dela, ou o título mais próximo acima). Retorna false se não houver título.
• editor.toggleHeadingFold(headingElement) recolhe ou expande um título.
• editor.unfoldAll() abre todas as seções.

Com o plugin de comandos de barra carregado, o menu "/" tem as entradas "Fold section" e "Unfold all", que chamam esses métodos e dão aos usuários de teclado uma forma de recolher.

O que você precisa saber

• Durante a edição, o estado de recolhimento são duas classes CSS: rte-fold-collapsed no título e rte-fold-hidden nos blocos ocultos. getHTMLCode(), getHTMLContent() e getJSON() as removem durante a chamada, então as seções ocultas são salvas. O estado em si não é salvo: um documento sempre abre expandido.
• Os elementos que foram recolhidos ficam com um atributo class vazio no HTML salvo:

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

  Isso não causa problema, mas aparece em diffs. (O id vem das âncoras de título do editor, autoHeadingAnchors, e não deste plugin.)
• Recolher dispara o evento change do editor, embora o conteúdo não tenha mudado. Leve isso em conta se você usa o evento para marcar um documento como não salvo.
• Só títulos que são irmãos são recolhidos juntos. Um título dentro de um contêiner, como uma div, recolhe apenas os blocos que vêm depois dele dentro desse contêiner.
• Com plugins/all_plugins.js, a alça de arrastar blocos (⠿) fica na mesma margem esquerda e cobre a seta, então os cliques vão para a alça. Defina dragHandleEnabled: false se quiser recolher com um clique, ou recolha pelo menu de barra ou pela API.

Relacionados: referência de configuração, demonstração de comandos de barra, demonstração de documentos grandes.