Personalizza barra degli strumenti id172FB00L0V6

Per scaricare il file di configurazione dell’interfaccia utente, accedi a Adobe Experience Manager come amministratore.

Fai clic sul collegamento Adobe Experience Manager in alto e scegli Strumenti.

Seleziona Guide dall'elenco degli strumenti e fai clic su Profili cartella.

Fai clic sul riquadro Profilo globale.

Seleziona la scheda Configurazione editor XML e fai clic sull'icona Modifica in alto

Fai clic sull'icona Scarica per scaricare il file ui_config.json sul sistema locale. Puoi quindi apportare modifiche al file e caricarlo allo stesso modo.

Nel file ui_config.json, aggiungere la definizione della nuova funzionalità nella sezione delle barre degli strumenti. Salva il file e caricalo.

In genere, è possibile creare un nuovo gruppo di pulsanti della barra degli strumenti e aggiungervi uno o più pulsanti. In alternativa, è possibile aggiungere un nuovo pulsante della barra degli strumenti all'interno di un gruppo di barre degli strumenti esistente. Per creare un nuovo gruppo di barre degli strumenti sono necessari i seguenti dettagli:

tipo: Specificare blockGroup come valore type. Questo valore indica che si sta creando un gruppo di blocchi contenente uno o più gruppi di barre degli strumenti.

extraclass: Nome della classe o delle classi separate da spazio.

elementi: Specificate la definizione di tutti i gruppi nella barra degli strumenti. Ogni gruppo può contenere una o più icone della barra degli strumenti. Per definire le icone all'interno di un gruppo di barre degli strumenti, è necessario definire nuovamente l'attributo type all'interno di items e impostarne il valore su buttonGroup. Specificare uno o più nomi di classe nella proprietà extraclass. Specificare il nome della funzionalità nella proprietà label. Il frammento seguente del file ui_config.json mostra la definizione per il blocco della barra degli strumenti principale, seguito dalla definizione buttonGroup:

"
"toolbar": {
"type": "blockGroup",
"extraclass":
"operazioni barra degli strumenti",
"elementi": [
{
"type": "buttonGroup",
"extraclass": "left-controls",
"label": "Left Controls",
"elementi": [
"

Nell'insieme items è necessario specificare la definizione di una o più icone della barra degli strumenti.

Per aggiungere un'icona a forma di barra degli strumenti, è necessario definire le seguenti proprietà:

tipo: Specificare button come valore type. Questo valore indica che si sta aggiungendo un pulsante della barra degli strumenti.

icona: Specificate il nome dell'icona Coral da utilizzare nella barra degli strumenti.

variante: Specificare quiet come valore variant.

titolo: Specifica la descrizione comando per l’icona.

al clic: Specificate il nome del comando definito per la feature nel file JavaScript. Se il comando richiede parametri di input, specificare il nome del comando come:

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

mostra o nascondi: Se si sta definendo la proprietà show, specificare le modalità di visualizzazione dell'icona. I valori possibili sono - @isAuthorMode, @isSourceMode, @isPreviewMode, true (visualizza in tutte le modalità) o false (nascondi in tutte le modalità).

Al posto di show, puoi anche definire la proprietà hide. I valori possibili sono gli stessi della proprietà show con l'unica differenza che l'icona non viene visualizzata per la modalità specificata.

L’esempio seguente mostra il numero di versione di AEM Guides quando l’utente fa clic sull’icona Mostra versione nella barra degli strumenti.

Aggiungi il codice seguente a un file JavaScript:

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

Aggiungi la funzionalità nel file ui_config.json come:

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

Crea una cartella clientlib e aggiungi il tuo JavaScript in questa cartella.

Aggiorna la proprietà Categories della cartella clientlib assegnandole il valore di apps.fmdita.xml_editor.page_overrides.

Salva il file ui_config.json e ricarica l'editor Web.

Per scaricare il file di configurazione dell’interfaccia utente, accedi a Adobe Experience Manager come amministratore.

Fai clic sul collegamento Adobe Experience Manager in alto e scegli Strumenti.

Selezionare Guide dall'elenco degli strumenti e fare clic su Profili cartella.

Fai clic sul riquadro Profilo globale.

Seleziona la scheda Configurazione editor XML e fai clic sull'icona Modifica in alto

Fai clic sull'icona Scarica per scaricare il file ui_config.json sul sistema locale. Puoi quindi apportare modifiche al file e caricarlo allo stesso modo.

Il file ui_config.json è suddiviso in tre sezioni:

1. barre degli strumenti: Questa sezione contiene la definizione di tutte le funzioni disponibili nella barra degli strumenti dell’editor, ad esempio Inserisci/Rimuovi elenco numerato, (file) Chiudi, Salva, Commenti e altro ancora.

2. collegamenti: Questa sezione contiene la definizione delle scelte rapide da tastiera assegnate a una particolare funzione nell’editor.

3. modelli: Questa sezione contiene la struttura predefinita degli elementi DITA che è possibile utilizzare nel documento. Per impostazione predefinita, la sezione modelli contiene le definizioni dei modelli per gli elementi paragrafo, tabella semplice, tabella e corpo. Puoi creare una definizione di modello per qualsiasi elemento aggiungendo una struttura XML valida per l’elemento desiderato. Ad esempio, se si desidera aggiungere un elemento p con ogni nuovo elemento li in un elenco, è possibile aggiungere il codice seguente alla fine della sezione dei modelli per ottenere questo risultato:

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

Dalla sezione delle barre degli strumenti, rimuovere la voce della caratteristica che non si desidera esporre agli utenti.

Salva il file ui_config.json e ricarica l'editor Web.