Ökning

När du migrerar från det gamla användargränssnittet till det nya användargränssnittet i AEM Guides måste uppdateringar av ui_config konverteras till mer flexibla och modulära användargränssnittskonfigurationer. Med det här ramverket kan du implementera ändringar sömlöst i editor_toolbar och andra verktygsfält. Processen har även stöd för att ändra andra vyer och widgetar i programmet.

Redigera JSON för olika skärmar

JSON-filer kan läggas till i konfigurationsavsnittet för XML-redigerarens användargränssnitt för olika skärmar och widgetar. Nedan finns en lista över widgetar som används ofta och deras ID

Allmän struktur för varje JSON

Varje JSON följer en konsekvent struktur:

Exempel på JSON-struktur:

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

Egenskaper för targetEditor

Nedan visas en beskrivning av varje egenskap, dess syfte och vilka värden som stöds.

mode

Definierar redigerarens driftläge.

Värden som stöds: author, source, preview, layout (tidigare toc), split

displayMode (valfritt)

Styr synlighet eller interaktivitet för UI-komponenter. Standardvärdet är show om det inte anges.

Värden som stöds: show, hide, enabled, disabled

Exempel:

 {
        "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

Anger den primära dokumenttypen i redigeraren.

Värden som stöds: ditamap, bookmap, subjectScheme, xml, css, translation, preset, pdf_preset

documentType

Anger den primära dokumenttypen.

Värden som stöds: dita, ditamap, bookmap, subjectScheme, css, preset, ditaval, reports, baseline, translation, html, markdown, conditionPresets

Ytterligare värden kan stödjas för specifika användningsfall.

Exempel:

 {
        "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

Klassificerar dokumentet ytterligare baserat på documentType.

Ytterligare värden kan stödjas för specifika användningsfall.

Exempel:

 {
        "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

Booleska indikatorer för dokumentstatus eller -funktioner.

Värden som stöds: isOutputGenerated, isTemporaryFileDownloadable, isPDFDownloadable, isLocked, isUnlocked, isDocumentOpen

Dessutom kan du skapa en anpassad flagga inuti extensionMap som används som flagga i targetEditor. Här är extensionMap en global variabel som används för att lägga till anpassade nycklar eller observerbara värden.

Exempel:

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

        }
      },

Exempel

Nedan visas ett exempel på hur du lägger till, tar bort eller ersätter en knapp i redigeringsverktygsfältet.

Lägga till en knapp

Lägger till en ny knapp, Infoga anpassad tabell i editor_toolbar, för att lägga till en enkel tabell som bara visas i förhandsgranskningsläget.

{
  "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"
        }
      }
    ]
  }
}

Ta bort en knapp

Ta bort en knapp från verktygsfältet. Här tar vi bort knappen Lägg till bild från redigeringsverktygsfältet.

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

Ersätta en knapp

Ersätter knappen Multimedia från verktygsfältet med infogningsknappen YouTube som bara är synlig i redigeringsläge.

{
  "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"
        }
      }
    ]
  }
}

Lägga till en knapp i förhandsgranskningsläge

I enlighet med designen hanteras knappens synlighet separat för låsta och olåsta (skrivskyddade) lägen för att upprätthålla en tydlig och kontrollerad användarupplevelse. Som standard döljs alla nytillagda knappar när gränssnittet är skrivskyddat.
Om du vill göra en knapp synlig i skrivskyddat-läge måste du ange ett mål som placerar den i ett underavsnitt i verktygsfältet som är tillgängligt även när gränssnittet är låst.
Om du till exempel anger målet som Hämta som PDF kan du se till att knappen visas i samma avsnitt som en befintlig synlig knapp och på så sätt göra den tillgänglig i olåst läge.

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

Lägger till knappen Exportera som PDF i läget Förhandsgranska som visas både i lås- och upplåsningsläge.

{
  "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"
          ]
        }
      }
    ]
  }
}

I följande utdrag visas knappen Exportera som PDF med ett låsscenario.

Knappen Exportera som PDF med upplåsningsscenariot visas i utdraget nedan.

Anpassa alternativen som visas i listrutan Meny i redigeringsverktygsfältet

Du kan lägga till, dölja, ersätta och lägga till anpassade alternativ i listrutan Meny med följande exempel.

Lägger till

Lägga till ett alternativ i listrutan Meny. Här lägger vi till Anpassad menyknapp i menyalternativen

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

Ersätter

Ersätta ett alternativ som visas i listrutan Meny. Här ersätter vi Skapa granskningsaktivitet med Anpassad menyknapp 3.

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

      }

Döljer

Dölja ett alternativ som visas i listrutan Meny. Här döljer vi alternativet Sök och ersätt på menyn.

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

Lägga till anpassade alternativ på undermenyn

Lägga till ett alternativ på undermenyn i listrutan Meny.

{
        "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"
          ]
        }

      }

Så här överför du anpassade JSON-konfigurationer

Så här överför du anpassad CSS

Du kan också lägga till CSS för att anpassa utseendet på anpassade knappar som lagts till eller befintliga widgetar eller knappar i användargränssnittet.

För en nytillagd anpassad knapp lägger du till en extraclass i en anpassad knapp eller komponent inuti JSON.
För en gammal klass kan du inspektera element och ändra befintliga klasser också.

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

Exempel på hur du anpassar knappar

Här lägger vi till den nya knappen Infoga anpassad tabell i editor_toolbar för att lägga till en enkel tabell som bara är synlig i förhandsgranskningsläge och använda en anpassad CSS på den.
Denna CSS ändrar bakgrunden för knappen och teckensnittsstorleken för titeln.

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

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

Steg för att konvertera UI-konfigurationen till modulär Json