管理画面カスタム要素
管理画面のテンプレートで使えるカスタム要素（Web Components）です。タグを書くだけで、タグ選択・カテゴリー選択・ユニットエディター・ブロックエディターなどの UI が初期化されます。
対応バージョン: Ver. 3.2.29 以降
特徴
- 後から挿入された要素も自動的に初期化されます。 カスタムフィールドの行追加、タブの切り替え、ダイアログの表示など、どの経路で挿入されても動作します。初期化用の JavaScript を呼ぶ必要はありません。
- JavaScript から値を読み書きできます。
el.valueとchangeイベントを持つ要素は、標準のフォーム要素と同じ感覚で扱えます。
要素の一覧
| 要素 | 用途 | 値の読み書き | イベント |
|---|---|---|---|
<acms-tag-select> | タグの選択 | el.value（カンマ区切りのタグ名） | change |
<acms-category-select> | カテゴリーの選択 | el.value（カテゴリー ID） | change |
<acms-sub-category-select> | サブカテゴリーの選択 | el.value（カンマ区切りの ID） | change |
<acms-related-entry-editor> | 関連エントリーの編集 | el.value（エントリーの配列） | change |
<acms-unit-editor> | ユニットエディター | el.editor（読み取りのみ） | change |
<acms-block-editor> | ブロックエディター | el.editor（読み取りのみ） | change |
<acms-unit-inplace-editor> | ユニットのインライン編集 | なし | なし |
<acms-unit-config-editor> | 編集設定のユニット設定 | なし | なし |
<acms-block-editor-menu-type-select> | 編集設定のブロック type 選択 | — | — |
el.editor は、エディターのインスタンスです。マウントが完了する前は null になります。
基本の使い方
値は、target 属性で指定した <input> に同期されます。target を省略した場合は、要素の中に置いた最初の <input type="hidden"> に同期されます。
<form>
<acms-tag-select default-value="CMS,JavaScript">
<input type="hidden" name="tag" value="CMS,JavaScript">
</acms-tag-select>
</form>値を読み書きする
const tagSelect = document.querySelector('acms-tag-select');
// 読む
console.log(tagSelect.value); // 'CMS,JavaScript'
// 書く
tagSelect.value = 'CMS,JavaScript,a-blog cms';
// 変更を受け取る
tagSelect.addEventListener('change', (event) => {
console.log(event.target.value);
});disabled 属性（プロパティ）で入力を無効にできます。<acms-tag-select> / <acms-category-select> / <acms-sub-category-select> で使えます。
tagSelect.disabled = true;属性
属性は要素が画面に追加された時点で一度だけ読み込まれます。後から属性を変えても再初期化はされません（disabled を除く）。
<acms-tag-select>
| 属性 | 説明 |
|---|---|
target | 値を同期する input の CSS セレクタ（省略時は要素内の最初の hidden input） |
default-value | 初期値（カンマ区切りのタグ名） |
input-id | 入力欄に付ける id |
is-disabled | true で無効化 |
form / name | フォームとの関連付け |
menu-portal-target | 選択メニューの描画先（CSS セレクタ） |
<acms-category-select>
| 属性 | 説明 |
|---|---|
target | 値を同期する input の CSS セレクタ（省略時は要素内の最初の hidden input） |
default-value | 初期値（カテゴリー ID） |
narrow-down | true で、候補をコンフィグ entry_edit_category_filter で指定したカテゴリーに絞り込む（既定 false） |
no-option | true で、先頭に「未選択」の選択肢（値は 0）を足す（既定 false） |
mt-option | true で、先頭に値が -1 の選択肢を足す（既定 false） |
is-creatable | true で、その場でカテゴリーを新規作成できる（既定 false） |
is-clearable | false で、選択を解除するボタンを出さない（既定 true） |
input-id | 入力欄に付ける id |
is-disabled | true で無効化 |
form / name | フォームとの関連付け |
menu-portal-target | 選択メニューの描画先（CSS セレクタ） |
<acms-sub-category-select>
| 属性 | 説明 |
|---|---|
target | 値を同期する input の CSS セレクタ（省略時は要素内の最初の hidden input） |
default-value | 初期値（カンマ区切りのサブカテゴリー ID） |
default-label | default-value の各 ID に対応する表示名（カンマ区切り） |
category-id | 連動するカテゴリー input の CSS セレクタ（既定 [name=category_id]）。メインのカテゴリーが変わると、候補が切り替わる |
limit | 選択できる数の上限。超えると警告を表示する |
input-id | 入力欄に付ける id |
is-disabled | true で無効化 |
form / name | フォームとの関連付け |
menu-portal-target | 選択メニューの描画先（CSS セレクタ） |
<acms-related-entry-editor>
| 属性 | 説明 |
|---|---|
type | 関連エントリーの種類名。フォームで送る値の名前にも使われる |
module-id | 候補の検索に使うモジュール ID |
ctx | 候補の検索に渡すコンテキスト（モジュールの ctx 指定と同じ書き方） |
thumbnail | 候補にサムネイルを表示するかの指定（検索のテンプレートに渡す値） |
max-item | 選べる件数の上限（0 なら制限なし） |
json-id | 初期値の JSON を持つ <script> 要素の id（必須） |
data-title | 表の見出し |
<acms-unit-editor>
| 属性 | 説明 |
|---|---|
default-value | ユニットの JSON |
settings | 設定の JSON |
<acms-block-editor>
| 属性 | 説明 |
|---|---|
settings | 設定の JSON |
内容（HTML）は、属性ではなく、要素の中に置いた <input type="hidden"> の値から読み込まれ、編集のたびに同じ input に書き戻されます。hidden input が無いと初期化に失敗します。
<acms-block-editor settings='{"features":{"textItalic":false}}'>
<input type="hidden" name="body" value="<p>本文</p>">
</acms-block-editor><acms-unit-inplace-editor>
| 属性 | 説明 |
|---|---|
default-value | ユニットの JSON |
settings | 設定の JSON |
unit-id | 編集するユニットの ID |
<acms-unit-config-editor>
| 属性 | 説明 |
|---|---|
default-value | ユニット構成の JSON |
settings | 設定の JSON |
label | 設定欄の見出し |
data-id | 設定欄の識別子 |
共通の属性
| 属性 | 説明 |
|---|---|
root-class | 画面に描画される本体の要素に付ける class |
これらの要素は自身の表示ボックスを持たない（display: contents）ため、要素自身に class を付けても見た目には反映されません。class を付けたいときは、root-class を使います。
.js-block-editor を使っている場合
カスタムフィールド・カスタムユニットで .js-block-editor を使ったマークアップは、そのまま動作します。書き換えは不要です（内部で <acms-block-editor> に置き換えられます）。
新しく書く場合は <acms-block-editor> を直接使ってください。置き換えの処理を経由しないため、初期化が少し早くなります。
関連ページ
- 管理画面の JavaScript 拡張
- イベント一覧 — 選択の変更を購読する