Overzicht

Wanneer het migreren van oude UI naar nieuwe AEM Guides UI, moeten de updates aan ui_config in flexibelere en modulaire configuraties UI worden omgezet. Dit kaderhulp keurt naadloos veranderingen in editor_toolbar en andere toolbarsgoed. Het proces ondersteunt ook het wijzigen van andere weergaven en widgets in de toepassing.

JSON bewerken voor verschillende schermen

JSON-bestanden kunnen voor verschillende schermen en widgets worden toegevoegd aan de sectie UI Configuration van de XML Editor. Hieronder volgt een lijst met veel gebruikte widgets en hun id's:

Algemene structuur van elke JSON

Elke JSON volgt een consistente structuur:

Voorbeeld JSON-structuur:

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

targetEditor -eigenschappen

Hieronder ziet u een uitsplitsing van elke eigenschap, het doel ervan en ondersteunde waarden.

mode

Bepaalt de operationele wijze van de redacteur.

Gesteunde waarden: author, source, preview, layout (eerder toc), split

displayMode (optional)

Bepaalt de zichtbaarheid of interactiviteit van UI-componenten. De standaardwaarde wordt ingesteld op show als deze niet wordt opgegeven.

Gesteunde waarden: show, hide, enabled, disabled

Voorbeeld:

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

Hiermee geeft u het primaire documenttype op in de editor.

gesteunde waarden: ditamap, bookmap, subjectScheme, xml, css, translation, preset, pdf_preset

documentType

Hiermee wordt het primaire documenttype aangegeven.

gesteunde waarden: dita, ditamap, bookmap, subjectScheme, css, preset, ditaval, reports, baseline, translation, html, markdown, conditionPresets

Aanvullende waarden kunnen worden ondersteund voor specifieke gebruiksgevallen.

Voorbeeld:

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

Hiermee wordt het document verder geclassificeerd op basis van documentType .

Aanvullende waarden kunnen worden ondersteund voor specifieke gebruiksgevallen.

Voorbeeld:

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

Booleaanse indicatoren voor documentstatus of -mogelijkheden.

Gesteunde waarden: isOutputGenerated, isTemporaryFileDownloadable, isPDFDownloadable, isLocked, isUnlocked, isDocumentOpen

Bovendien kunt u binnen extensionMap ook een aangepaste vlag maken die als vlag in targetEditor wordt gebruikt. Hier is extensionMap een algemene variabele die wordt gebruikt om aangepaste sleutels of waarneembare waarden toe te voegen.

Voorbeeld:

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

        }
      },

Voorbeelden

Hieronder ziet u hoe u een knop op de editor-werkbalk kunt toevoegen, verwijderen of vervangen.

Een knop toevoegen

Toevoegend een nieuwe knoop Eigen Lijst van het Tussenvoegsel in editor_toolbar om een eenvoudige lijst toe te voegen die slechts op voorproefwijze zichtbaar is.

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

Een knop verwijderen

Een knop uit de werkbalk verwijderen. Hier wordt de knop Afbeelding toevoegen van de editor verwijderd.

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

Een knop vervangen

Het vervangen van de Multimedia knoop van de toolbar met Youtube knoop van de verbindingstoevoeging die slechts op auteurswijze zichtbaar is.

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

Een knop toevoegen in de voorvertoningsmodus

Conform het ontwerp wordt de zichtbaarheid van de knop afzonderlijk beheerd voor vergrendelde en ontgrendelde (alleen-lezen) modi om een duidelijke en gecontroleerde gebruikerservaring te behouden. Door gebrek, wordt om het even welke onlangs toegevoegde knoop verborgen wanneer de interface op read-only wijze is.
Om een knoop op read-only wijze zichtbaar te maken, moet u een doel specificeren dat het binnen een toolbaronderafdeling plaatst die toegankelijk blijft zelfs wanneer de interface wordt gesloten.
Bijvoorbeeld, door het doel als Download te specificeren als PDF, kunt u de knoop in de zelfde sectie verzekeren verschijnt zoals een bestaande zichtbare knoop, daardoor makend het toegankelijk op ontgrendelde wijze.

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

Toevoegend de Uitvoer van een knoop als PDF op Voorproef wijze die zowel op slot als ontgrendelingswijze zichtbaar zal zijn.

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

Het volgende fragment toont de Uitvoer als PDF knoop met slotscenario.

Ook, kan de Uitvoer als PDF knoop met het ontgrendelingsscenario in het hieronder fragment worden gezien.

De opties aanpassen die worden weergegeven in het vervolgkeuzemenu van de Editor-werkbalk

U kunt in het vervolgkeuzemenu Menu aangepaste opties toevoegen, verbergen, vervangen en toevoegen met behulp van de volgende voorbeelden.

Toevoegen

Een optie toevoegen in de vervolgkeuzelijst Menu. Hier voegen wij het menuknoop van de Douane in de opties van het Menu toe

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

Vervangen

Een optie vervangen die wordt weergegeven in het vervolgkeuzemenu Menu. Hier vervangen wij overzichtstaak met het menuknoop van de Douane 3.

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

      }

Verbergen

Een optie verbergen die in het vervolgkeuzemenu Menu wordt weergegeven. Hier verbergen wij Vondst en vervangen optie van het Menu.

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

Aangepaste optie toevoegen in het submenu

Een optie toevoegen in het submenu in het vervolgkeuzemenu.

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

      }

Aangepaste JSON's uploaden

Aangepaste CSS uploaden

U kunt ook CSS toevoegen om de vormgeving van aangepaste toegevoegde knoppen of bestaande widgets of knoppen in de gebruikersinterface aan te passen.

Voor een onlangs toegevoegde douaneknoop voeg een extraclass aan douaneknoop of component binnen JSON toe.
Voor een oude klasse kunt u elementen inspecteren en de bestaande klassen ook wijzigen.

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

Voorbeeld om knop-css aan te passen

Hier voegen wij een nieuwe knoop Eigen Lijst van het Tussenvoegsel in editor_toolbar toe om een eenvoudige lijst toe te voegen die slechts op voorproefwijze zichtbaar is en douanecss op het toe te passen.
Met deze optie wijzigt u de achtergrond van de knop en de tekengrootte van de titel.

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

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

Stappen om ui config in modulaire Jsons om te zetten