Überblick

Bei der Migration von der alten Benutzeroberfläche zur neuen AEM Guides-Benutzeroberfläche müssen Aktualisierungen an ui_config in flexiblere und modulare Benutzeroberflächenkonfigurationen konvertiert werden. Mit diesem Framework können Änderungen nahtlos in die editor_toolbar und andere Symbolleisten“werden. Der Prozess unterstützt auch das Ändern anderer Ansichten und Widgets in der Anwendung.

Bearbeiten von JSON für verschiedene Bildschirme

JSON-Dateien können zum Abschnitt Konfiguration der XML-Editor-Benutzeroberfläche für verschiedene Bildschirme und Widgets hinzugefügt werden. Nachfolgend finden Sie eine Liste häufig verwendeter Widgets und deren IDs:

Allgemeine Struktur der einzelnen JSON-Dateien

Jedes JSON folgt einer konsistenten Struktur:

Beispiel für JSON-Struktur:

{
  "id" : "editor_toolbar",
  "view": {
    "items": [
      {
        ...,
        "targetEditor": {
          "mode": [
            "preview"
          ],
          "editor": [
            "xml"
          ]
        },
        "target": {
          "key": "label",
          "value": "Table",
          "viewState": "prepend"
        },
        ...
      },
    ]
  }
}

Grundlegendes zu targetEditor

Nachstehend finden Sie eine Aufschlüsselung der einzelnen Eigenschaften, ihres Zwecks und der unterstützten Werte.

mode

Definiert den Betriebsmodus des Editors.

Unterstützte Werte: author, source, preview, layout (zuvor toc), split

displayMode (optional)

Steuert die Sichtbarkeit oder Interaktivität von Komponenten der Benutzeroberfläche. Der Standardwert ist auf show festgelegt, wenn er nicht angegeben ist.

Unterstützte Werte: show, hide, enabled, disabled

Zum Beispiel:

 {
        "icon": "textBulleted",
        "title": "Custom Insert Bulleted",
        "on-click": "$$AUTHOR_INSERT_REMOVE_BULLETED_LIST",
        "key": "$$AUTHOR_INSERT_REMOVE_BULLETED_LIST",
        "targetEditor": {
          "documentType": [
            "ditamap"
          ],
          "mode": [
            "author"
          ],
          "displayMode": "hide"
        }
      },

editor

Gibt den primären Dokumenttyp im Editor an.

Unterstützte Werte: ditamap, bookmap, subjectScheme, xml, css, translation, preset, pdf_preset

documentType

Gibt den primären Dokumenttyp an.

Unterstützte Werte: dita, ditamap, bookmap, subjectScheme, css, preset, ditaval, reports, baseline, translation, html, markdown, conditionPresets

Zusätzliche Werte können für bestimmte Anwendungsfälle unterstützt werden.

Zum Beispiel:

 {
        "icon": "textNumbered",
        "title": "Custom Numbered List",
        "on-click": "$$AUTHOR_INSERT_REMOVE_NUMBERED_LIST",
        "key": "$$AUTHOR_INSERT_REMOVE_NUMBERED_LIST",
        "targetEditor": {
          "documentType": [
            "dita",
            "ditamap"
          ],
          "mode": [
            "author",
            "source"
          ]

        }
      },

documentSubType

Klassifiziert das Dokument weiter nach documentType.

Zusätzliche Werte können für bestimmte Anwendungsfälle unterstützt werden.

Zum Beispiel:

 {
        "icon": "rename",
        "title": "Custom Rename",
        "on-click": "$$PUBLISH_PRESETS_RENAME",
        "label": "Custom Rename",
        "key": "$$PUBLISH_PRESETS_RENAME",
        "targetEditor": {
          "documentType": [
            "preset"
          ],
          "documentSubType": [
            "nativePDF",
            "aemsite",
            "json"
          ]

        }
      },

flag

Boolesche Indikatoren für den Dokumentstatus oder die Funktionen.

Unterstützte Werte: isOutputGenerated, isTemporaryFileDownloadable, isPDFDownloadable, isLocked, isUnlocked, isDocumentOpen

Darüber hinaus können Sie auch ein benutzerdefiniertes Flag in extensionMap erstellen, das in targetEditor als Flag verwendet wird. extensionMap ist hier eine globale Variable, mit der benutzerdefinierte Schlüssel oder beobachtbare Werte hinzugefügt werden.

