← Toute la documentation

Plusieurs zones modifiables

Fait fonctionner plusieurs éditeurs d’une page comme un ensemble : seule la zone où travaille l’auteur affiche une barre d’outils, et une API de groupe lit et écrit toutes les zones à la fois. Utile pour un formulaire de CMS avec titre, résumé et corps, sans barre d’outils complète sur chacun.

Trois éditeurs nommés Title, Summary et Body ; seul Summary, qui contient le curseur, affiche une barre d’outils
Trois zones dans le groupe "article". La barre d’outils n’apparaît que sur la zone ayant le focus, ici Summary.

Activation

Cette fonctionnalité est fournie par le plugin multiroot.js (également inclus dans plugins/all_plugins.js). Créez un éditeur par zone et donnez-leur le même multiRootGroup. Aucun bouton.

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

Chaque zone porte le nom de l’attribut id de son élément : ce groupe possède donc les racines title, summary et body. La première est initialement active.

Options

OptionValeur par défautFonctionnement
multiRootGroupnull (désactivé)Les éditeurs ayant le même nom de groupe forment un éditeur multizone.
multiRootNamel’attribut id de l’élément, sinon root1, root2…Nom de la racine dans l’API du groupe.
multiRootToolbarHostnullÉlément ou identifiant d’élément dans lequel déplacer la barre d’outils active. Ne l’utilisez pas dans la version 2.6.12 ; consultez « À savoir ».

API du groupe

Chaque éditeur du groupe reçoit le même objet editor.multiRoot :

MembreFonctionnement
getRoots()["title", "summary", "body"]
getActive()Nom de la racine ayant la barre d’outils, par exemple "summary".
getEditor(name)Instance d’éditeur de cette racine.
focusRoot(name)Active cette racine et lui donne le focus.
getHTML()Une entrée par racine, que le CMS enregistre : {"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)Charge chaque racine nommée dans la table ; celles qui n’y figurent pas restent inchangées.
onActiveChange(fn)Appelle fn({ active, editor }) lorsqu’une autre racine devient active. Renvoie une fonction qui retire l’écouteur.
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()) });

Utilisation

Cliquer dans une zone, ou lui donner le focus de toute autre manière (y compris avec focusRoot()), l’active : sa barre apparaît et les autres sont masquées. Les boutons agissent sur cette zone. Dans le test, sélectionner la fin du corps puis cliquer sur Bold a enregistré <p>The body text goes h<b>ere.</b></p> dans body sans modifier les autres racines.

À savoir

  • Les zones sont des éditeurs distincts. L’annulation est propre à chaque zone, une sélection ne peut pas s’étendre sur deux zones et, en collaboration, chacune se synchronise séparément. getCapabilities() indique la même chose.
  • Les barres masquées n’occupent aucun espace, donc le contenu en dessous se déplace d’une hauteur de barre lorsque la zone active change.
  • Redimensionner la fenêtre réaffiche toutes les barres dans la version 2.6.12, jusqu’au passage à une autre zone. Le code adaptatif de l’éditeur les restaure.
  • multiRootToolbarHost ne fonctionne pas dans la version 2.6.12. Une barre déplacée dans l’hôte perd les styles de l’éditeur (ses icônes deviennent très grandes), et les barres déjà déplacées ne sont plus masquées : elles s’accumulent lors des changements de zone. Laissez les barres à leur place.
  • Chaque zone est un éditeur normal avec sa configuration ; les barres peuvent donc différer d’une zone à l’autre. Définissez le même multiRootGroup sur toutes.

Voir aussi : démonstration de plusieurs éditeurs sur une page, récupérer le HTML.