Varias regiones editables

Hace que varios editores de una página se comporten como uno: solo la región donde trabaja el autor muestra una barra de herramientas y una API de grupo lee y escribe todas las regiones a la vez. Úsalo para un formulario CMS con título, resumen y cuerpo que no deban tener cada uno una barra completa.

Tres editores etiquetados Title, Summary y Body; solo Summary, que tiene el cursor, muestra una barra de herramientas — Tres regiones del grupo `"article"`. La barra de herramientas solo aparece en la región que tiene el foco, aquí Summary.

Cómo activarlo

Esta función la ofrece el plugin multiroot.js (también incluido en plugins/all_plugins.js). Crea un editor por región y asígnales el mismo multiRootGroup. No hay ningún botón.

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

Cada región toma el nombre del idde su elemento, por lo que este grupo tiene las raíces title, summary y body. La primera raíz comienza como activa.

Opciones

Opción	Valor predeterminado	Función
`multiRootGroup`	`null` (desactivado)	Los editores con el mismo nombre de grupo forman un único editor con varias raíces.
`multiRootName`	el `id`del elemento; de lo contrario, `root1`, `root2`…	El nombre de la raíz en la API de grupo.
`multiRootToolbarHost`	`null`	Un elemento o el id de un elemento al que mover la barra activa. No lo uses en 2.6.12; consulta Aspectos a tener en cuenta.

API de grupo

Cada editor del grupo recibe el mismo objeto editor.multiRoot :

Miembro	Función
`getRoots()`	`["title", "summary", "body"]`
`getActive()`	El nombre de la raíz que tiene la barra de herramientas, por ejemplo `"summary"`.
`getEditor(name)`	La instancia del editor de esa raíz.
`focusRoot(name)`	Activa esa raíz y le da el foco.
`getHTML()`	Una entrada por raíz, que es lo que guarda un CMS: `{"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)`	Carga cada raíz indicada en el mapa; las raíces que no están en él no se modifican.
`onActiveChange(fn)`	Llama a `fn({ active, editor })` cuando se activa otra raíz. Devuelve una función que elimina el listener.
`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()) });

Cómo usarlo

Hacer clic en una región, o cualquier otra acción que le dé el foco (incluido focusRoot()), la activa: su barra aparece y las demás se ocultan. Los botones de la barra actúan sobre esa región. En la prueba, seleccionar el final del cuerpo y hacer clic en Bold guardó <p>The body text goes h<b>ere.</b></p> en body y dejó las otras raíces sin cambios.

Aspectos a tener en cuenta

Las regiones son editores independientes. Deshacer funciona por región, una selección no puede abarcar dos regiones y, con colaboración, cada región se sincroniza por separado. getCapabilities() indica lo mismo.
Las barras ocultas no ocupan espacio, por lo que el contenido inferior se desplaza la altura de una barra cuando cambia la región activa.
Cambiar el tamaño de la ventana vuelve a mostrar todas las barras en 2.6.12, hasta que el autor pasa a otra región. El propio código adaptable del editor las restaura.
multiRootToolbarHost no funciona en 2.6.12. Una barra movida al contenedor pierde los estilos del editor (se muestra con iconos muy grandes), y las barras que ya se han movido allí no vuelven a ocultarse, por lo que se acumulan al cambiar de región. Deja las barras en su sitio.
Cada región es un editor normal con su propia configuración, por lo que distintas regiones pueden tener barras diferentes; establece el mismo multiRootGroup en todas ellas.

Relacionado: demo de varios editores en una página, obtención del HTML.