← Gesamte Dokumentation

Überschriften falten

Reduzieren Sie den Abschnitt unter einer Überschrift, um ein langes Dokument aus dem Weg zu räumen, und erweitern Sie ihn mit einem Klick wieder. Beim Falten ändert sich nur das, was beim Bearbeiten angezeigt wird. Der gespeicherte HTML-Code enthält immer jeden Abschnitt.

Der Editor mit der Überschrift „Installation“ ist ausgeblendet, gekennzeichnet durch einen blauen, nach rechts zeigenden Pfeil am linken Rand, und der geöffnete Abschnitt „Konfiguration“ ist mit einem grauen, nach unten zeigenden Pfeil neben der Überschrift geöffnet
"Installation"ist gefaltet: seine zwei Absätze und die"Requirements"Unterabschnitt sind ausgeblendet. Der Zeiger ist vorbei"Configuration", was den grauen Pfeil zeigt, der es faltet.

Schalten Sie es ein

Die Funktion ist diefoldheadings.jsPlugin (auch inplugins/all_plugins.js). Es reicht aus, es zu laden. Es ist standardmäßig aktiviert und verfügt über keine Symbolleistenschaltfläche.

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

Benutze es

Bewegen Sie den Mauszeiger über eine Überschrift (h1Zuh6) und am Rand links davon erscheint ein kleiner Pfeil. Klicken Sie zum Falten auf den Pfeil. Bei einer gefalteten Überschrift bleibt ein blauer Pfeil erhalten, der nach rechts zeigt; Klicken Sie darauf, um es zu entfalten. Wenn Sie auf den Text der Überschrift klicken, wird die Einfügemarke wie gewohnt platziert und nicht gefaltet. Auf Touchscreens bleiben die Pfeile schwach sichtbar, da kein Schweben erfolgt.

Eine Falte verbirgt jeden Block nach der Überschrift bis zur nächsten Überschrift derselben oder einer höheren Ebene. Falten einesh2daher verbirgt sich auch dash3Abschnitte darin; Falten undh3bleibt beim nächsten stehenh3oderh2. Befindet sich die Einfügemarke innerhalb eines Blocks, der ausgeblendet werden soll, wird sie an das Ende der Überschrift verschoben, sodass sie nie im ausgeblendeten Text steht.

Optionen und API

OptionStandardWas es bewirkt
foldHeadingsEnabledtruefalseschaltet das Falten durch Klicken aus. Die folgenden Methoden funktionieren weiterhin.
  • editor.foldAtCaret()Faltet oder entfaltet den Abschnitt, in dem sich die Einfügemarke befindet (seine eigene Überschrift oder die nächstgelegene Überschrift darüber). Rückgabenfalsewenn keine Überschrift vorhanden ist.
  • editor.toggleHeadingFold(headingElement)Faltet oder entfaltet eine Überschrift.
  • editor.unfoldAll() öffnet jeden Abschnitt.

Wenn das Slash-Command-Plugin geladen ist, enthält das Menü "/" die Einträge "Fold section" und "Unfold all", die diese Methoden aufrufen, was Tastaturbenutzern die Möglichkeit gibt, zu falten.

Wissenswertes

  • Der Faltstatus besteht aus zwei CSS-Klassen beim Bearbeiten, rte-fold-collapsed für die Überschrift und rte-fold-hidden für die ausgeblendeten Blöcke. getHTMLCode(), getHTMLContent() und getJSON() nehmen sie für den Anruf ab, sodass versteckte Abschnitte gespeichert werden. Der Status selbst wird nicht gespeichert: Ein Dokument wird immer ungefaltet geöffnet.
  • Elemente, die gefaltet wurden, behalten ein leeres class-Attribut im gespeicherten HTML:
    <h2 id="installation" class="">Installation</h2>
    <p class="">Copy the richtexteditor folder to your site and add two script tags.</p>
    Es ist harmlos, taucht aber in Diffs auf. (Der id stammt von den Überschriftenankern des Editors, autoHeadingAnchors, nicht von diesem Plugin.)
  • Folding löst das change-Ereignis des Editors aus, obwohl sich der Inhalt nicht geändert hat. Beachten Sie dies, wenn Sie das Ereignis verwenden, um ein Dokument als nicht gespeichert zu markieren.
  • Nur Überschriften, die gleichrangig sind, werden zusammengelegt. Eine Überschrift innerhalb eines Wrappers wie z. B. div faltet nur die darauf folgenden Blöcke innerhalb dieses Wrappers.
  • Bei plugins/all_plugins.js befindet sich der Blockziehgriff (⠿) am selben linken Rand und verdeckt den Pfeil, sodass Klicks stattdessen den Griff erreichen. Legen Sie dragHandleEnabled: false fest, wenn Sie Click-to-Fold möchten, oder klappen Sie über das Slash-Menü oder die API.

Verwandt: Konfigurationsreferenz,Slash-Befehle-Demo, große Dokumente-Demo.