Dokumentation AEM Guides Dokumentation om AEM Guides

Anpassa verktygsfältet id172FB00L0V6

Last update: Fri Jul 12 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Ämnen:
KONFIGURATION AV WEBBREDIGERARE

Skapat för:

Erfaren
Administratör

Som standard levereras webbredigeraren med de vanligaste redigeringsfunktionerna som krävs av alla DITA-redigerare. Du kan använda funktioner som att infoga element av typen lista (numrerad eller punktad), korsreferens, innehållsreferens, tabell-, stycke- och teckenformatering i redigeraren. Förutom dessa grundläggande element kan du anpassa Web Editor för att infoga element som används i redigeringsmiljön.

Det finns två sätt att anpassa Web Editors verktygsfält:

Lägga till en ny funktion i verktygsfältet
Ta bort alla befintliga funktioner från verktygsfältet

Lägga till en funktion i verktygsfältet

Om du lägger till en funktion i Web Editor innebär det två primära åtgärder - att lägga till en ikon för funktionen i filen ui_config.json och lägga till bakgrundsfunktionen i JavaScript.

Lägg till en ikon i verktygsfältet

Gör så här för att lägga till en funktion i Web Editor-verktygsfältet:

Logga in AEM och öppna läget CRXDE Lite.
Navigera till standardkonfigurationsfilen som finns på följande plats:

/libs/fmdita/clientlibs/clientlibs/xmleditor/ui_config.json
Skapa en kopia av standardkonfigurationsfilen på följande plats:

/apps/fmdita/xmleditor/ui_config.json
Navigera till och öppna filen ui_config.json i noden apps för redigering.

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.

Skapa en clientlib-mapp och lägg till din JavaScript i den här mappen.
Uppdatera egenskapen categories i mappen clientlib genom att tilldela den värdet för apps.fmdita.xml_editor.page_overrides.
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"
    }

Ta bort en funktion från verktygsfältet

Ibland kanske du inte vill ge alla funktioner som är tillgängliga i Web Editor, och då kan du ta bort den oönskade funktionen från Web Editor.

Så här tar du bort oönskade funktioner från verktygsfältet:

Logga in AEM och öppna läget CRXDE Lite.
Navigera till standardkonfigurationsfilen på följande plats:

/libs/fmdita/clientlibs/clientlibs/xmleditor/ui_config.json
Skapa en kopia av standardkonfigurationsfilen på följande plats:

/apps/fmdita/xmleditor/ui_config.json
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>"

I verktygsfältsavsnittet tar du bort den funktion som du inte vill visa för användarna.
Spara filen ui_config.json och läs in webbredigeraren igen.

Överordnat ämne: Anpassa Web Editor

recommendation-more-help

11125c99-e1a1-4369-b5d7-fb3098b9b178