I. Introduction▲
Les développeurs d’ONLYOFFICE introduisent 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é ou dans le panneau latéral.
Dans les guides précédents, nous avons déjà couvert comment créer un plugin pour ONLYOFFICE Docs. Cette fois-ci, nous allons développer ce sujet et vous expliquer comment ajouter un nouveau plugin en tant qu’onglet ou positionner le panneau des plugins à gauche ou à droite de l’éditeur dans ONLYOFFICE Docs.
II. À propos de la fonctionnalité d’ajout du plugin en tant qu’un onglet▲
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.
|
|
III. Activation de la fonctionnalité▲
Pour activer l’ajout de votre plugin en tant qu’un onglet, vous devrez modifier deux fichiers :
config.json – Dans ce fichier, vous devrez vous abonner à l’événement onToolbarMenuClick en ajoutant le paramètre events à la configuration de votre plugin.
"events" : ["onToolbarMenuClick"]
code.js – Dans ce fichier, 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()]);
Consultez la structure du plugin dans ONLYOFFICE Docs dans le guide complet.
IV. Exemple de plugin en tant qu’onglet▲
Maintenant, il faut exmaminer 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.
IV-A. 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 :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
{
"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"]
} }
IV-B. Modification du fichier code.js▲
IV-B-1. 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.
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 :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
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.
IV-B-2. 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é :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
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 :
2.
3.
4.
5.
6.
7.
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 :
2.
3.
4.
5.
6.
7.
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); }); });
C'est ainsi que votre plugin peut désormais apparaître sous forme d'onglet.
V. Comment ajouter un plugin sur le panneau de droite▲
Une autre option de personnalisation intéressante vous permet de positionner le panneau des plugins à gauche ou à droite de l’éditeur.
Précédemment, le fichier config.json utilisait plusieurs paramètres pour gérer les fonctionnalités du plugin et déterminer son affichage dans l’éditeur, tels que : isInsideMode, isModal, isSystem, isVisual et menu.
system : un plugin au niveau du système qui est toujours actif et ne peut pas être désactivé.
background : un plugin d’arrière-plan qui fonctionne en continu une fois lancé. Son état (activé/désactivé) persiste entre les sessions.
window : un plugin qui fonctionne comme une fenêtre autonome lors de son lancement.
panel : un plugin qui s’ouvre dans le panneau de gauche.
panelRight : un plugin qui s’ouvre dans le panneau de droite.
unvisible : un plugin invisible au démarrage.
Examinons de plus près l’option panelRight, qui nous permet de positionner le panneau sur le côté droit de l’éditeur.
VI. Exemple de plugin en tant que panneau de droite▲
À titre d’exemple, nous utiliserons le plugin Zotero, qui permet de créer des bibliographies à l’aide du service Zotero. Après avoir installé le plugin avec succès, nous naviguons vers le dossier du plugin Zotero dans le répertoire sdkjs-plugins et nous modifions le fichier config.json. Nous prenons les paramètres dépréciés :
Et les remplaçons par :
"type": "panelRight",
Le fichier config.json modifié peut ressembler à ce qui suit :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
{
"name": "Zotero",
"nameLocale": {
"ru": "Zotero",
"fr": "Zotero",
"es": "Zotero",
"pt-BR": "Zotero",
"de": "Zotero"
}, "guid": "asc.{BFC5D5C6-89DE-4168-9565-ABD8D1E48711}",
"version": "1.0.3",
"minVersion": "7.3.3",
"variations": [
{ "description": "Create bibliographies in the required style using Zotero service.",
"descriptionLocale": {
"ru": "Оформляйте библиографические списки в нужном стиле с помощью Zotero.",
"fr": "Créez des bibliographies dans le style nécessaire avec Zotero.",
"es": "Cree bibliografías en el estilo requerido utilizando el servicio Zotero.",
"pt-BR": "Crie bibliografias no estilo desejado usando o serviço Zotero.",
"de": "Erstellen Sie Literaturverzeichnisse im gewünschten Stil mittels Zotero."
}, "url": "index.html",
"icons": [
"resources/light/icon.png",
"resources/light/icon@2x.png"
], "icons2": [
{ "style": "light",
"100%": {
"normal": "resources/light/icon.png"
}, "125%": {
"normal": "resources/light/icon@1.25x.png"
}, "150%": {
"normal": "resources/light/icon@1.5x.png"
}, "175%": {
"normal": "resources/light/icon@1.75x.png"
}, "200%": {
"normal": "resources/light/icon@2x.png"
} }, { "style": "dark",
"100%": {
"normal": "resources/dark/icon.png"
}, "125%": {
"normal": "resources/dark/icon@1.25x.png"
}, "150%": {
"normal": "resources/dark/icon@1.5x.png"
}, "175%": {
"normal": "resources/dark/icon@1.75x.png"
}, "200%": {
"normal": "resources/dark/icon@2x.png"
} } ], "isViewer": false,
"EditorsSupport": [
"word"
], "initDataType": "text",
"initData": "",
"type": "panelRight",
"isUpdateOleOnResize": false,
"initOnSelectionChanged": false,
"store": {
"background": {
"light": "#2D3037",
"dark": "#2D3037"
}, "screenshots": [
"resources/store/screenshots/screen_1.png",
"resources/store/screenshots/screen_2.png"
], "icons": {
"light": "resources/store/icons",
"dark": "resources/store/icons"
}, "categories": [
"specAbilities"
] } } ] }
Après avoir effectué toutes les modifications, votre plugin peut ressembler à ceci :
|
|
Remarque ! Pour positionner le panneau du plugin sur le côté gauche, modifiez l’option panelRight en panel.
Si vous voulez que votre plugin soit disponible pour d'autres utilisateurs dans ONLYOFFICE Plugin Marketplace, proposez-le pour publication en créant une demande d'extraction (pull request) de votre fork à https://github.com/ONLYOFFICE/onlyoffice.github.io. Si votre plugin fonctionne correctement, votre demande sera approuvée et le plugin apparaîtra sur la marketplace.
VII. Ressources utiles▲
VIII. Remerciements Developpez.com▲
Nous tenons à remercier Malick pour la mise au gabarit.