Várias regiões editáveis

Faz vários editores em uma mesma página se comportarem como um só: só a região em que o autor está trabalhando mostra uma barra de ferramentas, e uma única API de grupo lê e grava todas as regiões de uma vez. Use-o em um formulário de CMS com título, resumo e corpo que não devem ter, cada um, uma barra de ferramentas completa.

Três editores chamados Title, Summary e Body; só Summary, que tem o cursor, mostra uma barra de ferramentas — Três regiões no grupo `"article"`. A barra de ferramentas aparece só na região com o foco, aqui Summary.

Ative o recurso

O recurso é o plugin multiroot.js (também incluído em plugins/all_plugins.js). Crie um editor por região e dê a todos o mesmo multiRootGroup. Não há botão.

<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ão recebe o nome do id do seu elemento; assim, este grupo tem as raízes title, summary e body. A primeira raiz começa como a ativa.

Opções

Opção	Padrão	O que faz
`multiRootGroup`	`null` (desativado)	Editores com o mesmo nome de grupo formam um único editor de várias raízes.
`multiRootName`	o `id` do elemento; se não houver, `root1`, `root2`…	O nome da raiz na API do grupo.
`multiRootToolbarHost`	`null`	Um elemento, ou o id de um elemento, para onde mover a barra de ferramentas ativa. Não use na 2.6.12; veja O que você precisa saber.

API do grupo

Todo editor do grupo recebe o mesmo objeto editor.multiRoot:

Membro	O que faz
`getRoots()`	`["title", "summary", "body"]`
`getActive()`	O nome da raiz com a barra de ferramentas, por exemplo `"summary"`.
`getEditor(name)`	A instância do editor dessa raiz.
`focusRoot(name)`	Torna essa raiz ativa e dá foco a ela.
`getHTML()`	Uma entrada por raiz, que é o que um CMS salva: `{"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)`	Carrega cada raiz indicada no mapa; as raízes que não estão no mapa não são alteradas.
`onActiveChange(fn)`	Chama `fn({ active, editor })` quando outra raiz se torna ativa. Retorna uma função que remove o 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()) });

Como usar

Clicar em uma região, ou qualquer outra coisa que coloque o foco nela (incluindo focusRoot()), a torna ativa: a barra de ferramentas dela aparece e as outras ficam ocultas. Os botões da barra de ferramentas agem sobre essa região. No teste, selecionar o fim do corpo e clicar em Bold salvou <p>The body text goes h<b>ere.</b></p> em body e deixou as outras raízes sem alteração.

O que você precisa saber

As regiões são editores separados. O desfazer funciona por região, uma seleção não pode abranger duas regiões e, com colaboração, cada região sincroniza por conta própria. getCapabilities() informa o mesmo.
As barras de ferramentas ocultas não ocupam espaço; por isso, o conteúdo abaixo se desloca na altura de uma barra de ferramentas quando a região ativa muda.
Um redimensionamento da janela mostra de novo todas as barras de ferramentas na 2.6.12, até o autor passar para outra região. O próprio código responsivo do editor as restaura.
multiRootToolbarHost não funciona na 2.6.12. Uma barra de ferramentas movida para o host perde o estilo do editor (ela aparece com ícones enormes), e as barras de ferramentas já movidas para lá não são ocultadas de novo; assim, elas vão se acumulando à medida que o autor troca de região. Deixe as barras de ferramentas onde estão.
Cada região é um editor normal, com a própria configuração; portanto, regiões diferentes podem ter barras de ferramentas diferentes. Defina o mesmo multiRootGroup em todas elas.

Relacionados: demonstração de vários editores em uma página, como obter o HTML.