Zum Beispiel:

 {
        "icon": "filePDF",
        "title": "Custom Export pdf",
        "on-click": "$$DOWNLOAD_TOPIC_PDF",
        "key": "$$DOWNLOAD_TOPIC_PDF",
        "targetEditor": {
          "documentType": [
            "markdown"
          ],
          "mode": [
            "preview"
          ],
          "flag": ["isPDFDownloadable"]

        }
      },

Beispiele

Im Folgenden finden Sie ein Beispiel dafür, wie Sie eine Schaltfläche in der Editor-Symbolleiste hinzufügen, löschen oder ersetzen.

Schaltfläche hinzufügen

Hinzufügen einer neuen Schaltfläche Benutzerdefinierte Tabelle einfügen in editor_toolbar zum Hinzufügen einer einfachen Tabelle, die nur im Vorschaumodus sichtbar ist.

{
  "id": "editor_toolbar",
  "view": {
    "items": [
      {
        "icon": "table",
        "title": "Insert Custom Table",
        "on-click": {
          "name": "$$AUTHOR_INSERT_ELEMENT",
          "args": [
            "simpletable",
            "table",
            "choicetable"
          ]
        },
        "key": "$$AUTHOR_INSERT_ELEMENT",
        "targetEditor": {
          "mode": [
            "preview"
          ],
        },
        "target": {
          "key": "label",
          "value": "Table",
          "viewState": "prepend"
        }
      }
    ]
  }
}

Löschen einer Schaltfläche

Löschen einer Schaltfläche aus der Symbolleiste. Hier entfernen wir die Schaltfläche Bild hinzufügen aus der Editor-Symbolleiste.

{
  "id": "editor_toolbar",
  "view": {
    "items": [
      {
        "hide": true,
        "target": {
          "key": "label",
          "value": "Image",
          "viewState": "replace"
        }
      }
    ]
  }
}

Ersetzen einer Schaltfläche

Ersetzen der Schaltfläche Multimedia in der Symbolleiste durch die Schaltfläche YouTube zum Einfügen von Links, die nur im Autorenmodus sichtbar ist.

{
  "id": "editor_toolbar",
  "view": {
    "items": [
      {
        "icon": "s2youtube",
        "title": "Youtube",
        "on-click": {
          "name": "$$AUTHOR_INSERT_ELEMENT",
          "args": "<object data='http://youtube.com'></object>"
        },
        "targetEditor": {
          "mode": [
            "author"
          ]
        },
        "target": {
          "key": "elementId",
          "value": "toolbar-multimedia",
          "viewState": "replace"
        }
      }
    ]
  }
}

Hinzufügen einer Schaltfläche im Vorschaumodus

Entsprechend dem Design wird die Sichtbarkeit der Schaltfläche für gesperrte und entsperrte (schreibgeschützte) Modi separat verwaltet, um ein klares und kontrolliertes Benutzererlebnis zu gewährleisten. Standardmäßig werden neu hinzugefügte Schaltflächen ausgeblendet, wenn sich die Benutzeroberfläche im schreibgeschützten Modus befindet.
Um eine Schaltfläche im schreibgeschützten) Modus anzuzeigen müssen Sie ein Ziel angeben, das sie in einem Symbolleistenunterabschnitt platziert, auf den auch dann zugegriffen werden kann, wenn die Benutzeroberfläche gesperrt ist.
Wenn Sie beispielsweise das Ziel als Als PDF herunterladen angeben, können Sie sicherstellen, dass die Schaltfläche im selben Abschnitt wie eine vorhandene sichtbare Schaltfläche angezeigt wird, um sie im entsperrten Modus verfügbar zu machen.

"target": {
  "key": "label",
  "value": "Download as PDF",
  "viewState": "prepend"
}

Hinzufügen einer Schaltfläche Als PDF exportieren im Vorschau-Modus, die sowohl im Sperrmodus als auch im Entsperrmodus angezeigt wird.

{
  "id": "editor_toolbar",
  "view": {
    "items": [
      {
        "icon": "filePDF",
        "title": "Export as PDF",
        "on-click": "$$DOWNLOAD_TOPIC_PDF",
        "key": "$$DOWNLOAD_TOPIC_PDF",
        "targetEditor": {
          "editor": [
            "ditamap",
            "xml"
          ],
          "mode": [
            "preview"
          ]
        },
        "target": {
          "key": "label",
          "value": "Download as PDF",
          "viewState": "prepend"
        }
      },
      {
        "icon": "filePDF",
        "title": "Export as PDF",
        "on-click": "$$DOWNLOAD_TOPIC_PDF",
        "key": "$$DOWNLOAD_TOPIC_PDF",
        "targetEditor": {
          "editor": [
            "ditamap",
            "xml"
          ],
          "mode": [
            "preview"
          ]
        }
      }
    ]
  }
}

