Comment créer votre propre plugin pour ONLYOFFICE Docs

Bref : Dans cet article, vous apprendrez comment créer votre propre plugin pour ONLYOFFICE Docs et comment le publier sur le marché officiel des plugins qui est disponible à partir de la version 7.2. :

ONLYOFFICE Docs n’est pas une suite bureautique ordinaire au sens traditionnel du terme. Bien sûr, il vous permet de faire ce que vous pouvez faire avec d’autres progiciels bureautiques : créer et modifier des documents, des feuilles de calcul et des présentations, les partager et les co-éditer en ligne, créer des formulaires à remplir, parcourir et convertir des fichiers PDF, etc.

Cependant, il existe un moyen de rendre ONLYOFFICE encore plus puissant. Il s’agit ici de plugins tiers, c’est-à-dire d’outils logiciels supplémentaires qui améliorent les capacités fonctionnelles standard de la suite. Par exemple, les plugins permettent de connecter des services tiers ou d’ajouter de nouveaux éléments d’interface utilisateur.

Comment créer un plugin pour ONLYOFFICE Docs

Avant de commencer à créer votre propre plugin pour ONLYOFFICE Docs, vous devez vous assurer que vous avez un compte GitHub et que vous connaissez les principes fondamentaux de la façon de travailler avec cette plateforme. C’est très important. Si vous êtes nouveau sur GitHub, vous pouvez consulter la documentation officielle de GitHub.

Le processus de création d’un plugin peut être divisé en sept étapes que vous devez suivre attentivement :

Activités préliminaires.
Codage.
Ajustement du style du plugin.
Localisation (facultatif).
Préparation.
Test.
Publication sur la place de marché des plugins.

Plongeons plus profondément dans le développement du plugin.

Étape 1. Fork du dépôt Plugin Marketplace

Tout d’abord, vous devez vous connecter à votre compte GitHub ou en créer un si vous n’en avez pas. Après cela, vous devez créer un fork du dépôt de la place de marché de plugins ONLYOFFICE qui est disponible à l’adresse URL suivante :

https://github.com/ONLYOFFICE/onlyoffice.github.io.

Par conséquent, vous aurez un autre dépôt, et son adresse URL ressemblera à ceci :

https://github.com/YOUR-USERNAME/ONLYOFFICE/onlyoffice.github.io

Après avoir réussi à forker le dépôt de la place de marché de plugins, il est nécessaire de créer un site GitHub Pages à partir de ce référentiel à des fins de test. Si vous ne savez pas comment faire, veuillez vous référer au guide officiel de GitHub.

Maintenant que vous avez votre propre site GitHub Pages, il est temps de cloner le fork sur votre ordinateur.

Enfin, vous devez créer un dossier pour votre futur plugin à l’adresse suivante :

onlyoffice.github.io/sdkjs-plugins/content/.

Voilà. Vous venez de terminer toutes les activités préliminaires requises et vous pouvez passer à l’étape suivante.

Étape 2. Écrivez le code de votre plugin

Vous n’avez pas besoin d’être extrêmement doué en codage, mais vous avez certainement besoin de connaissances de base en codage pour créer votre propre plugin pour ONLYOFFICE Docs.

En un mot, un plugin ONLYOFFICE est un dossier avec plusieurs fichiers. Vous devez créer trois fichiers pour que votre plugin fonctionne correctement :

config.json – Il s’agit d’un fichier de configuration de plugin qui contient des informations sur toutes les données importantes. Dans ce fichier, certains paramètres sont nécessaires pour enregistrer le plugin dans les éditeurs ONLYOFFICE. Consultez cette page dans la documentation officielle de l’API pour lire la description complète de chaque paramètre.
code du plugin (fichier .js) – Il s’agit du fichier du plugin lui-même qui contient le code JavaScript de votre plugin. Ce fichier décrit les opérations effectuées par le plugin et la manière dont elles sont effectuées. Lisez ce guide de l’API pour savoir comment cela fonctionne.
index.html – Il s’agit du point d’entrée de votre plugin qui relie les fichiers config.json et plugin.js. Jetez un coup d’œil à cet exemple pour comprendre à quoi il devrait ressembler.

En dehors de ces fichiers obligatoires, le dossier du plugin peut contenir d’autres fichiers. Par exemple, les icônes, les styles de plugins, les fichiers readme, les services tiers, etc. Vous trouverez plus d’informations sur ces fichiers ci-dessous.

Pour écrire un bon code fonctionnel pour votre plugin, vous devez connaître les méthodes et les événements requis.

Étape 3. Ajustez le style de votre plugin

Écrire du code pour votre plugin n’est pas suffisant. Vous devez également ajuster son style pour qu’il ressemble à une partie intégrante des éditeurs ONLYOFFICE. Pour ce faire, il suffit d’ajouter la feuille de style ONLYOFFICE au fichier index.html décrit ci-dessus :

<link rel="stylesheet" href="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.css">

Vous pouvez ajouter des boutons, des commandes de saisie, des commandes d’étiquette, des chargeurs et d’autres éléments.

