見出しの折りたたみ

見出しの下のセクションを折りたたんで長い文書を整理し、クリック 1 回で展開できます。折りたたみが変えるのは編集中の表示だけです。保存する HTML には常にすべてのセクションが含まれます。

Installation 見出しを折りたたんだエディター。左余白に右向きの青い矢印があり、展開中の Configuration 見出しの横には下向きの灰色の矢印があります — 「Installation」を折りたたんだ状態です。2 つの段落と「Requirements」サブセクションが非表示になっています。「Configuration」にポインターが重なり、折りたたみ用の灰色の矢印が表示されています。

有効にする

この機能は foldheadings.js プラグインで提供されます（plugins/all_plugins.js にも含まれます）。既定で有効で、読み込むだけで使えます。ツールバーボタンはありません。

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

使い方

見出し（h1～h6）にポインターを重ねると、左余白に小さな矢印が現れます。クリックすると折りたたみます。折りたたんだ見出しには右向きの青い矢印が残り、クリックすると展開します。見出しの文字をクリックした場合は通常どおりカーソルが置かれ、折りたたみません。タッチ画面ではホバーできないため、矢印を常に薄く表示します。

見出しの後ろから、次の同じレベルまたは上位レベルの見出しの手前までの、すべてのブロックを非表示にします。そのため、h2 を折りたたむと内部の h3 セクションも隠れ、h3 を折りたたむと次の h3 または h2 の手前までが隠れます。非表示になるブロックにカーソルがある場合は、見出しの末尾へ移動して、非表示のテキスト内に残らないようにします。

オプションと API

オプション	既定値	動作
`foldHeadingsEnabled`	`true`	`false` にするとクリックでの折りたたみを無効にします。以下のメソッドは引き続き使えます。

editor.foldAtCaret() は、カーソルのあるセクション（その見出し、または直前の最も近い見出し）を折りたたむか展開します。見出しがなければ false を返します。
editor.toggleHeadingFold(headingElement) は、指定した 1 つの見出しを折りたたむか展開します。
editor.unfoldAll() は、すべてのセクションを展開します。

スラッシュコマンドのプラグインを読み込むと、「/」メニューに、これらのメソッドを呼び出す「Fold section」と「Unfold all」が表示されます。キーボードでも折りたためます。

注意点

折りたたみの状態は編集中の 2 つの CSS クラスで表します。見出しには rte-fold-collapsed、非表示のブロックには rte-fold-hidden を付けます。getHTMLCode()、getHTMLContent()、getJSON() は、呼び出し時にこれらを取り除くため、非表示のセクションも保存されます。状態自体は保存せず、文書は常に展開した状態で開きます。
折りたたんだ要素には、保存される HTML に空の class 属性が残ります。
```
<h2 id="installation" class="">Installation</h2>
<p class="">Copy the richtexteditor folder to your site and add two script tags.</p>
```
害はありませんが、差分には現れます。（id は、このプラグインではなく、エディターの見出しアンカー機能 autoHeadingAnchors が付けています。）
折りたたむと、内容は変わっていなくてもエディターの change イベントが発生します。このイベントで文書を未保存として扱う場合は留意してください。
一緒に折りたたむのは、兄弟関係にある見出しとブロックだけです。div などのラッパー内にある見出しでは、そのラッパー内で後続するブロックだけを折りたたみます。
plugins/all_plugins.js を使う場合、同じ左余白にブロックのドラッグハンドル（⠿）が重なり、矢印の代わりにハンドルがクリックされます。クリックで折りたたむには dragHandleEnabled: false を設定するか、スラッシュメニューまたは API を使います。

関連情報：設定リファレンス、スラッシュコマンドのデモ、大きな文書のデモ。