Comment ajouter un nouveau plugin en tant qu’onglet dans ONLYOFFICE Docs

Avec la sortie de ONLYOFFICE Docs 8.1, nous avons introduit un large éventail de nouvelles fonctionnalités conçues pour améliorer la polyvalence et rationaliser l’expérience utilisateur. Parmi ces améliorations figure la possibilité d’afficher les plugins dans un onglet séparé. Dans cet article de blog, nous vous guiderons à travers les étapes pour tirer le meilleur parti de cette nouvelle fonctionnalité.

À quoi ça sert

Cette fonctionnalité vous permet de créer un onglet dédié dans la barre d’outils pour un plugin spécifique.

Cet onglet peut contenir des fonctionnalités supplémentaires pour votre plugin, le rendant facilement accessible.

Mise en œuvre

Pour activer cette fonctionnalité dans votre plugin, vous devrez modifier deux fichiers:

config.json – Dans le fichier config.json, vous devrez vous abonner à l’événement onToolbarMenuClick en ajoutant le paramètre events à la configuration de votre plugin.

  "events"              : ["onToolbarMenuClick"]

code.js – Dans le fichier code.js, vous devrez utiliser la méthode AddToolbarMenuItem, qui permet de créer un onglet séparé et d’afficher ses éléments.

this.executeMethod("AddToolbarMenuItem", [getToolbarItems()]);

Exemple de plugin en tant qu’onglet

Examinons ces changements de plus près. À des fins de démonstration, nous allons créer un nouveau plugin qui insère plusieurs objets dans un document texte, les options d’insertion étant gérées via le menu de la barre d’outils. L’exemple de plugin se trouve sur ce dépôt GitHub.

Modification du fichier config.json

Pour enregistrer les événements qui déclenchent la création d’un onglet supplémentaire, nous ajoutons onToolbarMenuClick au paramètre events.

Voici l’intégralité du fichier config.json:

{
    "name"       : "Plugin as tab",
    "guid"       : "asc.{0616AE85-5DBE-4B6B-A0A9-455C4F1503AD}",
    "baseUrl"    : "",
    "variations" : [
        {
            "description"         : "Example of displaying a plugin in a separate tab",
            "url"                 : "index.html",
            "icons"               : ["resources/img/icon.png", "resources/img/icon@2x.png"],
            "isViewer"            : false,
            "EditorsSupport"      : ["word"],
            "isVisual"            : false,
            "isModal"             : false,
            "isInsideMode"        : false,
            "initDataType"        : "none",
            "initData"            : "",
            "isUpdateOleOnResize" : true,
            "buttons"             : [],
            "events"              : ["onToolbarMenuClick"]
        }
    ],
    "store": {
                "background": {
                    "light": "radial-gradient(circle, #B5BCC3 0%, #737D87 100%)",
                    "dark": "radial-gradient(circle, #B5BCC3 0%, #737D87 100%)"
                },
                "icons": {
                    "light": "resources/store/icons",
                    "dark": "resources/store/icons"
                },
                "categories": ["specAbilities", "work"]
            }
}

Modification du fichier code.js

Initialisation du plugin et ajout d’éléments de la barre d’outils

Pour initialiser le plugin, nous utilisons la méthode window.Asc.plugin.init. Cette méthode est le point d’entrée du plugin et est appelée automatiquement lors du chargement du plugin.

 window.Asc.plugin.init = function () {
      this.executeMethod("AddToolbarMenuItem", [getToolbarItems()]);// the rest of the plugin code
  }

