Adobe Experience Manager支援符合各種協助工具標準的多種協助工具功能。 此外,開發人員可自訂或擴充功能,以提供使用Rich Text Editor(RTE)的Experience Manager元件來建立可存取內容的功能。
當設計網頁並將內容新增至頁面時,內容開發人員和作者可使用RTE的功能來提供協助工具相關資訊。 例如,透過標題和段落元素新增結構資訊。
要配置和自定義這些功能,請為元件配置RTE插件。 例如,paraformat
外掛程式可讓您新增其他區塊層級的語義元素,包括將支援的標題層級數擴充至預設提供的基本H1
、H2
和H3
。
RTE可用於Touch-enabled用戶介面和Classic用戶介面的多種元件。 但是,使用RTE的主要元件是Text元件,它可用於兩個介面。 以下影像顯示啟用了一系列插件的RTE,包括paraformat
:
圖:啟用觸控的使用者介面中的文字元件。
圖:Classic使用者介面中的Text元件。
有關各種介面中可用的RTE功能之間的差異,請參見插件及其功能。
有關配置RTE的完整說明,請參見配置Rich Text Editor頁。 這涵蓋所有問題,包括關鍵步驟:
在CRXDE Lite中的適當rtePlugins
子分支中設定外掛程式,即可啟動該外掛程式的所有或特定功能。
新的語義塊格式可通過以下方式提供供選擇:
根據RTE,確定並導航至配置位置。
啟用「段落選擇」欄位;啟動 外掛程式。
然後,內容作者可從RTE中的選擇欄位使用段落格式。 可以訪問這些檔案:
AEM透過段落格式選項在RTE中提供結構元素,為開發可存取的內容提供了良好的基礎。 內容作者無法使用RTE格式化字型大小或顏色或其他相關屬性,因而無法建立內嵌格式。 而必須選取適當的結構元素,例如標題,並使用從「樣式」選項中選擇的全域樣式。 這可確保清晰的標籤、更適合使用自己樣式表瀏覽的使用者以及正確結構化內容的選項。
在某些情況下,內容作者會發現有必要檢查並調整使用RTE建立的HTML原始碼。 例如,在RTE中建立的一部分內容可能需要額外的標籤,以確保符合WCAG 2.0。這可以通過RTE的源edit選項來完成。 您可以在misctools
plugin](/docs/experience-manager-65/administering/operations/rich-text-editor.html?lang=zh-Hant#aboutplugins)上指定[ sourceedit
功能。
小心使用sourceedit
功能。 輸入錯誤和/或不支援的功能會導致更多問題。
為了進一步擴充AEM的協助功能,可以以RTE為基礎(例如Text和Table元件)來擴充現有元件,並附加元素和屬性。
以下過程說明如何使用Caption元素擴展Table元件,該元素向輔助技術用戶提供有關資料表的資訊:
在TablePropertiesDialog
的建構函式中,新增用於編輯標題的其他文字輸入欄位。 請注意,itemId
必須設為caption
(亦即DOM屬性的名稱),才能自動處理其內容。
在Table中,將屬性顯式設定或從DOM元素中刪除。 值由config
對象中的對話框傳遞。 請注意,應使用相應的CQ.form.rte.Common
方法(com
是CQ.form.rte.Common
的捷徑)來設定/移除DOM屬性,以避免瀏覽器實作中常見的缺陷。
此過程僅適用於Classic用戶介面。
RTE可以使用strong
和em
標籤來取代b
和i
。 將以下節點作為同級添加到對話框中的uiSettings
和rtePlugins
節點。
<htmlRules jcr:primaryType="nt:unstructured">
<docType jcr:primaryType="nt:unstructured">
<typeConfig jcr:primaryType="nt:unstructured"
useSemanticMarkup="{Boolean}true">
<semanticMarkupMap
b="strong"
i="em"/>
</typeConfig>
</docType>
</htmlRules>
啟動CRXDE Lite。 例如:http://localhost:4502/crx/de/
複製:
/libs/cq/ui/widgets/source/widgets/form/rte/commands/Table.js
至:
/apps/cq/ui/widgets/source/widgets/form/rte/commands/Table.js
如果中間資料夾不存在,則可能需要建立中間資料夾。
複製:
/libs/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js
至:
/apps/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js
。
開啟下列檔案以進行編輯(按兩下以開啟):
/apps/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js
在constructor
方法中,行讀取前:
var dialogRef = this;
新增下列程式碼:
editItems.push({
"itemId": "caption",
"name": "caption",
"xtype": "textfield",
"fieldLabel": CQ.I18n.getMessage("Caption"),
"value": (this.table && this.table.caption ? this.table.caption.textContent : "")
});
開啟下列檔案:
/apps/cq/ui/widgets/source/widgets/form/rte/commands/Table.js
。
在transferConfigToTable
方法的結尾添加以下代碼:
/**
* Adds Caption Element
*/
var captionElement;
if (dom.firstChild && dom.firstChild.tagName.toLowerCase() == "caption")
{
captionElement = dom.firstChild;
}
if (config.caption)
{
var captionTextNode = document.createTextNode(config.caption)
if (captionElement)
{
dom.replaceNode(captionElement.firstChild,captionTextNode);
} else
{
captionElement = document.createElement("caption");
captionElement.appendChild(captionTextNode);
if (dom.childNodes.length>0)
{
dom.insertBefore(captionElement, dom.firstChild);
} else
{
dom.appendChild(captionElement);
}
}
} else if (captionElement)
{
dom.removeChild(captionElement);
}
使用全部保存……保存更改
純文字欄位並非標題元素值允許的唯一輸入類型。 您可以使用任何ExtJS介面工具集,透過其getValue()
方法提供標題的值。
若要新增編輯功能,以取得其他元素和屬性,請確定兩者:
itemId
屬性會設為適當DOM屬性的名稱(TablePropertiesDialog
)。Table
)。