Información general

Al migrar de la IU antigua a la nueva IU de AEM Guides, las actualizaciones de ui_config deben convertirse a configuraciones de IU más flexibles y modulares. Este marco ayuda a adoptar cambios sin problemas en editor_toolbar y otras barras de herramientas. El proceso también admite la modificación de otras vistas y widgets de la aplicación.

Edición de JSON para diferentes pantallas

Los archivos JSON se pueden agregar a la sección Configuración de la interfaz de usuario del Editor XML para varias pantallas y widgets. A continuación se muestra una lista de los widgets más utilizados y sus ID:

Estructura general de cada JSON

Cada JSON sigue una estructura coherente:

Ejemplo de estructura JSON:

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

Explicación de las propiedades targetEditor

A continuación se muestra un desglose de cada propiedad, su propósito y los valores admitidos.

mode

Define el modo operativo del editor.

Valores compatibles: author, source, preview, layout (anteriormente toc), split

displayMode (opcional)

Controla la visibilidad o la interactividad de los componentes de la IU. Si no se especifica, el valor predeterminado se establece en show.

Valores compatibles: show, hide, enabled, disabled

Ejemplo:

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

Especifica el tipo de documento principal en el editor.

Valores compatibles: ditamap, bookmap, subjectScheme, xml, css, translation, preset, pdf_preset

documentType

Indica el tipo de documento principal.

Valores compatibles: dita, ditamap, bookmap, subjectScheme, css, preset, ditaval, reports, baseline, translation, html, markdown, conditionPresets

Pueden admitirse valores adicionales para casos de uso específicos.

Ejemplo:

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

Clasifica el documento en función de documentType.

Pueden admitirse valores adicionales para casos de uso específicos.

Ejemplo:

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

Indicadores booleanos para el estado o las capacidades del documento.

Valores compatibles: isOutputGenerated, isTemporaryFileDownloadable, isPDFDownloadable, isLocked, isUnlocked, isDocumentOpen

Además, también puede crear una marca personalizada dentro de extensionMap que se utiliza como marca en targetEditor. En este caso, extensionMap es una variable global que se usa para agregar claves personalizadas o valores observables.

Ejemplo:

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

        }
      },

Ejemplos

A continuación se muestra un ejemplo de cómo agregar, eliminar o reemplazar un botón en la barra de herramientas del editor.

Adición de un botón

Agregando un nuevo botón Insertar tabla personalizada en editor_toolbar para agregar una tabla simple que solo está visible en el modo de vista previa.

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

Eliminación de un botón

Eliminación de un botón de la barra de herramientas. Aquí eliminamos el botón Añadir imagen de la barra de herramientas del editor.

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

Reemplazar un botón

Se ha reemplazado el botón Multimedia de la barra de herramientas por el botón de inserción de vínculos Youtube, que solo está visible en el modo de creación.

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

Adición de un botón en el modo de vista previa

De acuerdo con el diseño, la visibilidad del botón se administra por separado para los modos bloqueado y desbloqueado (solo lectura) para mantener una experiencia de usuario clara y controlada. De forma predeterminada, cualquier botón recién agregado está oculto cuando la interfaz está en modo de solo lectura.
Para que un botón esté visible en modo solo lectura, debe especificar un destino que lo coloque en una subsección de la barra de herramientas a la que se pueda acceder incluso cuando la interfaz esté bloqueada.
Por ejemplo, si especifica el destino como Descargar como PDF, puede asegurarse de que el botón aparece en la misma sección que un botón visible existente, por lo que es accesible en modo desbloqueado.

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

Agregando un botón Exportar como PDF en el modo de vista previa que será visible tanto en el modo de bloqueo como de desbloqueo.

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

El siguiente fragmento muestra el botón Exportar como PDF con escenario de bloqueo.

Además, el botón Exportar como PDF con el escenario de desbloqueo se puede ver en el siguiente fragmento.

Personalice las opciones que aparecen en la lista desplegable Menú de la barra de herramientas del Editor

Puede anexar, ocultar, reemplazar y agregar opciones personalizadas en la lista desplegable Menú con los siguientes ejemplos.

Adjuntando

Se añade una opción en la lista desplegable Menú. Aquí adjuntamos botón de menú personalizado en las opciones de menú

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

Sustituyendo

Reemplazar una opción que aparece en la lista desplegable Menú. Aquí reemplazamos Crear tarea de revisión por botón de menú personalizado 3.

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

      }

Ocultación

Ocultar una opción que aparece en la lista desplegable Menú. Aquí estamos ocultando la opción Buscar y reemplazar del menú.

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

Adición de la opción personalizada en el submenú

Adición de una opción en el submenú dentro de la lista desplegable Menú.

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

      }

Cómo cargar archivos JSON personalizados

Cómo cargar CSS personalizado

También puede agregar css para personalizar el aspecto de los botones personalizados añadidos o de los widgets o botones ya existentes en la interfaz de usuario.

Para un botón personalizado recién agregado, agrega una extraclass al botón o componente personalizado dentro del JSON.
Para una clase antigua, también se puede inspeccionar element y modificar las clases existentes.

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

Ejemplo para personalizar el botón css

Aquí agregamos un nuevo botón Insertar tabla personalizada en editor_toolbar para agregar una tabla simple que solo está visible en el modo de vista previa y aplicar un css personalizado en ella.
Este css modifica el fondo del botón y el tamaño de fuente de su título.

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

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

Pasos para convertir la configuración de iu en Json modulares