executeMethod(“AddToolbarMenuItem”): Cette méthode ajoute l’onglet personnalisé et ses éléments à la barre d’outils. Elle prend la configuration renvoyée par la fonction getToolbarItems:

  function getToolbarItems() {
        console.log()
        let items = {
          guid: window.Asc.plugin.info.guid,
          tabs: [{
            id: "tab_1",
            text: "Insert options",
            items: [
              {
                id: "insertText",
                type: "button",
                text: "Insert text",
                hint: "insert text into the document",
                icons: "resources/buttons/icon_txt.png", 
                lockInViewMode: true,
                enableToggle: false,
                separator: false
              },
              {
                id: "insertOleObject",
                type: "button",
                text: "Insert OLE Object",
                hint: "Insert an OLE object into the document",
                icons: "resources/buttons/icon_ole.png", 
                lockInViewMode: true,
                enableToggle: false,
                separator: false
              },
              {
                id: "insertImage",
                type: "button",
                text: "Insert image",
                hint: "Insert an image into the document",
                icons: "resources/buttons/icon_img.png", 
                lockInViewMode: true,
                enableToggle: false,
                separator: false
              }
            ]
          }]
        };
  
        return items;
      }
    };

Cette fonction renvoie l’objet de configuration qui définit l’onglet et ses boutons :

• guid: Identifiant unique du plugin.
• tabs: Tableau d’objets d’onglet, chacun contenant un ID, un label de texte et un tableau d’éléments.
• items: Tableau de configurations de boutons, où chaque bouton possède des propriétés telles que id, type, text, hint, icons, etc.

Gestion des événements de clic sur les éléments de la barre d’outils

Chaque bouton de la barre d’outils dans notre onglet personnalisé déclenche un événement lorsqu’il est cliqué. Nous devons gérer ces événements pour exécuter les actions correspondantes. Cela se fait à l’aide de la méthode attachToolbarMenuClickEvent.

Lorsque le bouton Insert text est cliqué, nous exécutons une commande pour insérer un nouveau paragraphe avec du texte formaté :

 this.attachToolbarMenuClickEvent("insertText", function (data) {
        this.callCommand(function () {
          var oDocument = Api.GetDocument();
  
          // Create a new paragraph
          var oParagraph = Api.CreateParagraph();
  
          // Add text to the paragraph
          oParagraph.AddText("ONLYOFFICE Docs 8.1");
  
          // Style the text as a title
          oParagraph.SetBold(true);              // Make the text bold
          oParagraph.SetFontSize(24);            // Increase the font size
          oParagraph.SetJc("center");         // Align text to the center
  
          // Insert the paragraph at the beginning of the document
          oDocument.InsertContent([oParagraph],0);
        });
      });

Pour le bouton Insert OLE Object, un objet OLE (par exemple, une vidéo YouTube) est inséré dans le document :

  this.attachToolbarMenuClickEvent("insertOleObject", function (data) {
        this.callCommand(function () {
          var oDocument = Api.GetDocument();
          var oOleObject = Api.CreateOleObject("data:image/jpeg;base64,<Base64ImageCode>", 130 * 36000, 90 * 36000, "https://www.youtube.com/watch?v=oYlRfQ2zhaQ", "asc.{38E022EA-AD92-45FC-B22B-49DF39746DB4}");
          var oParagraph = oDocument.GetElement(0);
          oParagraph.AddDrawing(oOleObject);
          oParagraph.SetJc("center");
        });
  
      });

Le bouton Insert image permet aux utilisateurs d’insérer une image :

this.attachToolbarMenuClickEvent("insertImage", function (data) {
        this.callCommand(function () {
  
          var oDocument = Api.GetDocument();
          var oParagraph = oDocument.GetElement(0);
          var oDrawing = Api.CreateImage("data:image/jpeg;base64,<Base64ImageCode>", 150 * 36000, 90 * 36000);
          oParagraph.SetJc("center");
          oParagraph.AddDrawing(oDrawing);
  
        });
      });

Voyons ce plugin en action !

Nous espérons que cet article vous sera utile pour intégrer cette fonctionnalité innovante dans vos plugins. Chez ONLYOFFICE, nous nous engageons à améliorer continuellement l’expérience utilisateur en introduisant de nouvelles fonctionnalités et améliorations.

Nous encourageons les développeurs à profiter de ces nouvelles capacités en créant des plugins innovants qui les exploitent. Nous sommes toujours ouverts à la collaboration et à la discussion, n’hésitez pas à partager vos plugins avec nous. Ensemble, nous pouvons continuer à faire d’ONLYOFFICE un outil encore plus puissant. Bonne chance dans vos explorations !