複数の編集領域

同じページの複数のエディターを、1 つとして動作させます。作業中の領域だけにツールバーを表示し、グループ 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（無効）	グループ名が同じエディターを、1 つのマルチルートエディターとして扱います。
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()	ルートごとに 1 つの項目を持ち、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() も同じ内容を示します。
• 非表示のツールバーは場所を取りません。アクティブ領域が変わると、下の内容がツールバー 1 つ分の高さだけ移動します。
• 2.6.12 では、ウィンドウのサイズを変えるとすべてのツールバーが再表示されます。別の領域に移るまでそのままです。エディターのレスポンシブ処理が表示を復元するためです。
• 2.6.12 では multiRootToolbarHost は動作しません。移動したツールバーはエディターのスタイルを失い、非常に大きいアイコンで表示されます。移動済みのツールバーも隠れないため、領域を切り替えるたびに重なっていきます。ツールバーは元の場所に残してください。
• 各領域は固有の設定を持つ通常のエディターなので、領域ごとに異なるツールバーを使えます。すべてに同じ multiRootGroup を設定してください。

関連情報：1 ページに複数のエディターを配置するデモ、HTML の取得。