Personalizar barra de herramientas id172FB00L0V6

Para descargar el archivo de configuración de la interfaz de usuario, inicie sesión en Adobe Experience Manager como administrador.

Haga clic en el vínculo Adobe Experience Manager en la parte superior y elija Herramientas.

Seleccione Guías de la lista de herramientas y haga clic en Perfiles de carpeta.

Haga clic en el mosaico Perfil global.

Seleccione la ficha Configuración del editor XML y haga clic en el icono Editar de la parte superior

Haga clic en el icono Descargar para descargar el archivo ui_config.json en su sistema local. A continuación, puede realizar cambios en el archivo y luego cargarlo.

En el archivo ui_config.json, agregue la definición de la nueva característica en la sección de barras de herramientas. Guarde el archivo y cárguelo.

Normalmente, puede crear un nuevo grupo de botones de barra de herramientas y agregarle uno o más botones de barra de herramientas. O bien, puede agregar un nuevo botón de barra de herramientas dentro de un grupo existente. Se requieren los siguientes detalles para crear un nuevo grupo de barras de herramientas:

tipo: Especifique blockGroup como el valor type. Este valor indica que está creando un grupo de bloques que contendría uno o más grupos de barras de herramientas.

extraclase: Nombre de la clase o clases separadas con espacio.

elementos: Especifique la definición de todos los grupos en la barra de herramientas. Cada grupo puede contener uno o varios iconos de la barra de herramientas. Para definir iconos dentro de un grupo de barras de herramientas, debe definir de nuevo el atributo type dentro de items y establecer su valor en buttonGroup. Especifique uno o varios nombres de clase en la propiedad extraclass. Especifique el nombre de la característica en la propiedad label. El siguiente fragmento del archivo ui_config.json muestra la definición del bloque de barra de herramientas principal, seguida de la definición buttonGroup:

"
"barra de herramientas": {
"type": "blockGroup",
"extraclass":
"operaciones de barra de herramientas",
"elementos": [
{
"type": "buttonGroup",
"extraclass": "left-controls",
"label": "Controles izquierdos",
"elementos": [
"

En la colección items, debe especificar la definición de uno o más iconos de la barra de herramientas.

Debe definir las siguientes propiedades para añadir un icono de la barra de herramientas:

tipo: Especifique button como el valor type. Este valor indica que está agregando un botón de barra de herramientas.

icono: Especifique el nombre del icono de Coral que desee utilizar en la barra de herramientas.

variante: Especifique quiet como el valor variant.

título: Especifique la información del objeto para el icono.

clic: Especifique el nombre del comando definido para la función en el archivo JavaScript. Si el comando requiere parámetros de entrada, especifique el nombre del comando como:

"Javascript
"al hacer clic": {"name": "AUTHOR_INSERT_ELEMENT", "args": "simpletable"}
"

mostrar u ocultar: Si está definiendo la propiedad show, especifique los modos en que se mostrará el icono. Los valores posibles son - @isAuthorMode, @isSourceMode, @isPreviewMode, true (mostrar en todos los modos) o false (ocultar en todos los modos).

En lugar de show, también puede definir la propiedad hide. Los valores posibles son los mismos que en la propiedad show con la única diferencia de que el icono no se muestra en el modo especificado.

El siguiente ejemplo muestra el número de versión de AEM Guides cuando el usuario hace clic en el icono Mostrar versión de la barra de herramientas.

Agregue el siguiente código a un archivo JavaScript:

$(document).ready(setTimeout(function() {
                        fmxml.commandHandler.subscribe({
                        key: 'user.alert',
                        next: function() {
                        alert("AEM Guides version x.x")
                        }
                        })
                        }, 1000))

Agregue la característica en el archivo ui_config.json como:

"type": "button",
"icon": "alert","variant": "quiet","title": "About AEM Guides","show": "true","on-click": "user.alert"

Cree una carpeta clientlib y agregue su JavaScript a esta carpeta.

Actualice la propiedad categories de la carpeta clientlib asignándole el valor de apps.fmdita.xml_editor.page_overrides.

Guarde el archivo ui_config.json y vuelva a cargar el Editor web.

Para descargar el archivo de configuración de la interfaz de usuario, inicie sesión en Adobe Experience Manager como administrador.

Haga clic en el vínculo Adobe Experience Manager en la parte superior y elija Herramientas.

Seleccione Guías de la lista de herramientas y haga clic en Perfiles de carpeta.

Haga clic en el mosaico Perfil global.

Seleccione la ficha Configuración del editor XML y haga clic en el icono Editar de la parte superior

Haga clic en el icono Descargar para descargar el archivo ui_config.json en su sistema local. A continuación, puede realizar cambios en el archivo y luego cargarlo.

El archivo ui_config.json tiene tres secciones:

1. barras de herramientas: Esta sección contiene la definición de todas las funciones disponibles en la barra de herramientas del editor, como Insertar/Quitar lista numerada, (archivo) Cerrar, Guardar, Comentarios y más.

2. métodos abreviados: Esta sección contiene la definición de los métodos abreviados de teclado asignados a una función concreta del editor.

3. plantillas: Esta sección contiene la estructura predefinida de los elementos DITA que puede utilizar en el documento. De forma predeterminada, la sección de plantillas contiene definiciones de plantilla para un párrafo, tabla simple, tabla y elementos de cuerpo. Puede crear una definición de plantilla para cualquier elemento añadiendo una estructura XML válida para el elemento deseado. Por ejemplo, si desea agregar un elemento p con cada nuevo elemento li en una lista, puede agregar el siguiente código al final de la sección de plantillas para lograrlo:

"li": "<li><p></p></li>"

En la sección de barras de herramientas, quite la entrada de la función que no desee exponer a los usuarios.

Guarde el archivo ui_config.json y vuelva a cargar el Editor web.