Par exemple, pour ajouter une liste déroulante à votre plugin, vous pouvez utiliser la fonction select2 :

<select id="select_example" class="" ></select> 
$('#select_example').select2({     
data : [{id:0, text:'Item 1'}, {id:1, text:'Item 2'}, {id:2, text:'Item 3'}],     
minimumResultsForSearch: Infinity,     
width : '120px' 
});

La liste déroulante insérée ressemblera à ceci :

Vous trouverez plus d’informations sur les éléments de style ONLYOFFICE ici.

Étape 4. Localisez votre plugin (facultatif)

Vous pouvez sauter cette étape si vous allez créer un plugin pour les utilisateurs anglophones uniquement. Cependant, si vous souhaitez que votre plugin soit disponible dans d’autres langues, vous pouvez créer le dossier translations dans le répertoire du plugin et mettre leurs fichiers .json pour toutes les langues que vous souhaitez utiliser.

Lisez la documentation officielle de l’API pour savoir ici comment localiser correctement votre plugin.

Étape 5. Préparer le plugin pour la publication sur ONLYOFFICE Marketplace

Pour peaufiner l’apparence de votre plugin avant qu’il ne soit disponible sur la place de marché ONLYOFFICE, vous devez ajouter une fenêtre À propos avec une courte description de votre plugin, sa version, le nom du développeur, etc.

Par exemple, il s’agit de la fenêtre À propos du plugin Photo Editor :

Pour pouvoir créer une telle fenêtre pour votre plugin, suivez ces instructions.

De plus, vous devez créer des icônes pour votre plugin et les mettre dans le dossier des ressources. En général, vous avez besoin de 8 icônes pour que votre plugin s’affiche correctement sur le marché des plugins ONLYOFFICE : 4 icônes (125 %, 150 %, 175 % et 200 % de mise à l’échelle) pour les thèmes d’interface Light et Dark.

De plus, vous pouvez créer un fichier readme et le placer dans le dossier principal du plugin. Ce fichier peut inclure toutes les informations que vous souhaitez que les autres utilisateurs connaissent - une description des principales fonctionnalités de votre plugin, des instructions d’installation, des problèmes connus et des bogues, etc.

Votre plugin est maintenant prêt et vous pouvez le tester correctement avant de le publier sur le marché.

Étape 6. Testez votre plugin ONLYOFFICE Docs

Il est maintenant temps de mettre tous les fichiers que vous avez déjà créés selon les instructions ci-dessus dans le dossier du plugin. Ensuite, poussez le dossier du plugin vers le référentiel distant et testez le plugin dans ONLYOFFICE Desktop Editors. À cette fin, vous pouvez exécuter l’application de bureau en mode de débogage.

Sous Linux, vous pouvez ouvrir le terminal avec CTRL+ALT+T. Après cela, entrez le chemin d’accès à ONLYOFFICE Desktop Editors, ajoutez un espace, puis spécifiez --ascdesktop-support-debug-info :

"/opt/onlyoffice/desktopeditors/DesktopEditors" --ascdesktop-support-debug-info

Testez votre plugin et ses fonctionnalités.

Si tout va bien, vous pouvez également tester votre plugin dans la version web de la suite ONLYOFFICE, ONLYOFFICE Docs. En d’autres termes, votre plugin peut être ajouté en tant que nouvelle extension.

Pour créer l’extension correspondante, vous devez ouvrir le fichier onlyoffice.github.io/store/plugin-dev/extension/inject.js et spécifier le chemin d’accès à votre plugin sur le site GitHub Pages dans la variable URL_TO_PLUGIN :

var URL_TO_PLUGIN = "https://YOUR-USERNAME.github.io/onlyoffice.github.io/sdkjs-plugins/content/your-plugin/"

Le dossier onlyoffice.github.io/store/plugin-dev/extension est l’extension dont vous avez besoin. Il suffit de le télécharger sur votre navigateur Web, d’exécuter votre ONLYOFFICE Docs et de trouver votre plugin dans le gestionnaire de plugins dans l’onglet Plugins de la barre d’outils supérieure. Voici un guide détaillé sur la façon d’ajouter un plugin à un navigateur Web.

Si votre plugin fonctionne comme prévu, vous pouvez passer à l’étape finale.

Étape 7. Soumettez le plugin à ONLYOFFICE Marketplace

Félicitations! Vous avez suivi le processus de création du plugin et vous pouvez maintenant le mettre à la disposition d’autres utilisateurs. À cette fin, vous pouvez créer une demande de tirage à partir de votre fork vers ce dépôt ONLYOFFICE à l’adresse suivante :

https://github.com/ONLYOFFICE/onlyoffice.github.io

Si votre plugin fonctionne bien, les développeurs d’ONLYOFFICE approuveront votre demande de tirage et votre plugin apparaîtra sur le marché des plugins ONLYOFFICE. Dans ce cas, d’autres pourront l’installer depuis la marketplace en quelques clics.

Nous espérons que cet article vous sera utile. N’oubliez pas de partager ce que vous en pensez dans les commentaires ci-dessous.