Anpassa verktygsfältet id172FB00L0V6

1. Om du vill hämta UI-konfigurationsfilen loggar du in på Adobe Experience Manager som administratör.

2. Klicka på länken Adobe Experience Manager överst och välj Verktyg.

3. Välj Stödlinjer i listan över verktyg och klicka på Mappprofiler.

4. Klicka på rutan Global profil.

5. Välj fliken Konfiguration av XML-redigerare och klicka på ikonen Redigera överst

6. Klicka på ikonen Hämta för att hämta filen ui_config.json på din lokala dator. Du kan sedan göra ändringar i filen och sedan överföra samma fil.

7. I filen ui_config.json lägger du till definitionen för den nya funktionen i verktygsfältsavsnittet. Spara filen och överför den.

   Vanligtvis kan du skapa en ny verktygsfältsknappgrupp och lägga till en eller flera knappar i den. Du kan också lägga till en ny verktygsfältsknapp i en befintlig verktygsfältgrupp. Följande information krävs för att skapa en ny verktygsfältgrupp:

   typ: Ange blockGroup som type -värde. Detta värde anger att du skapar en blockgrupp som skulle innehålla en eller flera verktygsfältsgrupper.

   extraclass: Namnet på klassen eller klasserna avgränsade med blanksteg.

   objekt: Ange definitionen för alla grupper i verktygsfältet. Varje grupp kan innehålla en eller flera verktygsfältsikoner. Om du vill definiera ikoner i en verktygsfältsgrupp måste du definiera attributet type igen i items och ange dess värde som buttonGroup. Ange ett eller flera klassnamn i egenskapen extraclass. Ange funktionsnamnet i egenskapen label. I följande utdrag från filen ui_config.json visas definitionen för huvudverktygsfältets block, följt av definitionen buttonGroup:

   code language-none
   " "toolbar": "type": "blockGroup", "extraclass": "toolbar operations", "objekt": [

} {
"type": "buttonGroup",
"extraclass": "left-controls",
"label": "Left Controls",
"objekt": [
] "

I samlingen items måste du ange definitionen för en eller flera verktygsfältsikoner.

Du måste definiera följande egenskaper för att lägga till en verktygsfältsikon:

typ: Ange button som type -värde. Detta värde anger att du lägger till en verktygsfältsknapp.

ikon: Ange namnet på den korallikon som du vill använda i verktygsfältet.

variant: Ange quiet som variant -värde.

titel: Ange verktygstipset för ikonen.

on-click: Ange kommandonamnet som är definierat för funktionen i JavaScript-filen. Om kommandot kräver indataparametrar anger du kommandonamnet som:

   "JavaScript
   "on-click": {"name": "AUTHOR_INSERT_ELEMENT", "args": "simpletable"}
   "

visa eller dölj: Om du definierar egenskapen show anger du de lägen som ikonen ska visas i. Möjliga värden är - @isAuthorMode, @isSourceMode, @isPreviewMode, true (visa i alla lägen) eller false (dölj i alla lägen).

I stället för show kan du också definiera egenskapen hide. Möjliga värden är desamma som i egenskapen show med den enda skillnaden att ikonen inte visas för det angivna läget.

I följande exempel visas AEM Guides versionsnummer när användaren klickar på ikonen Visa version i verktygsfältet.

Lägg till följande kod i en JavaScript-fil:

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

Lägg till funktionen i filen ui_config.json som:

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

1. Skapa en clientlib-mapp och lägg till din JavaScript i den här mappen.

2. Uppdatera egenskapen categories i mappen clientlib genom att tilldela den värdet för apps.fmdita.xml_editor.page_overrides.

3. Spara filen ui_config.json och läs in webbredigeraren igen.

1. Logga in på AEM och öppna CRXDE Lite-läget.

2. Navigera till standardkonfigurationsfilen som finns på följande plats:

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

3. Skapa en kopia av standardkonfigurationsfilen på följande plats:

   /apps/fmdita/xmleditor/ui_config.json

4. Navigera till och öppna filen ui_config.json i noden apps för redigering.

5. I filen ui_config.json lägger du till definitionen för den nya funktionen i verktygsfältsavsnittet. Vanligtvis kan du skapa en ny verktygsfältsknappgrupp och lägga till en eller flera knappar i den. Du kan också lägga till en ny verktygsfältsknapp i en befintlig verktygsfältgrupp. Följande information krävs för att skapa en ny verktygsfältgrupp:

   • type:​Ange blockGroup som type-värde. Detta värde anger att du skapar en blockgrupp som skulle innehålla en eller flera verktygsfältsgrupper.

   • extraclass: Namnet på klassen eller klasserna avgränsade med blanksteg.

   • objekt: Ange definitionen för alla grupper i verktygsfältet. Varje grupp kan innehålla en eller flera verktygsfältsikoner. Om du vill definiera ikoner i en verktygsfältsgrupp måste du definiera attributet type igen i items och ange dess värde som buttonGroup. Ange ett eller flera klassnamn i egenskapen extraclass. Ange funktionsnamnet i egenskapen label. I följande utdrag från filen ui_config.json visas definitionen för huvudverktygsfältets block, följt av definitionen buttonGroup:

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

     I samlingen items måste du ange definitionen för en eller flera verktygsfältsikoner.
     Du måste definiera följande egenskaper för att lägga till en verktygsfältsikon:

   • type: Ange button som type-värde. Detta värde anger att du lägger till en verktygsfältsknapp.

   • ikon: Ange namnet på den korallikon som du vill använda i verktygsfältet.

   • variant: Ange quiet som variant-värde.

   • title: Ange verktygstipset för ikonen.

   • on-click: Ange kommandonamnet som definierats för funktionen i JavaScript-filen. Om kommandot kräver indataparametrar anger du kommandonamnet som:

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

   • visa eller dölj: Om du definierar egenskapen show anger du de lägen som ikonen ska visas i. Möjliga värden är - @isAuthorMode, @isSourceMode, @isPreviewMode, true (visa i alla lägen) eller false (dölj i alla lägen).

   I stället för show kan du också definiera egenskapen hide. Möjliga värden är desamma som i egenskapen show med den enda skillnaden att ikonen inte visas för det angivna läget.

6. Skapa en clientlib-mapp och lägg till din JavaScript i den här mappen.

7. Uppdatera egenskapen categories i mappen clientlib genom att tilldela den värdet för apps.fmdita.xml_editor.page_overrides.

8. Spara filen ui_config.json och läs in webbredigeraren igen.

JavaScript-kodexempel

I det här avsnittet finns två exempel på JavaScript-kod som hjälper dig att komma igång med att lägga till anpassade funktioner. I följande exempel visas AEM Guides versionsnummer när en användare klickar på ikonen Visa version i verktygsfältet.

Lägg till följande kod i en JavaScript-fil:

/**
* 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);

Lägg till funktionen i filen ui_config.json som:

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

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

I följande exempel visas hur du ändrar ett dokuments tillstånd för en aktiv fil till"Under granskning".

/**
* 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);

Lägg till funktionen i filen ui_config.json som:

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

1. Om du vill hämta UI-konfigurationsfilen loggar du in på Adobe Experience Manager som administratör.

2. Klicka på länken Adobe Experience Manager överst och välj Verktyg.

3. Välj Stödlinjer i listan över verktyg och klicka på Mappprofiler.

4. Klicka på rutan Global profil.

5. Välj fliken Konfiguration av XML-redigerare och klicka på ikonen Redigera överst

6. Klicka på ikonen Hämta för att hämta filen ui_config.json på din lokala dator. Du kan sedan göra ändringar i filen och sedan överföra samma fil.

   Filen ui_config.json har tre avsnitt:

   1. verktygsfält: Det här avsnittet innehåller en definition av alla funktioner som är tillgängliga i redigerarens verktygsfält, t.ex. Infoga/ta bort numrerad lista, Stäng, Spara, Kommentarer med mera.

   2. genvägar: I det här avsnittet finns en definition av kortkommandon för en viss funktion i redigeraren.

   3. mallar: Det här avsnittet innehåller den fördefinierade strukturen för DITA-element som du kan använda i ditt dokument. Som standard innehåller mallavsnittet malldefinitioner för ett stycke-, enkel tabell-, tabell- och body-element. Du kan skapa en malldefinition för vilket element som helst genom att lägga till en giltig XML-struktur för det önskade elementet. Om du till exempel vill lägga till ett p-element med alla nya li-element i en lista kan du lägga till följande kod i slutet av mallavsnittet för att uppnå detta:

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

7. I verktygsfältsavsnittet tar du bort den funktion som du inte vill visa för användarna.

8. Spara filen ui_config.json och läs in webbredigeraren igen.

1. Logga in på AEM och öppna CRXDE Lite-läget.

2. Navigera till standardkonfigurationsfilen på följande plats:

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

3. Skapa en kopia av standardkonfigurationsfilen på följande plats:

   /apps/fmdita/xmleditor/ui_config.json

4. Navigera till och öppna filen ui_config.json i noden apps för redigering.
   Filen ui_config.json har tre avsnitt:

• verktygsfält: Det här avsnittet innehåller en definition av alla funktioner som är tillgängliga i redigerarens verktygsfält, t.ex. Infoga/ta bort numrerad lista, Stäng, Spara, Kommentarer med mera.

• genvägar: I det här avsnittet finns en definition av kortkommandon för en viss funktion i redigeraren.

• mallar: Det här avsnittet innehåller den fördefinierade strukturen för DITA-element som du kan använda i ditt dokument. Som standard innehåller mallavsnittet malldefinitioner för ett stycke-, enkel tabell-, tabell- och body-element. Du kan skapa en malldefinition för vilket element som helst genom att lägga till en giltig XML-struktur för det önskade elementet. Om du till exempel vill lägga till ett p-element med alla nya li-element i en lista kan du lägga till följande kod i slutet av mallavsnittet för att uppnå detta:

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

1. I verktygsfältsavsnittet tar du bort den funktion som du inte vill visa för användarna.

2. Spara filen *ui\_config.json* och läs in webbredigeraren igen.