← Gesamte Dokumentation

Mehrere bearbeitbare Bereiche

Bewirkt, dass sich mehrere Editoren auf einer Seite wie ein einziger verhalten: Nur der Bereich, in dem der Autor arbeitet, zeigt eine Symbolleiste an, und eine Gruppen-API liest und schreibt alle Bereiche gleichzeitig. Verwenden Sie es für ein CMS-Formular mit einem Titel, einer Zusammenfassung und einem Textkörper, die nicht jeweils eine vollständige Symbolleiste enthalten sollten.

Drei Herausgeber mit den Bezeichnungen Titel, Zusammenfassung und Hauptteil; Nur die Zusammenfassung mit dem Einfügecursor zeigt eine Symbolleiste an
Drei Regionen in der Gruppe"article". Die Symbolleiste zeigt nur den Bereich mit Fokus an, hier Zusammenfassung.

Schalten Sie es ein

Die Funktion ist diemultiroot.jsPlugin (auch inplugins/all_plugins.js). Erstellen Sie einen Editor pro Region und geben Sie ihm dasselbemultiRootGroup. Es gibt keinen Knopf.

<label>Title</label><div id="title"><h1>Spring release notes</h1></div>
<label>Summary</label><div id="summary"><p>What changed in the editor this quarter.</p></div>
<label>Body</label><div id="body"><p>The body text goes here.</p></div>
<script>
function root(id, height) {
  return new RichTextEditor("#" + id, { multiRootGroup: "article", height: height, toolbar: "basic" });
}
var title = root("title", "110px");
var summary = root("summary", "110px");
var body = root("body", "200px");
</script>

Jede Region ist nach ihrem Element benanntid, also hat diese Gruppe die Wurzelntitle, summaryUndbody. Der erste Stamm beginnt als der aktive.

Optionen

OptionStandardWas es bewirkt
multiRootGroupnull(aus)Editoren mit demselben Gruppennamen bilden einen Multi-Root-Editor.
multiRootNamedes Elementsid, andersroot1, root2…Der Name des Roots in der Gruppen-API.
multiRootToolbarHostnullEin Element oder eine Element-ID, in die die aktive Symbolleiste verschoben werden soll.Verwenden Sie es nicht in 2.6.12; siehe Wissenswertes.

Gruppen-API

Jeder Redakteur in der Gruppe bekommt das Gleicheeditor.multiRootObjekt:

MitgliedWas es bewirkt
getRoots()["title", "summary", "body"]
getActive()Der Name des Roots mit der Symbolleiste, z.B."summary".
getEditor(name)Die Editor-Instanz dieses Stammverzeichnisses.
focusRoot(name)Macht diese Wurzel aktiv und fokussiert sie.
getHTML()Ein Eintrag pro Root, den ein CMS speichert: {"title":"<h1 id=\"spring-release-notes\">Spring release notes</h1>","summary":"<p>What changed in the editor this quarter.</p>","body":"<p>The body text goes here.</p>"}
setHTML(map)Lädt jeden in der Karte genannten Stamm; Wurzeln, die nicht auf der Karte sind, bleiben in Ruhe.
onActiveChange(fn)Ruft fn({ active, editor }) auf, wenn ein anderer Root aktiv wird. Gibt eine Funktion zurück, die den Listener entfernt.
getCapabilities(){ sharedToolbar: true, sharedGroupApi: true, perRootUndo: true, sharedUndoStack: false, selectionAcrossRoots: false, sharedCollaborationSession: false, note }
 
title.multiRoot.onActiveChange(function (e) {
  document.getElementById("where").textContent = "Editing: " + e.active;
});
fetch("/api/article/42", { method: "PUT", body: JSON.stringify(title.multiRoot.getHTML()) });

Verwenden

Wenn Sie auf einen Bereich oder auf etwas anderes klicken, das den Fokus darauf setzt (einschließlich focusRoot()), wird er aktiviert: Die Symbolleiste wird angezeigt und die anderen werden ausgeblendet. Die Schaltflächen der Symbolleiste wirken sich auf diesen Bereich aus. Im Test wurde durch Auswahl des Endes des Körpers und Klicken auf Fett <p>The body text goes h<b>ere.</b></p> in body gespeichert und die anderen Wurzeln unverändert gelassen.

Wissenswertes

  • Die Regionen sind separate Editoren. Das Rückgängigmachen funktioniert pro Region, eine Auswahl kann sich nicht über zwei Regionen erstrecken und bei der Zusammenarbeit wird jede Region einzeln synchronisiert. getCapabilities() besagt dasselbe.
  • Ausgeblendete Symbolleisten nehmen keinen Platz ein, daher verschiebt sich der Inhalt unten um die Höhe einer Symbolleiste, wenn sich der aktive Bereich ändert.
  • Bei einer Fenstergrößenänderung werden in 2.6.12 wieder alle Symbolleisten angezeigt, bis der Autor in einen anderen Bereich wechselt. Der responsive Code des Editors stellt sie wieder her.
  • multiRootToolbarHost funktioniert in 2.6.12 nicht. Eine in den Host verschobene Symbolleiste verliert den Stil des Editors (sie wird mit sehr großen Symbolen gerendert) und bereits dorthin verschobene Symbolleisten werden nicht wieder ausgeblendet, sodass sie sich anhäufen, wenn der Autor die Region wechselt. Belassen Sie die Symbolleisten an Ort und Stelle.
  • Jede Region ist ein normaler Editor mit eigener Konfiguration, daher können verschiedene Regionen unterschiedliche Symbolleisten haben; Stellen Sie für alle den gleichen multiRootGroup ein.

Verwandt: Demo für mehrere Editoren auf einer Seite, HTML abrufen.