多个可编辑区域

让一个页面上的多个编辑器像一个编辑器那样工作：只有作者正在编辑的区域显示工具栏，并且由一个组 API 同时读写所有区域。适用于包含标题、摘要和正文的 CMS 表单，这些区域不应各自带有一整套工具栏。

启用

该功能由 multiroot.js 插件提供（也包含在 plugins/all_plugins.js 中）。为每个区域创建一个编辑器，并为它们设置相同的 multiRootGroup。它没有按钮。

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

每个区域以其元素的 id 命名，因此这个组包含 title、summary 和 body 三个根。第一个根一开始处于活动状态。

选项

选项	默认值	作用
multiRootGroup	null（关闭）	组名相同的编辑器组成一个多根编辑器。
multiRootName	元素的 id，否则为 root1、root2……	该根在组 API 中的名称。
multiRootToolbarHost	null	用于放置活动工具栏的元素或元素 id。在 2.6.12 中请不要使用它；见“注意事项”。

组 API

组中的每个编辑器都会得到同一个 editor.multiRoot 对象：

成员	作用
getRoots()	["title", "summary", "body"]
getActive()	带有工具栏的根的名称，例如 "summary"。
getEditor(name)	该根的编辑器实例。
focusRoot(name)	让该根成为活动根并获得焦点。
getHTML()	每个根一个条目，这正是 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)	加载映射中列出的每个根；不在映射中的根保持不变。
onActiveChange(fn)	当另一个根成为活动根时调用 fn({ active, editor })。返回一个用于移除该监听器的函数。
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()) });

使用方法

点击进入某个区域，或者任何让焦点进入该区域的操作（包括 focusRoot()），都会让它成为活动区域：它的工具栏出现，其他区域的工具栏被隐藏。工具栏按钮作用于该区域。在测试中，选中正文末尾并点击 Bold，在 body 中保存了 <p>The body text goes h<b>ere.</b></p>，其他根保持不变。

注意事项

• 各区域是独立的编辑器。撤销按区域进行，选区不能跨越两个区域，使用协作时每个区域各自同步。getCapabilities() 也说明了这一点。
• 隐藏的工具栏不占空间，因此活动区域改变时，下方的内容会移动一个工具栏的高度。
• 在 2.6.12 中，调整窗口大小会让所有工具栏重新显示，直到作者移到另一个区域为止。这是编辑器自身的响应式代码恢复了它们。
• multiRootToolbarHost 在 2.6.12 中无法正常工作。移入宿主元素的工具栏会失去编辑器的样式（以非常大的图标渲染），而且已经移入的工具栏不会再被隐藏，因此随着作者切换区域，它们会越堆越多。请让工具栏保持在原位。
• 每个区域都是一个有自己配置的普通编辑器，因此不同的区域可以有不同的工具栏；请为它们全部设置相同的 multiRootGroup。

相关内容：同一页面上的多个编辑器演示、获取 HTML。