I. Introduction▲
ONLYOFFICE Docs et Desktop Editors offrent un support pour les plugins permettant aux développeurs d'ajouter des fonctionnalités spécifiques aux éditeurs qui ne sont pas directement liées au format OOXML.
Le plugin est une page HTML qui est intégrée dans l'éditeur et utilise l'API pour travailler avec lui.
Dans cet article, nous verrons comment créer votre propre plugin pour les éditeurs en ligne ONLYOFFICE Docs.
II. À propos des plugins ONLYOFFICE Docs▲
Les plugins sont des applications intégrées qui apportent des fonctionnalités supplémentaires aux éditeurs de documents texte, de feuilles de calcul et de présentations. Voici quelques exemples de ce que vous pouvez faire avec les plugins dans ONLYOFFICE Docs :
- connecter des services tiers, comme Telegram, YouTube, Thesaurus, Zotero, etc ;
- ajouter des composants et des contrôles personnalisés dans l'interface utilisateur, comme Trackchanges, Trackchanges_off ;
- améliorer l'expérience utilisateur existante et les fonctionnalités des éditeurs : Autocomplétion, Recherche et remplacement, Déplacement du curseur, Commentaires étendus ;
- automatiser des tâches dans les documents avec des macros.
Des exemples de code sont disponibles sur GitHub.
III. Structure du plugin▲
Chaque plugin pour la version serveur est un dossier contenant des fichiers.
Le dossier du plugin doit contenir trois fichiers nécessaires au fonctionnement du plugin :
- index.html - une page HTML qui contient tout le code du plugin et relie les fichiers config.json et plugin.js (le fichier de base nécessaire pour travailler avec les plugins).
- config.json - fichier de configuration du plugin contenant les informations sur les données principales du plugin nécessaires à l'enregistrement du plugin dans les éditeurs.
- plugin code (.js file) - le fichier de code du plugin contenant le code JavaScript du plugin que vous souhaitez connecter aux éditeurs.
Le dossier du plugin peut également contenir d'autres fichiers tels que les icônes du plugin, les styles, les traductions, le readme, les services tiers, etc.
|
|
IV. Comment créer un plugin▲
IV-A. Préparation▲
- Pour créer un plugin et le publier sur ONLYOFFICE Plugin Marketplace, vous avez besoin d'un compte GitHub. Connectez-vous à un compte existant ou créez-en un nouveau.
- Faites un "Fork" du dépôt de la place de marché de plugins : https://github.com/ONLYOFFICE/onlyoffice.github.io.
- Vous obtenez un dépôt avec l'adresse suivante : https://github.com/YOUR-USERNAME/ONLYOFFICE/onlyoffice.github.io.
- Créez votre propre site GitHub Pages à partir de ce dépôt pour tester votre plugin dans la version web ultérieurement. Consultez la documentation officielle de GitHub pour savoir comment procéder.
- Clonez le fork sur votre PC.
- Ajoutez un dossier pour votre plugin à onlyoffice.github.io/sdkjs-plugins/content/.
|
|
IV-B. Codage▲
Développez un plugin. Suivez la structure du plugin décrite dessus. Le dossier du plugin doit contenir trois fichiers nécessaires au fonctionnement du plugin : config.json, index.html, pluginCode.js.
Utilisez les méthodes et les événements du plugin lors de l'écriture du code du plugin.
IV-C. Ajustement du style du plugin▲
Ajoutez la feuille de style ONLYOFFICE au fichier index.html pour adapter votre plugin au style de l'éditeur ONLYOFFICE :
<link rel="stylesheet" href="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.css">
|
|
IV-D. Localisation▲
Créez le dossier Translations dans le répertoire du plugin avec des fichiers .json pour chaque langue pour laquelle vous voulez ajouter une traduction. Suivez les instructions ici pour localiser et appliquer les traductions.
IV-E. Préparation du plugin pour la publication▲
Créez une fenêtre informative « À propos » pour votre plugin. Ajoutez une courte description et la version du plugin, le nom du développeur et un lien vers son site web.
|
|
Préparez les icônes pour le plugin et placez-les dans le dossier resources. Suivez les instructions ici pour spécifier les paramètres des icônes dans le fichier config.json.
Veuillez noter que vous devez préparer 8 icônes pour que le plugin s'affiche correctement sur la place de marché des plugins : 4 types de mise à l'échelle des icônes (125%, 150%, 175%, 200%) pour les thèmes clairs et sombres.
N'oubliez pas le fichier readme dans lequel vous pouvez ajouter une description détaillée du plugin, des instructions d'installation et d'utilisation, les problèmes connus, etc. Placez ce fichier dans le dossier principal du plugin.
IV-F. Essais▲
- Placez tous les fichiers préparés dans le dossier du plugin et poussez-le vers le dépôt distant. Voilà, c'est fait ! Vous pouvez maintenant le connecter aux versions desktop ou web des éditeurs ONLYOFFICE et le tester.
- Testez le plugin dans ONLYOFFICE Desktop Editors.
- Vous pouvez exécuter cette application en mode débogage avec l'option --ascdesktop-support-debug-info. Pour ce faire, suivez les instructions en fonction du système d'exploitation que vous utilisez.
- Testez le plugin dans la version web.
Pour créer une extension, ouvrez le fichier onlyoffice.github.io/store/plugin-dev/extension/inject.js et attribuez le chemin d'accès à votre plugin sur le site GitHub Pages à la variable URL_TO_PLUGIN :
var URL_TO_PLUGIN = "https://YOUR-USERNAME.github.io/onlyoffice.github.io/sdkjs-plugins/content/helloworld/"Le dossier onlyoffice.github.io/store/plugin-dev/extension est une nouvelle extension. Téléchargez-la dans le navigateur, exécutez votre ONLYOFFICE Document Server et trouvez le plugin dans le gestionnaire de plugins.
Pour déboguer les plugins ONLYOFFICE dans les éditeurs web, suivez les instructions ici.
Veuillez noter qu'il est important d'ouvrir votre plugin dans le gestionnaire de plugins et de vérifier comment il se présente dans l'onglet Modules complémentaires dans les thèmes clair et foncé. Améliorez l'affichage du plugin si nécessaire.
|
|
IV-G. Publication▲
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.
V. Ressources utiles▲
VI. Remerciements Developpez.com▲
Nous tenons à remercier Malick pour la mise au gabarit et TODO pour la relecture orthographique.