DocumentaciónAEM GuidesDocumentación de AEM Guides

Personalizar la barra superior y la barra de herramientas

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Creado para:

  • Usuario
  • Administrador

Para personalizar topbar y toolbar, se usarán los identificadores: topbar o toolbar, y se seguirá la misma vista, estructura de controlador.

A continuación se muestra un ejemplo trivial de personalización de la barra de herramientas. En este caso, se ha eliminado el botón Insert Numbered List y se ha reemplazado el botón Insert Paragraph por nuestro propio componente mediante un controlador en el que se puede hacer clic personalizado.

const toolbarExtend = {
    id: "toolbar",
    view: {
        items: [
            {
                component: "div",
                target: {
                    key:"title",value: "Insert Numbered List",
                    viewState: VIEW_STATE.REPLACE
                }
            },
            {
                {
                    "component": "button",
                    "icon": "textParagraph",
                    "variant": "action",
                    "quiet": true,
                    "title": "Insert Paragraph",
                    "on-click": "INSERT_P"
                },

                target: {
                    key:"title",value: "Insert Paragraph",
                    viewState: VIEW_STATE.REPLACE
                }
            },
        ]
    },
    controller: {

        INSERT_P(){
            this.next("AUTHOR_INSERT_ELEMENT",  "p" )
        }
    }
}
recommendation-more-help
11125c99-e1a1-4369-b5d7-fb3098b9b178