自訂工具列 id172FB00L0V6

1. 若要下載UI設定檔，請以管理員身分登入Adobe Experience Manager。

2. 按一下頂端的Adobe Experience Manager連結，然後選擇​工具。

3. 從工具清單中選取​參考線，然後按一下​資料夾設定檔。

4. 按一下​ 全域設定檔 ​圖磚。

5. 選取​ XML編輯器設定 ​索引標籤，然後按一下頂端的​ 編輯 ​圖示

6. 按一下「下載」圖示，在本機系統上下載ui_config.json檔案。 您可以接著對檔案進行變更，然後上傳相同的檔案。

7. 在ui_config.json檔案中，在工具列區段中新增新功能的定義。 儲存檔案並上傳。

   通常，您可以建立新的工具列按鈕群組，並在其中新增一或多個工具列按鈕。 或者，您可以在現有的工具列群組中新增工具列按鈕。 建立新的工具列群組需要下列詳細資料：

   型別： 指定blockGroup為type值。 此值表示您正在建立包含一或多個工具列群組的區塊群組。

   extraclass： 以空格分隔的一或多個類別的名稱。

   個專案： 在工具列中指定所有群組的定義。 每個群組可以包含一或多個工具列圖示。 若要定義工具列群組中的圖示，您必須在type中重新定義items屬性，並將其值設為buttonGroup。 在extraclass屬性中指定一或多個類別名稱。 在label屬性中指定功能名稱。 ui_config.json檔案中的下列程式碼片段顯示主要工具列區塊的定義，後面接著buttonGroup定義：

   「
   」 「工具列」： {
   “type”： “blockGroup”，
   「extraclass」：
   「工具列作業」，
   「專案」： [
   {
   “type”： “buttonGroup”，
   “extraclass”： “left-controls”，
   “label”： “Left Controls”，
   「專案」： [
   「
   」
   在items集合中，您必須指定一或多個工具列圖示的定義。

   您需要定義以下屬性以新增工具列圖示：

   型別： 指定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檔案：

   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. 透過將​ apps.fmdita.xml_editor.page_overrides ​的值指派給​ clientlib ​資料夾來更新categories屬性。

10. 儲存​ ui_config.json ​檔案並重新載入網頁編輯器。

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檔案中，在工具列區段中新增新功能的定義。 通常，您可以建立新的工具列按鈕群組，並在其中新增一或多個工具列按鈕。 或者，您可以在現有的工具列群組中新增工具列按鈕。 建立新的工具列群組需要下列詳細資料：

   • type：​指定blockGroup為type值。 此值表示您正在建立包含一或多個工具列群組的區塊群組。

   • 解壓縮類別：​以空格分隔的類別名稱。

   • 專案：​指定工具列中所有群組的定義。 每個群組可以包含一或多個工具列圖示。 若要定義工具列群組中的圖示，您必須在type中重新定義items屬性，並將其值設為buttonGroup。 在extraclass屬性中指定一或多個類別名稱。 在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集合中，您必須指定一或多個工具列圖示的定義。
     您需要定義以下屬性以新增工具列圖示：

   • 型別：​指定button為type值。 此值表示您正在新增工具列按鈕。

   • 圖示：​指定您要在工具列中使用的Coral圖示名稱。

   • 變體：​指定quiet為variant值。

   • 標題：​指定圖示的工具提示。

   • 按一下：​指定在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. 透過將​ apps.fmdita.xml_editor.page_overrides ​的值指派給​ clientlib ​資料夾來更新categories屬性。

8. 儲存​ ui_config.json ​檔案並重新載入網頁編輯器。

JavaScript程式碼範例

本節提供兩個JavaScript程式碼範例，協助您開始新增自訂功能。 以下範例顯示使用者按一下工具列中的「顯示版本」圖示時的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檔案有三個區段：

   1. 工具列： 本節包含編輯器工具列中所有可用功能的定義，例如「插入/移除編號清單」、「(file)關閉」、「儲存」、「註解」等。

   2. 捷徑： 本節包含指定給編輯器中特定功能的鍵盤快速鍵定義。

   3. 範本： 本節包含您可在檔案中使用的DITA元素的預先定義結構。 依照預設，「範本」區段包含段落、簡單表格、表格和正文元素的範本定義。 您可以為想要的元素新增有效的XML結構，以建立任何元素的範本定義。 例如，如果您想要新增包含清單中每個新p元素的li元素，您可以在範本區段的結尾新增下列程式碼，以達成此目的：

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

7. 從工具列區段中，移除您不想向使用者公開的功能專案。

8. 儲存​ ui_config.json ​檔案並重新載入網頁編輯器。

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檔案有三個區段：

• 工具列： 本節包含編輯器工具列中所有可用功能的定義，例如「插入/移除編號清單」、「(file)關閉」、「儲存」、「註解」等。

• 捷徑： 本節包含指定給編輯器中特定功能的鍵盤快速鍵定義。

• 範本： 本節包含您可在檔案中使用的DITA元素的預先定義結構。 依照預設，「範本」區段包含段落、簡單表格、表格和正文元素的範本定義。 您可以為想要的元素新增有效的XML結構，以建立任何元素的範本定義。 例如，如果您想要新增包含清單中每個新p元素的li元素，您可以在範本區段的結尾新增下列程式碼，以達成此目的：

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

1. 從工具列區段中，移除您不想向使用者公開的功能專案。

2. 儲存*ui\_config.json*檔案並重新載入網頁編輯器。