Personnaliser la barre d’outils id172FB00L0V6

1. Pour télécharger le fichier de configuration de l’interface utilisateur, connectez-vous à Adobe Experience Manager en tant qu’administrateur.

2. Cliquez sur le lien Adobe Experience Manager en haut et choisissez Outils.

3. Sélectionnez Guides dans la liste des outils, puis cliquez sur le Profils de dossier.

4. Cliquez sur la mosaïque Profil global.

5. Sélectionnez l’onglet Configuration de l’éditeur XML et cliquez sur l’icône Modifier en haut

6. Cliquez sur l’icône Télécharger pour télécharger le fichier ui_config.json sur votre système local. Vous pouvez ensuite apporter des modifications au fichier , puis le charger.

7. Dans le fichier ui_config.json, ajoutez la définition de la nouvelle fonctionnalité dans la section des barres d’outils. Enregistrez le fichier et chargez-le.

   En règle générale, vous pouvez créer un groupe de boutons de la barre d’outils et y ajouter un ou plusieurs boutons. Vous pouvez également ajouter un nouveau bouton de barre d’outils à un groupe de barres d’outils existant. Les informations suivantes sont requises pour créer un groupe de barre d’outils :

   type : Spécifiez blockGroup comme valeur type. Cette valeur indique que vous créez un groupe de blocs qui contiendrait un ou plusieurs groupes de barres d’outils.

   extraclass : Nom de la ou des classes séparées par un espace.

   items : Spécifiez la définition de tous les groupes dans la barre d’outils. Chaque groupe peut contenir une ou plusieurs icônes de barre d’outils. Pour définir des icônes dans un groupe de barres d’outils, vous devez définir à nouveau l’attribut type dans le items et définir sa valeur sur buttonGroup. Spécifiez un ou plusieurs noms de classe dans la propriété extraclass. Spécifiez le nom de la fonction dans la propriété label. L’extrait de code suivant du fichier ui_config.json affiche la définition du bloc de barre d’outils principal, suivie de la définition du buttonGroup :

   code language-none
   « « toolbar » : { « type »: « blockGroup », « extraclass »: « opérations de la barre d’outils », « items » : [ { « type »: « buttonGroup », « extraclass »: « left-controls », « label »: « Contrôles de gauche », « items » : [ «

   Dans la collection items, vous devez spécifier la définition d’une ou de plusieurs icônes de barre d’outils.

   Vous devez définir les propriétés suivantes pour ajouter une icône de barre d’outils :

   type : Spécifiez button comme valeur type. Cette valeur indique que vous ajoutez un bouton de barre d’outils.

   icon : Indiquez le nom de l’icône Coral que vous souhaitez utiliser dans la barre d’outils.

   variante : Spécifiez quiet comme valeur variant.

   title : Spécifiez l’info-bulle de l’icône.

   en cas de clic : Indiquez le nom de commande défini pour la fonction dans le fichier JavaScript. Si votre commande nécessite des paramètres d’entrée, indiquez le nom de la commande comme suit :

   code language-none
   « Javascript « on-click »: {« name »: « AUTHOR_INSERT_ELEMENT », « args »: « simpletable »} «

   afficher ou masquer : Si vous définissez la propriété show , spécifiez les modes dans lesquels l’icône s’affiche. Les valeurs possibles sont les suivantes : @isAuthorMode, @isSourceMode, @isPreviewMode, true (affichage dans tous les modes) ou false (masquage dans tous les modes).

   À la place de show, vous pouvez également définir la propriété hide . Les valeurs possibles sont identiques à celles de show propriété , à la différence que l’icône n’est pas affichée pour le mode spécifié.

   L’exemple ci-dessous montre le numéro de version d’AEM Guides lorsque l’utilisateur clique sur l’icône Afficher la version de la barre d’outils.

   Ajoutez le code suivant à un fichier JavaScript :

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

   Ajoutez la fonction dans le fichier ui_config.json en tant que :

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

8. Créez un dossier clientlib et ajoutez-y votre JavaScript.

9. Mettez à jour la propriété categories du dossier clientlib en lui affectant la valeur apps.fmdita.xml_editor.page_overrides.

10. Enregistrez le fichier ui_config.json et rechargez l’éditeur web.

1. Connectez-vous à AEM et ouvrez le mode CRXDE Lite .

2. Accédez au fichier de configuration par défaut disponible à l’emplacement suivant :

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

3. Créez une copie du fichier de configuration par défaut à l’emplacement suivant :

   /apps/fmdita/xmleditor/ui_config.json

4. Accédez au fichier ui_config.json et ouvrez-le dans le nœud apps pour le modifier.

5. Dans le fichier ui_config.json, ajoutez la définition de la nouvelle fonctionnalité dans la section des barres d’outils. En règle générale, vous pouvez créer un groupe de boutons de la barre d’outils et y ajouter un ou plusieurs boutons. Vous pouvez également ajouter un nouveau bouton de barre d’outils à un groupe de barres d’outils existant. Les informations suivantes sont requises pour créer un groupe de barre d’outils :

   • type:​Spécifiez blockGroup comme valeur type. Cette valeur indique que vous créez un groupe de blocs qui contiendrait un ou plusieurs groupes de barres d’outils.

   • extraclass: Nom de la ou des classes séparées par un espace.

   • items : spécifiez la définition de tous les groupes dans la barre d’outils. Chaque groupe peut contenir une ou plusieurs icônes de barre d’outils. Pour définir des icônes dans un groupe de barres d’outils, vous devez définir à nouveau l’attribut type dans le items et définir sa valeur sur buttonGroup. Spécifiez un ou plusieurs noms de classe dans la propriété extraclass. Spécifiez le nom de la fonction dans la propriété label. L’extrait de code suivant du fichier ui_config.json affiche la définition du bloc de barre d’outils principal, suivie de la définition du buttonGroup :

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

     Dans la collection items, vous devez spécifier la définition d’une ou de plusieurs icônes de barre d’outils.
     Vous devez définir les propriétés suivantes pour ajouter une icône de barre d’outils :

   • type : spécifiez button comme valeur type. Cette valeur indique que vous ajoutez un bouton de barre d’outils.

   • icon : spécifiez le nom de l’icône Coral que vous souhaitez utiliser dans la barre d’outils.

   • variante : spécifiez quiet comme valeur variant.

   • titre : spécifiez l’info-bulle de l’icône.

   • en cas de clic : spécifiez le nom de commande défini pour la fonction dans le fichier JavaScript. Si votre commande nécessite des paramètres d’entrée, indiquez le nom de la commande comme suit :

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

   • afficher ou masquer : si vous définissez la propriété show, indiquez les modes d’affichage de l’icône. Les valeurs possibles sont les suivantes : @isAuthorMode, @isSourceMode, @isPreviewMode, true (affichage dans tous les modes) ou false (masquage dans tous les modes).

   À la place de show, vous pouvez également définir la propriété hide . Les valeurs possibles sont identiques à celles de show propriété , à la différence que l’icône n’est pas affichée pour le mode spécifié.

6. Créez un dossier clientlib et ajoutez-y votre JavaScript.

7. Mettez à jour la propriété categories du dossier clientlib en lui affectant la valeur apps.fmdita.xml_editor.page_overrides.

8. Enregistrez le fichier ui_config.json et rechargez l’éditeur web.

exemples de code

Cette section fournit deux exemples de code JavaScript qui vous aideront à commencer à ajouter des fonctionnalités personnalisées. L’exemple ci-dessous montre le numéro de version d’AEM Guides lorsqu’un utilisateur clique sur l’icône Afficher la version de la barre d’outils.

Ajoutez le code suivant à un fichier 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);

Ajoutez la fonction dans le fichier ui_config.json en tant que :

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

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

L'exemple suivant montre comment modifier l'état d'un document d'un fichier actif en « En révision ».

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

Ajoutez la fonction dans le fichier ui_config.json en tant que :

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

1. Pour télécharger le fichier de configuration de l’interface utilisateur, connectez-vous à Adobe Experience Manager en tant qu’administrateur.

2. Cliquez sur le lien Adobe Experience Manager en haut et choisissez Outils.

3. Sélectionnez Guides dans la liste des outils, puis cliquez sur le Profils de dossier.

4. Cliquez sur la mosaïque Profil global.

5. Sélectionnez l’onglet Configuration de l’éditeur XML et cliquez sur l’icône Modifier en haut

6. Cliquez sur l’icône Télécharger pour télécharger le fichier ui_config.json sur votre système local. Vous pouvez ensuite apporter des modifications au fichier , puis le charger.

   Le fichier ui_config.json comporte trois sections :

   1. barres d’outils : Cette section contient la définition de toutes les fonctionnalités disponibles dans la barre d’outils de l’éditeur, telles que Insérer/Supprimer une liste numérotée, (fichier) Fermer, Enregistrer, Commentaires, etc.

   2. raccourcis : Cette section contient la définition des raccourcis clavier affectés à une fonctionnalité particulière de l’éditeur.

   3. modèles : Cette section contient la structure prédéfinie des éléments DITA que vous pouvez utiliser dans votre document. Par défaut, la section Modèles contient des définitions de modèle pour un paragraphe, un tableau simple, un tableau et des éléments de corps. Vous pouvez créer une définition de modèle pour n’importe quel élément en ajoutant une structure XML valide pour l’élément souhaité. Par exemple, si vous souhaitez ajouter un élément p avec chaque nouvel élément li dans une liste, vous pouvez ajouter le code suivant à la fin de la section modèles pour obtenir ce résultat :

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

7. Dans la section des barres d’outils, supprimez l’entrée de la fonction que vous ne souhaitez pas présenter à vos utilisateurs.

8. Enregistrez le fichier ui_config.json et rechargez l’éditeur web.

1. Connectez-vous à AEM et ouvrez le mode CRXDE Lite .

2. Accédez au fichier de configuration par défaut disponible à l’emplacement suivant :.

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

3. Créez une copie du fichier de configuration par défaut à l’emplacement suivant :

   /apps/fmdita/xmleditor/ui_config.json

4. Accédez au fichier ui_config.json et ouvrez-le dans le nœud apps pour le modifier.
   Le fichier ui_config.json comporte trois sections :

• toolbars: Cette section contient la définition de toutes les fonctionnalités disponibles dans la barre d’outils de l’éditeur, telles que Insérer/Supprimer une liste numérotée, (fichier) Fermer, Enregistrer, Commentaires, etc.

• raccourcis: Cette section contient la définition des raccourcis clavier affectés à une fonctionnalité particulière de l’éditeur.

• templates: Cette section contient la structure prédéfinie des éléments DITA que vous pouvez utiliser dans votre document. Par défaut, la section Modèles contient des définitions de modèle pour un paragraphe, un tableau simple, un tableau et des éléments de corps. Vous pouvez créer une définition de modèle pour n’importe quel élément en ajoutant une structure XML valide pour l’élément souhaité. Par exemple, si vous souhaitez ajouter un élément p avec chaque nouvel élément li dans une liste, vous pouvez ajouter le code suivant à la fin de la section modèles pour obtenir ce résultat :

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

1. Dans la section des barres d’outils, supprimez l’entrée de la fonction que vous ne souhaitez pas présenter à vos utilisateurs.

2. Enregistrez le fichier *ui\_config.json* et rechargez l'éditeur Web.