自訂工具列 id172FB00L0V6
依預設,Web編輯器會隨附任何DITA編輯器所需的最常見編輯功能。 編輯器中有插入型別清單\(編號或專案符號\)、互動參照、內容參照、表格、段落和字元格式等元素的功能。 除了這些基本元素之外,您還可以自訂Web編輯器來插入在編寫環境中使用的元素。
ui_config的更新必須轉換為更靈活且模組化的UI設定。 此框架可協助您順暢地採用對editor_toolbar和其他目標Widget的變更(如適用)。 如需詳細資訊,請檢視轉換UI組態的總覽。自訂網頁編輯器的工具列有兩種方式:
- 將新功能新增至工具列
- 從工具列移除任何現有功能
在工具列中新增功能
將功能新增至網頁編輯器涉及兩個主要工作 — 在 ui_config.json 檔案中新增該功能的圖示,以及在JavaScript中新增背景功能。
執行以下步驟,將功能新增至網頁編輯器的工具列:
-
若要下載UI設定檔,請以管理員身分登入Adobe Experience Manager。
-
按一下頂端的Adobe Experience Manager連結,然後選擇工具。
-
從工具清單中選取參考線,然後按一下資料夾設定檔。
-
按一下 全域設定檔 圖磚。
-
選取 XML編輯器設定 索引標籤,然後按一下頂端的 編輯 圖示
-
按一下「下載」圖示,在本機系統上下載ui_config.json檔案。 您可以接著對檔案進行變更,然後上傳相同的檔案。
-
在
ui_config.json檔案中,在工具列區段中新增新功能的定義。 儲存檔案並上傳。通常,您可以建立新的工具列按鈕群組,並在其中新增一或多個工具列按鈕。 或者,您可以在現有的工具列群組中新增工具列按鈕。 建立新的工具列群組需要下列詳細資料:
型別: 指定
blockGroup為type值。 此值表示您正在建立包含一或多個工具列群組的區塊群組。extraclass: 以空格分隔的一或多個類別的名稱。
個專案: 在工具列中指定所有群組的定義。 每個群組可以包含一或多個工具列圖示。 若要定義工具列群組中的圖示,您必須在
type中重新定義items屬性,並將其值設為buttonGroup。 在extraclass屬性中指定一或多個類別名稱。 在label屬性中指定功能名稱。ui_config.json檔案中的下列程式碼片段顯示主要工具列區塊的定義,後面接著buttonGroup定義:code language-none "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屬性中的值相同,唯一差異在於指定的模式不會顯示圖示。以下範例顯示使用者按一下工具列中的「顯示版本」圖示時的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" -
建立 clientlib 資料夾,並將您的JavaScript新增至此資料夾。
-
透過將 apps.fmdita.xml_editor.page_overrides 的值指派給 clientlib 資料夾來更新categories屬性。
-
儲存 ui_config.json 檔案並重新載入網頁編輯器。
從工具列移除功能
有時您可能不想提供網頁編輯器中目前可用的所有功能,在這種情況下,您可以從網頁編輯器的工具列移除不需要的功能。
執行以下步驟,從工具列移除任何不想要的特徵:
-
若要下載UI設定檔,請以管理員身分登入Adobe Experience Manager。
-
按一下頂端的Adobe Experience Manager連結,然後選擇工具。
-
從工具清單中選取指南,然後按一下資料夾設定檔。
-
按一下 全域設定檔 圖磚。
-
選取 XML編輯器設定 索引標籤,然後按一下頂端的 編輯 圖示
-
按一下「下載」圖示,在本機系統上下載ui_config.json檔案。 您可以接著對檔案進行變更,然後上傳相同的檔案。
ui_config.json檔案有三個區段:-
工具列: 本節包含編輯器工具列中所有可用功能的定義,例如「插入/移除編號清單」、「(file)關閉」、「儲存」、「註解」等。
-
捷徑: 本節包含指定給編輯器中特定功能的鍵盤快速鍵定義。
-
範本: 本節包含您可在檔案中使用的DITA元素的預先定義結構。 依照預設,「範本」區段包含段落、簡單表格、表格和正文元素的範本定義。 您可以為想要的元素新增有效的XML結構,以建立任何元素的範本定義。 例如,如果您想要新增包含清單中每個新
p元素的li元素,您可以在範本區段的結尾新增下列程式碼,以達成此目的:
code language-css "li": "<li><p></p></li>" -
-
從工具列區段中,移除您不想向使用者公開的功能專案。
-
儲存 ui_config.json 檔案並重新載入網頁編輯器。
上層主題:自訂Web編輯器