Hinzufügen benutzerdefinierter Stile zu Handbüchern im Web-Editor
In diesem Artikel erfahren Sie, wie Sie benutzerdefinierte Stile hinzufügen können, um das standardmäßige Erscheinungsbild des Web-Editors zu ändern.
Dies umfasst die folgenden Schritte:
- Hinzufügen der benutzerdefinierten Stile über die Konfiguration des XML-Editors für Ordnerprofile
- Auswählen des entsprechenden Ordnerprofils im Web-Editor und Testen der Änderungen
Beispielhafte Implementierung
Sehen wir uns dazu ein Beispiel an, in dem die Kurzbeschreibung und der Titel als separater Block mit einigen Stilaspekten im Editor angezeigt werden sollen.
Implementieren von
Hinzufügen des benutzerdefinierten CSS zum Ordnerprofil
Verwenden Sie die Ordnerprofile, um css_layout.css auf der Registerkarte „XML-Editor-Konfiguration“ zu überprüfen und das CSS mit benutzerdefinierten Stilen hinzuzufügen
Verwenden Sie Folgendes, um den oben genannten Stil in Ihrem Web-Editor einzurichten:
- Verwenden Sie css_layout.css und laden Sie es in den Profilordner Ihrer Wahl hoch
- Installieren Sie das angehängte Paket webeditor-styles-resources.zip mithilfe von AEM Package Manager, um die in der obigen CSS-Datei verwendeten Ressourcen zu installieren
This will install the resources at path "/content/dam/resources" which will include sub-folders "fonts" and "images"
Testen
- Web-Editor öffnen
- Wählen Sie in den Benutzereinstellungen den Profilordner aus, dem Sie die benutzerdefinierten Stile hinzugefügt haben. Wenn Sie es zum globalen Profil hinzugefügt haben, verwenden Sie es wahrscheinlich bereits.
- Wenn Sie ein Thema öffnen, werden Sie feststellen, dass der Bearbeitungsbereich eine benutzerdefinierte Benutzeroberfläche haben sollte
Please note this is compatible to AEM Guides version 4.2 and AEM Guides cloud version 2303 (March)
Verweise
Vielleicht interessieren Sie sich auch für die Expertensitzung zu WebEditor-Konfigurationen und -Anpassungen, die unter Expertensitzung auf WebEditor“ behandelt