Personalizza barra degli strumenti id172FB00L0V6

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

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

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

4. Fai clic sul riquadro Profilo globale.

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

6. 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.

7. 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:

   code language-none
   " "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:

   code language-none
   "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:

   code language-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:

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

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

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

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

1. Accedi ad AEM e apri la modalità CRXDE Lite.

2. Passare al file di configurazione predefinito disponibile nella posizione seguente:

   /libs/fmdita/clientlibs/clientlibs/xmleditor/ui_config.json

3. Creare una copia del file di configurazione predefinito nella posizione seguente:

   /apps/fmdita/xmleditor/ui_config.json

4. Passare al file ui_config.json nel nodo apps e aprirlo per la modifica.

5. Nel file ui_config.json, aggiungere la definizione della nuova funzionalità nella sezione delle barre degli strumenti. 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:

   • type:​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: Specificare 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:

     code language-json
     "toolbar": { "type": "blockGroup", "extraclass": "toolbar operations", "items": [ { "type": "buttonGroup", "extraclass": "left-controls", "label": "Left Controls", "items": [

     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: Specificare il nome dell'icona Coral che si desidera utilizzare nella barra degli strumenti.

   • variante: Specificare quiet come valore variant.

   • titolo: Specificare la descrizione comando per l'icona.

   • al clic del mouse: Specificare il nome del comando definito per la funzionalità nel file JavaScript. Se il comando richiede parametri di input, specificare il nome del comando come:

     code language-javascript
     "on-click": {"name": "AUTHOR_INSERT_ELEMENT", "args": "simpletable"}

   • mostra o nascondi: Se stai definendo la proprietà show, specifica 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.

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

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

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

Esempi di codice JavaScript

Questa sezione fornisce due esempi di codice JavaScript utili per iniziare ad aggiungere funzionalità personalizzate. L’esempio seguente mostra il numero di versione di AEM Guides quando un utente fa clic sull’icona Mostra versione nella barra degli strumenti.

Aggiungi il codice seguente a un file JavaScript:

/**
* This file contains an example to show AEM Guides version
* number when a user clicks on the Show Version icon in the toolbar.
* Step 1. Create a clientlib folder and add save a file with your *JavaScript code into this folder. A code sample is shared below.
* Step 2: Update the categories property of the clientlib folder by *assigning it the value of
* "apps.fmdita.xml_editor.page_overrides".
* Step 3: Add the feature in the ui_config.json file as shown after the *sample code. Save the ui_config.json file and reload the Web Editor
 */

(function (window) {
  "use strict";

  window.addEventListener('DOMContentLoaded', function () {
    fmxml.ready(function () {
      fmxml.eventHandler.subscribe({
        key: 'user.alert',
        next: function next() {
          alert("AEM Guides version x.x");
        }
      });
    });
  });
})(window);

Aggiungi la funzione nel file ui_config.json come:

 {
      "type": "button",
      "icon": "alert",
      "title": "About AEM Guides",
      "variant": "quiet",

  "show": "true",
      "on-click": "user.alert"
  }

Nell'esempio seguente viene illustrato come modificare lo stato di un documento di un file attivo in "In-Review".

/**
* This file contains an example to set the document state of an active *open documen to "In-Review".
* Step 1. Create a clientlib folder and add save a file with your *JavaScript code into this folder. A code sample is shared below.
* Step 2: Update the categories property of the clientlib folder by *assigning it the value of
* "apps.fmdita.xml_editor.page_overrides".
* Step 3: Add the feature in the ui_config.json file as shown after the *sample code. Save the ui_config.json file and reload the Web Editor
 */

(function (window) {
  "use strict";

  //Wait for the page has been completely loaded

  window.addEventListener('DOMContentLoaded', function () {

    //Wait for the xml editor to start
    fmxml.ready(function () {

      //Subscribe to 'user.docstate.to.in-review' event
      fmxml.eventHandler.subscribe({
        key: 'user.docstate.to.in-review',
        next: function next() {
          var docstate = "In-Review"; // New docstate name
          var filePath = fmxml.curEditor.filePath;
// Get the file path of active open file
          if (filePath) {
            //Call API to change the doc state
            $.ajax({
              type: 'POST',
              url: '/bin/fmdita/states',
              data: {
                paths: filePath,
                operation: "setdocstates",
                docstate: docstate
              }
            }).fail(function (xhr, textStatus, errorThrown) {
              console.error("Cannot update docstate to " + docstate);
            }).success(function (data) {
              console.log('docstate updated to ' + docstate);
            });
          }
        }
      });
    });
  });
})(window);

Aggiungi la funzione nel file ui_config.json come:

 {
      "type": "button",
      "icon": "actions",
      "title": "Change document state to In-Review",
      "variant": "quiet",
      "show": "true",
      "on-click": "user.docstate.to.in-review"
    }

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

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

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

4. Fai clic sul riquadro Profilo globale.

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

6. 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:

   code language-css
   "li": "<li><p></p></li>"

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

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

1. Accedi ad AEM e apri la modalità CRXDE Lite.

2. Passa al file di configurazione predefinito disponibile nella posizione seguente:.

   /libs/fmdita/clientlibs/clientlibs/xmleditor/ui_config.json

3. Creare una copia del file di configurazione predefinito nella posizione seguente:

   /apps/fmdita/xmleditor/ui_config.json

4. Passare al file ui_config.json nel nodo apps e aprirlo per la modifica.
   Il file ui_config.json è suddiviso in tre sezioni:

• 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.

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

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

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

2. Salvare il file *ui\_config.json* e ricaricare l'editor Web.