Das folgende Snippet zeigt die Schaltfläche Als PDF exportieren mit dem Sperrszenario.

Die Schaltfläche Als PDF exportieren mit dem Entsperrszenario wird auch im folgenden Ausschnitt angezeigt.

Passen Sie die Optionen an, die im Dropdown-Menü der Editor-Symbolleiste angezeigt werden.

Sie können benutzerdefinierte Optionen im Dropdown-Menü „Menü“ mithilfe der folgenden Beispiele anhängen, ausblenden, ersetzen und hinzufügen.

anfügend

Anhängen einer Option im Dropdown-Menü. Hier hängen wir Benutzerdefinierte Menüschaltfläche in den Menüoptionen an

{
        "icon": "specialCharacter",
        "title": "Custom menu button",
        "on-click": "$$AUTHOR_INSERT_SYMBOL",
        "targetEditor": {
          "editor": [
            "ditamap"
          ],
          "mode": [
            "author"
          ]
        },
        "target": {
          "key": "label",
          "value": "Version label",
          "viewState": "append"
        }
      }

Ersetzen

Ersetzen einer in der Dropdown-Liste „Menü“ angezeigten Option. Hier ersetzen wir Prüfungsaufgabe erstellen durch Benutzerdefinierte Menüschaltfläche 3.

{
        "icon": "specialCharacter",
        "title": "Custom menu button 3",
        "on-click": "$$AUTHOR_INSERT_SYMBOL",
        "target": {
          "key": "label",
          "value": "Create review task",
          "viewState": "replace"
        }

      }

Verstecken

Ausblenden einer Option, die in der Dropdown-Liste Menü angezeigt wird. Hier wird die Option Suchen und Ersetzen aus dem Menü ausgeblendet.

{
        "hide": true,
        "target": {
          "key": "label",
          "value": "Find and replace",
          "viewState": "replace"
        }
      }

Hinzufügen benutzerdefinierter Optionen im Untermenü

Hinzufügen einer Option im Untermenü innerhalb des Dropdown-Menüs.

{
        "icon": "viewAllTags",
        "title": "Toggle Tags View Goziamasu",
        "key": "AUTHOR_TOGGLE_TAG_VIEW",
        "target": {
          "key": "label",
          "value": "Track changes",
          "viewState": "replace"
        },
        "targetEditor": {
          "documentType": [
            "dita"
          ],
          "mode": [
            "author"
          ]
        }

      }

Hochladen von benutzerdefinierten JSONs

Hochladen von benutzerdefiniertem CSS

Sie können auch CSS hinzufügen, um das Erscheinungsbild benutzerdefinierter hinzugefügter Schaltflächen oder bereits vorhandener Widgets oder Schaltflächen auf der Benutzeroberfläche anzupassen.

Fügen Sie für eine neu hinzugefügte benutzerdefinierte Schaltfläche eine ExtraClass zu einer benutzerdefinierten Schaltfläche oder Komponente innerhalb der JSON hinzu.
Bei einer alten Klasse können Sie auch ein -Element untersuchen und die vorhandenen Klassen ändern.

{
  "icon": "table",
  "title": "Insert Custom Table",
  "extraclass": "custom-css",
  "key": "$$AUTHOR_INSERT_ELEMENT",
  "targetEditor": {
    "mode": [
      "preview"
    ],
  },
  "target": {
    "key": "label",
    "value": "Table",
    "viewState": "prepend"
  }
}

Beispiel zum Anpassen von Schaltflächen-CSS

Hier fügen wir eine neue Schaltfläche Benutzerdefinierte Tabelle einfügen in editor_toolbar hinzu, um eine einfache Tabelle hinzuzufügen, die nur im Vorschaumodus sichtbar ist, und ein benutzerdefiniertes CSS darauf anzuwenden.
Dieses CSS ändert den Hintergrund der Schaltfläche und die Schriftgröße ihres Titels.

#editor_toolbar {
  .custom-css {
    background-color: burlywood;
    font-size: 2rem;
  }
}

{
  "id": "editor_toolbar",
  "view": {
    "items": [
      {
        "icon": "table",
        "title": "Insert Custom Table",
        "extraclass": "custom-css",
        ...
      }
    ]
  }
}

Schritte zum Konvertieren der Benutzeroberflächenkonfiguration in modulare JSON-Dateien