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

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

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

3. ツールのリストから​ ガイド ​を選択し、フォルダープロファイル​をクリックします。

4. 「グローバルプロファイル」タイルをクリックします。

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

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

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

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

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

   エクストラクラス: クラスの名前またはスペースで区切られたクラス。

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

   code language-none
   "' 「ツールバー」: { "type": "blockGroup", "extraclass": "ツールバー操作", "items": [ { "type": "buttonGroup", "extraclass": "left-controls", "label": "Left Controls", "items": [ "'

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

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

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

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

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

   title: アイコンのツールチップを指定します。

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

   code language-none
   "'Javascript "on-click": {"name": "AUTHOR_INSERT_ELEMENT", "args": "simpletable"} "'

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

   showの代わりに、hide プロパティを定義することもできます。 指定されたモードでアイコンが表示されない唯一の違いは、show プロパティの値と同じです。

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

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

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

   ui_config.json ファイルに次のように機能を追加します。

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

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

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

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

1. AEMにログインし、CRXDE Lite モードを開きます。

2. 次の場所にあるデフォルトの設定ファイルに移動します。

   /libs/fmdita/clientlibs/clientlibs/xmleditor/ui_config.json

3. デフォルト設定ファイルのコピーを次の場所に作成します。

   /apps/fmdita/xmleditor/ui_config.json

4. に移動し、ui_config.json ノードのapps ファイルを開いて編集します。

5. ui_config.json ファイルで、「ツールバー」セクションに新しい機能の定義を追加します。 通常、新しいツールバーボタングループを作成し、1つ以上のツールバーボタンを追加できます。 または、既存のツールバーグループ内に新しいツールバーボタンを追加することもできます。 新しいツールバーグループを作成するには、次の詳細が必要です。

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

   • extraclass: クラスの名前またはスペースで区切られたクラス。

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

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

     items コレクション内で、1つ以上のツールバーアイコンの定義を指定する必要があります。
     ツールバーアイコンを追加するには、次のプロパティを定義する必要があります。

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

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

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

   • title: アイコンのツールヒントを指定します。

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

     code language-javascript
     "on-click": {"name": "AUTHOR_INSERT_ELEMENT", "args": "simpletable"}

   • 表示または非表示： show プロパティを定義する場合は、アイコンが表示されるモードを指定します。 使用可能な値は、@isAuthorMode、@isSourceMode、@isPreviewMode、true \（すべてのモードで表示\）またはfalse \（すべてのモードで非表示\）です。

   showの代わりに、hide プロパティを定義することもできます。 指定されたモードでアイコンが表示されない唯一の違いは、show プロパティの値と同じです。

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

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

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

JavaScript コードサンプル

この節では、カスタム機能の追加を開始するのに役立つJavaScript コードの2つの例を示します。 次の例は、ユーザーがツールバーの「バージョンを表示」アイコンをクリックした場合のAEM Guidesのバージョン番号を示しています。

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

/**
* This file contains an example to show AEM Guides version
* number when a user clicks on the Show Version icon in the toolbar.
* Step 1. Create a clientlib folder and add save a file with your *JavaScript code into this folder. A code sample is shared below.
* Step 2: Update the categories property of the clientlib folder by *assigning it the value of
* "apps.fmdita.xml_editor.page_overrides".
* Step 3: Add the feature in the ui_config.json file as shown after the *sample code. Save the ui_config.json file and reload the Web Editor
 */

(function (window) {
  "use strict";

  window.addEventListener('DOMContentLoaded', function () {
    fmxml.ready(function () {
      fmxml.eventHandler.subscribe({
        key: 'user.alert',
        next: function next() {
          alert("AEM Guides version x.x");
        }
      });
    });
  });
})(window);

ui_config.json ファイルに次のように機能を追加します。

 {
      "type": "button",
      "icon": "alert",
      "title": "About AEM Guides",
      "variant": "quiet",

  "show": "true",
      "on-click": "user.alert"
  }

次の例は、ドキュメントのアクティブなファイルの状態を「レビュー中」に変更する方法を示しています。

/**
* This file contains an example to set the document state of an active *open documen to "In-Review".
* Step 1. Create a clientlib folder and add save a file with your *JavaScript code into this folder. A code sample is shared below.
* Step 2: Update the categories property of the clientlib folder by *assigning it the value of
* "apps.fmdita.xml_editor.page_overrides".
* Step 3: Add the feature in the ui_config.json file as shown after the *sample code. Save the ui_config.json file and reload the Web Editor
 */

(function (window) {
  "use strict";

  //Wait for the page has been completely loaded

  window.addEventListener('DOMContentLoaded', function () {

    //Wait for the xml editor to start
    fmxml.ready(function () {

      //Subscribe to 'user.docstate.to.in-review' event
      fmxml.eventHandler.subscribe({
        key: 'user.docstate.to.in-review',
        next: function next() {
          var docstate = "In-Review"; // New docstate name
          var filePath = fmxml.curEditor.filePath;
// Get the file path of active open file
          if (filePath) {
            //Call API to change the doc state
            $.ajax({
              type: 'POST',
              url: '/bin/fmdita/states',
              data: {
                paths: filePath,
                operation: "setdocstates",
                docstate: docstate
              }
            }).fail(function (xhr, textStatus, errorThrown) {
              console.error("Cannot update docstate to " + docstate);
            }).success(function (data) {
              console.log('docstate updated to ' + docstate);
            });
          }
        }
      });
    });
  });
})(window);

ui_config.json ファイルに次のように機能を追加します。

 {
      "type": "button",
      "icon": "actions",
      "title": "Change document state to In-Review",
      "variant": "quiet",
      "show": "true",
      "on-click": "user.docstate.to.in-review"
    }

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

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

3. ツールのリストから​ ガイド ​を選択し、フォルダープロファイル​をクリックします。

4. 「グローバルプロファイル」タイルをクリックします。

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

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

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

   1. ツールバー: このセクションには、番号付きリストの挿入/削除、\（ファイル\）閉じる、保存、コメントなど、エディターのツールバーで使用できるすべての機能の定義が含まれています。

   2. ショートカット: このセクションでは、エディターの特定の機能に割り当てられたキーボードショートカットの定義について説明します。

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

   code language-css
   "li": "<li><p></p></li>"

7. ツールバーのセクションから、ユーザーに公開しない機能のエントリを削除します。

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

1. AEMにログインし、CRXDE Lite モードを開きます。

2. 次の場所にあるデフォルトの設定ファイルに移動します。

   /libs/fmdita/clientlibs/clientlibs/xmleditor/ui_config.json

3. デフォルト設定ファイルのコピーを次の場所に作成します。

   /apps/fmdita/xmleditor/ui_config.json

4. に移動し、ui_config.json ノードのapps ファイルを開いて編集します。
   ui_config.json ファイルには、次の3つのセクションがあります。

• ツールバー： このセクションには、番号付きリストの挿入/削除、\（ファイル\）閉じる、保存、コメントなど、エディターのツールバーで使用できるすべての機能の定義が含まれています。

• ショートカット： このセクションでは、エディターの特定の機能に割り当てられたキーボードショートカットの定義について説明します。

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

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

1. ツールバーのセクションから、ユーザーに公開しない機能のエントリを削除します。

2. *ui\_config.json* ファイルを保存し、Web エディターを再読み込みします。