AEM支援兩者:
內容作者可使用RTE的功能,在將內容新增至頁面時提供協助工具資訊。 這可以包括通過標題和段落元素添加結構資訊。
您可以透過為元件設定RTE外掛程式🔗來設定和自訂這些功能。 例如, paraformat
外掛程式可讓您新增其他區塊層級語意元素,包括將支援的標題層級數量擴展至預設提供的基本H1
、H2
和H3
以外。
RTE可在觸控式和傳統UI的多種元件中使用。 但是,使用RTE的主要元件是Text元件。
AEM中的Text元件適用於觸控式和傳統UI。 下列影像顯示已啟用一系列外掛程式的RTF編輯器,包括paraformat
:
觸控式UI中的Text元件:
傳統UI中的Text元件:
傳統UI和觸控式UI中可用的RTE功能之間有所差異。 如需更多詳細資訊,請參閱
設定RTF編輯器頁面提供設定RTE的完整指示。 涵蓋所有問題,包括關鍵步驟:
在CRXDE Lite中適當的rtePlugins
子分支內設定外掛程式(請參閱下圖),即可啟用該外掛程式的所有或特定功能。
新的語義塊格式可通過以下方式提供供選擇:
視您的RTE而定,決定並導覽至設定位置。
啟用「段落」選擇欄位;來 啟用外掛程式。
然後,內容作者可從RTE中的選取欄位使用段落格式。 可存取:
透過段落格式選項,在RTE中提供結構元素,AEM為開發無障礙內容提供了良好的基礎。 內容作者無法使用RTE來設定字型大小、顏色或其他相關屬性的格式,因而無法建立內嵌格式。 相反,它們必須選取適當的結構元素,例如標題,並使用從樣式選項中選擇的全域樣式。 這可確保標籤簡潔,為使用自己的樣式表和正確結構化內容瀏覽的用戶提供更多選項。
在某些情況下,內容作者會發現必須檢查並調整使用RTE建立的HTML原始碼。 例如,在RTE內建立的內容片段可能需要額外的標籤,以確保符合WCAG 2.0。這可以透過RTE的來源edit選項來完成。 您可以在misctools
外掛程式🔗上指定 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屬性,以避免瀏覽器實作的常見陷阱。
此程式僅適用於傳統UI。
開始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);
}
使用Save All保存更改
純文字欄位並非字幕元素值允許的唯一輸入類型。 任何透過getValue()
方法提供註解值的ExtJS介面工具集皆可使用。
若要新增其他元素和屬性的編輯功能,請確定兩者:
itemId
屬性設為適當DOM屬性(TablePropertiesDialog
)的名稱。Table
)。