AEM unterstützt beides:
Inhaltsautoren können Funktionen von RTE verwenden, um beim Hinzufügen von Inhalten zu einer Seite Informationen zur Barrierefreiheit bereitzustellen. Dies kann das Hinzufügen struktureller Informationen durch Überschriften und Absatzelemente umfassen.
Sie können diese Funktionen durch die Konfiguration von RTE-Plug-ins zur Komponente konfigurieren und anpassen. Beispielsweise können Sie mit dem Plugin paraformat
zusätzliche semantische Elemente auf Blockebene hinzufügen, einschließlich der Erweiterung der Anzahl der unterstützten Überschriftenebenen, die standardmäßig über die grundlegenden H1
-, H2
- und H3
-Elemente hinausgehen.
Die RTE ist in verschiedenen Komponenten der touchfähigen und der klassischen Benutzeroberfläche verfügbar. Die primäre Komponente zur Verwendung von RTE ist die Textkomponente.
Die Komponente Text in AEM ist sowohl für die touchfähige als auch für die klassische Benutzeroberfläche verfügbar. Auf den folgenden Bildern wird der Rich-Text-Editor mit einer Reihe von Plug-ins aktiviert, einschließlich paraformat
:
Die Komponente Text in der touchfähigen Benutzeroberfläche:
Die Textkomponente in der klassischen Benutzeroberfläche:
Es gibt Unterschiede zwischen den RTE-Funktionen der klassischen Benutzeroberfläche und der touchfähigen Benutzeroberfläche. Weitere Informationen finden Sie unter
Die vollständigen Anweisungen zum Konfigurieren des RTE sind auf der Seite Konfigurieren des Rich-Text-Editors verfügbar. Dies deckt alles ab, einschließlich der wichtigen Schritte:
Durch das Konfigurieren eines Plug-ins innerhalb des entsprechenden rtePlugins
-Unterzweigs in CRXDE Lite (siehe folgendes Bild) können Sie entweder alle oder spezifische Funktionen für das Plug-in aktivieren.
Es können wie folgt neue semantische Blockformate zur Auswahl bereitgestellt werden:
Legen Sie den Konfigurationsspeicherort abhängig von Ihrem RTE fest und navigieren Sie dorthin.
Aktivieren Sie das Absatzauswahlfeld durch die Aktivierung des Plug-ins.
Geben Sie die Formate an, die Sie im Absatzauswahlfeld zur Verfügung haben möchten.
Die Absatzformate sind dann für den Autor der Inhalte aus den Auswahlfeldern im RTE verfügbar. Auf sie kann wie folgt zugegriffen werden:
Mit Strukturelementen, die im RTE über die Absatzformatoptionen verfügbar sind, stellt AEM eine gute Grundlage für die Entwicklung barrierefreier Inhalte bereit. Inhaltsautoren können den RTE für die Formatierung der Schriftgröße, der Farben oder anderer verwandter Attribute verwenden und dadurch die Erstellung einer Inline-Formatierung verhindern. Stattdessen müssen sie entsprechende Strukturelemente wie Überschriften auswählen und über die Option „Arten“ ausgewählte globale Formatarten verwenden. Dies sorgt für ein sauberes Markup, mehr Optionen für Benutzer, die die Suche mit ihren eigenen Formatvorlagen durchführen, sowie korrekt strukturierte Inhalte.
In einigen Fällen halten Inhaltsautoren es für erforderlich, den mithilfe des RTE erstellten HTML-Quell-Code zu untersuchen und anzupassen. So kann beispielsweise ein innerhalb des RTE erstellter Inhalt ein zusätzliches Markup erfordern, um Compliance mit WCAG 2.0 sicherzustellen. Dies lässt sich mit der Option Quellenbearbeitung des RTE umsetzen. Sie können die Funktion sourceedit
im Plug-in misctools
angeben.
Gehen Sie beim Verwenden der Funktion sourceedit
sorgfältig vor. Tippfehler und/oder nicht unterstützte Funktionen können zusätzliche Probleme hervorrufen.
Um die Barrierefreiheitsfunktionen von AEM weiter auszubauen, ist es möglich, die vorhandenen Komponenten basierend auf dem RTE (wie die Komponenten Text und Tabelle) um zusätzliche Elemente und Attribute zu erweitern.
Das folgende Verfahren veranschaulicht, wie die Komponente Tabelle durch ein Caption-Element erweitert wird, das Benutzern der Hilfstechnologie Informationen über eine Datentabelle bereitstellt:
Fügen Sie im Konstruktor von TablePropertiesDialog
ein zusätzliches Texteingabefeld hinzu, dass für die Bearbeitung der Beschriftung verwendet wird. Beachten Sie, dass itemId
auf caption
(d. h. den Namen des DOM-Attributs) gesetzt werden muss, um den Inhalt automatisch zu verarbeiten.
Unter Tabelle müssen Sie das Attribut explizit zum/vom DOM-Element festlegen/entfernen. Der Wert wird vom Dialogfeld im config
-Objekt weitergegeben. Beachten Sie, dass DOM-Attribute mithilfe der entsprechenden CQ.form.rte.Common
-Methoden (com
ist kurz für CQ.form.rte.Common
) festgelegt/entfernt werden sollten, um die üblichen Fallstricke bei Browserimplementierungen zu vermeiden.
Dieses Verfahren eignet sich nur für die klassische Benutzeroberfläche.
Starten Sie CRXDE Lite. Zum Beispiel: http://localhost:4502/crx/de/
Kopieren:
/libs/cq/ui/widgets/source/widgets/form/rte/commands/Table.js
wie folgt umzuleiten:
/apps/cq/ui/widgets/source/widgets/form/rte/commands/Table.js
Sie müssen Zwischenordner erstellen, falls diese nicht bereits vorhanden sind.
Kopieren:
/libs/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js
wie folgt umzuleiten:
/apps/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js
.
Öffnen Sie die folgende Datei zur Bearbeitung (durch Doppelklicken öffnen):
/apps/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js
In der constructor
-Methode, vor dem Lesen der Zeilen:
var dialogRef = this;
Fügen Sie den folgenden Code hinzu:
editItems.push({
"itemId": "caption",
"name": "caption",
"xtype": "textfield",
"fieldLabel": CQ.I18n.getMessage("Caption"),
"value": (this.table && this.table.caption ? this.table.caption.textContent : "")
});
Öffnen Sie die folgende Datei:
/apps/cq/ui/widgets/source/widgets/form/rte/commands/Table.js
.
hinzufügen Sie den folgenden Code am Ende der transferConfigToTable
-Methode:
/**
* 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);
}
Speichern Sie Ihre Änderungen mithilfe von Alle speichern
Ein „Nur Text“-Feld ist die einzige zulässige Eingabeart für den Wert des „caption“-Elements. Es können alle ExtJS-Widgets verwendet werden, die den Wert der Beschriftung über ihre getValue()
-Methode bereitstellen.
Um Bearbeitungsfunktionen für weitere Elemente und Attribute hinzuzufügen, stellen Sie sicher, dass sowohl:
itemId
-Eigenschaft für jedes entsprechende Feld wird auf den Namen des entsprechenden DOM-Attributs (TablePropertiesDialog
) eingestellt.Table
).