ツールバーのカスタマイズ id172FB00L0V6

UI 設定ファイルをダウンロードするには、管理者としてAdobe Experience Managerにログインします。

上部の「 Adobe Experience Manager 」リンクをクリックし、「 」を選択します。 ツール.

選択 ガイド ​ツールのリストから、 フォルダープロファイル.

をクリックします。 Global Profile タイル。

を選択します。 XML エディターの設定 タブをクリックし、 編集 上部のアイコン

次をクリック： ダウンロード アイコンを使用して、ui_config.json ファイルをローカルシステムにダウンロードします。 その後、ファイルに変更を加えてから、同じファイルをアップロードできます。

Adobe Analytics の ui_config.json ファイルを開き、新しい機能の定義を「ツールバー」セクションに追加します。 ファイルを保存してアップロードします。

通常は、新しいツールバーボタングループを作成し、そのグループに 1 つ以上のツールバーボタンを追加できます。 または、既存のツールバーグループ内に新しいツールバーボタンを追加できます。 新しいツールバーグループを作成するには、次の詳細が必要です。

type：を指定します。 blockGroup として type の値です。 この値は、1 つ以上のツールバーグループを含むブロックグループを作成していることを示します。

抽出：スペースで区切られたクラスの名前。

項目：ツールバーのすべてのグループの定義を指定します。 各グループには、1 つまたは複数のツールバーアイコンを含めることができます。 ツールバーグループ内でアイコンを定義するには、 type 属性を itemsの値をに設定し、 buttonGroup. で 1 つ以上のクラス名を指定します。 extraclass プロパティ。 でフィーチャ名を指定します。 label プロパティ。 次のスニペット： ui_config.json ファイルには、メインツールバーブロックの定義が表示され、その後に buttonGroup 定義：

"'
"toolbar": {
"type": "blockGroup",
"extraclass":
"toolbar operations",
"items": [
{
"type": "buttonGroup",
"extraclass": "left-controls",
"label": "Left Controls",
"items": [
"'

内 items コレクションに含める場合は、1 つ以上のツールバーアイコンの定義を指定する必要があります。

ツールバーアイコンを追加するには、次のプロパティを定義する必要があります。

type：を指定します。 button として type の値です。 この値は、ツールバーボタンを追加しようとしていることを示します。

アイコン：ツールバーで使用する Coral アイコンの名前を指定します。

バリアント：を指定します。 quiet として variant の値です。

タイトル：アイコンのツールチップを指定します。

クリック時:JavaScript ファイルで、機能に対して定義されたコマンド名を指定します。 コマンドに入力パラメータが必要な場合は、コマンド名を次のように指定します。

"'JavaScript
"on-click": {"name": "AUTHOR_INSERT_ELEMENT", "args": "simpletable"}
"'

表示または非表示: show プロパティを使用して、アイコンが表示されるモードを指定します。 指定できる値は — です。 @isAuthorMode, @isSourceMode, @isPreviewMode, true \（すべてのモードで表示\）または false \（すべてのモードで非表示にします\）。

の代わりに showを使用する場合、 hide プロパティ。 指定可能な値は、の値と同じです。 show プロパティの値は、指定したモードではアイコンが表示されないという違いだけです。

次の例は、ユーザーがツールバーのバージョンを表示アイコンをクリックしたときのAEM Guides のバージョン番号を示しています。

次のコードを JavaScript ファイルに追加します。

$(document).ready(setTimeout(function() {
                        fmxml.commandHandler.subscribe({
                        key: 'user.alert',
                        next: function() {
                        alert("AEM Guides version x.x")
                        }
                        })
                        }, 1000))

機能を ui_config.json ファイルの形式：

"type": "button",
"icon": "alert","variant": "quiet","title": "About AEM Guides","show": "true","on-click": "user.alert"

の作成 clientlib フォルダーに追加し、このフォルダーに JavaScript を追加します。

の categories プロパティを更新します。 clientlib フォルダーに次の値を割り当てる apps.fmdita.xml_editor.page_overrides.

を保存します。 ui_config.json ファイルを作成し、Web エディタを再読み込みします。

UI 設定ファイルをダウンロードするには、管理者としてAdobe Experience Managerにログインします。

上部の「 Adobe Experience Manager 」リンクをクリックし、「 」を選択します。 ツール.

選択 ガイド ツールのリストから、 フォルダープロファイル.

をクリックします。 Global Profile タイル。

を選択します。 XML エディターの設定 タブをクリックし、 編集 上部のアイコン

次をクリック： ダウンロード アイコンを使用して、ui_config.json ファイルをローカルシステムにダウンロードします。 その後、ファイルに変更を加えてから、同じファイルをアップロードできます。

The ui_config.json ファイルには 3 つのセクションがあります。

1. ツールバー：このセクションには、エディターのツールバーで使用できるすべての機能 (「番号付きリストを挿入/削除」、「(file) 閉じる」、「保存」、「コメント」など ) の定義が含まれます。

2. ショートカット：このセクションには、エディターの特定の機能に割り当てられるキーボードショートカットの定義が含まれています。

3. テンプレート：この節には、文書で使用できる DITA 要素の事前定義済みの構造が含まれています。 デフォルトでは、「テンプレート」セクションには、段落、単純なテーブル、テーブルおよび本文の各要素のテンプレート定義が含まれています。 任意の要素のテンプレート定義を作成するには、目的の要素に有効な XML 構造を追加します。 例えば、 p 新たに追加されるごとに要素 li 要素をリストに追加すると、テンプレートセクションの最後に次のコードを追加して、これを実現できます。

"li": "<li><p></p></li>"

「ツールバー」セクションで、ユーザーに表示しない機能のエントリを削除します。

を保存します。 ui_config.json ファイルを作成し、Web エディタを再読み込みします。