Website-Suche

So erstellen Sie Ihr eigenes Plugin für ONLYOFFICE Docs

Kurz: In diesem Artikel erfahren Sie, wie Sie Ihr eigenes Plugin für ONLYOFFICE Docs erstellen und wie Sie es auf dem offiziellen Plugin-Marktplatz veröffentlichen, der ab Version 7.2 verfügbar ist. :

ONLYOFFICE Docs ist keine gewöhnliche Office-Suite im herkömmlichen Sinne. Natürlich können Sie damit das tun, was Sie auch mit anderen Office-Paketen tun können – Dokumente, Tabellenkalkulationen und Präsentationen erstellen und bearbeiten, sie online teilen und gemeinsam bearbeiten, ausfüllbare Formulare erstellen, PDF-Dateien durchsuchen und konvertieren und so weiter.

Es gibt jedoch eine Möglichkeit, ONLYOFFICE noch leistungsfähiger zu machen. Gemeint sind hier Plugins von Drittanbietern, also zusätzliche Software-Tools, die die Standard-Funktionsfähigkeit der Suite erweitern. Plugins ermöglichen es beispielsweise, Dienste von Drittanbietern anzubinden oder neue Elemente der Benutzeroberfläche hinzuzufügen.

So erstellen Sie ein Plugin für ONLYOFFICE Docs

Bevor Sie mit der Erstellung Ihres eigenen Plugins für ONLYOFFICE Docs beginnen, müssen Sie sicherstellen, dass Sie über ein GitHub-Konto verfügen und die Grundlagen der Arbeit mit dieser Plattform kennen. Das ist sehr wichtig. Wenn Sie neu bei GitHub sind, können Sie einen Blick in die offizielle GitHub-Dokumentation werfen.

Der Prozess der Plugin-Erstellung kann in sieben Schritte unterteilt werden, die Sie sorgfältig befolgen müssen:

  • Vorbereitende Aktivitäten.
  • Codierung.
  • Anpassung des Plugin-Stils.
  • Lokalisierung (optional).
  • Präparat.
  • Testen.
  • Veröffentlichung auf dem Plugin-Marktplatz.

Lassen Sie uns tiefer in die Plugin-Entwicklung eintauchen.

Schritt 1. Forken des Plugin Marketplace-Repositorys

Zunächst müssen Sie sich bei Ihrem GitHub-Konto anmelden oder eines erstellen, falls Sie noch keines haben. Danach müssen Sie einen Fork des ONLYOFFICE-Plug-in-Marktplatz-Repositorys erstellen, das unter der folgenden URL-Adresse verfügbar ist:

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

Als Ergebnis verfügen Sie über ein weiteres Repository, dessen URL-Adresse in etwa wie folgt aussieht:

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

Nachdem Sie das Repository des Plug-In-Marktplatzes erfolgreich geforkt haben, ist es erforderlich, zu Testzwecken eine GitHub Pages-Website aus diesem Repository zu erstellen. Wenn Sie nicht wissen, wie es geht, lesen Sie bitte den offiziellen GitHub-Leitfaden.

Jetzt, da Sie Ihre eigene GitHub Pages-Website haben, ist es an der Zeit, den Fork auf Ihren Computer zu klonen.

Schließlich müssen Sie einen Ordner für Ihr zukünftiges Plugin erstellen unter:

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

Das wars. Sie haben soeben alle erforderlichen Vorarbeiten abgeschlossen und können mit dem nächsten Schritt fortfahren.

Schritt 2. Schreiben Sie den Code für Ihr Plugin

Sie müssen nicht extrem gut im Programmieren sein, aber Sie benötigen definitiv einige grundlegende Programmierkenntnisse, um Ihr eigenes Plugin für ONLYOFFICE Docs zu erstellen.

Kurz gesagt, ein ONLYOFFICE-Plugin ist ein Ordner mit mehreren Dateien. Sie müssen drei Dateien erstellen, damit Ihr Plugin ordnungsgemäß funktioniert:

  • config.json – Dies ist eine Plugin-Konfigurationsdatei, die Informationen zu allen wichtigen Daten enthält. In dieser Datei gibt es einige Parameter, die erforderlich sind, um das Plugin in den ONLYOFFICE-Editoren zu registrieren. Schauen Sie sich diese Seite in der offiziellen API-Dokumentation an, um die vollständige Beschreibung der einzelnen Parameter zu lesen.
  • Plugin-Code (.js Datei) – Dies ist die Plugin-Datei selbst, die den JavaScript-Code Ihres Plugins enthält. Diese Datei beschreibt die Operationen, die das Plugin ausführt, und wie sie ausgeführt werden. Lesen Sie diesen API-Leitfaden, um zu erfahren, wie es funktioniert.
  • index.html – Dies ist der Einstiegspunkt Ihres Plugins, das die config.json und plugin.js Dateien verbindet. Schauen Sie sich dieses Beispiel an, um zu verstehen, wie es aussehen sollte.

Abgesehen von diesen obligatorischen Dateien kann der Plugin-Ordner noch weitere Dateien enthalten. Zum Beispiel Symbole, Plugin-Stile, Readme-Dateien, Dienste von Drittanbietern usw. Weitere Informationen zu solchen Dateien finden Sie weiter unten.

Um einen gut funktionierenden Code für Ihr Plugin zu schreiben, müssen Sie die erforderlichen Methoden und Ereignisse kennen.

Schritt 3. Passen Sie den Stil Ihres Plugins an

Es reicht nicht aus, Code für Ihr Plugin zu schreiben. Sie müssen auch den Stil anpassen, damit er wie ein integraler Bestandteil der ONLYOFFICE-Editoren aussieht. Fügen Sie dazu einfach das ONLYOFFICE-Stylesheet zu der oben beschriebenen index.html Datei hinzu:

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

Sie können Schaltflächen, Eingabesteuerelemente, Beschriftungssteuerelemente, Ladeprogramme und andere Elemente hinzufügen.

Um beispielsweise ein Kombinationsfeld zu Ihrem Plugin hinzuzufügen, können Sie die Funktion select2 verwenden:

<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' 
});

Das eingefügte Kombinationsfeld sieht folgendermaßen aus:

Weitere Informationen zu den ONLYOFFICE-Stilelementen finden Sie hier.

Schritt 4. Lokalisieren Sie Ihr Plugin (optional)

Sie können diesen Schritt überspringen, wenn Sie ein Plugin nur für englischsprachige Benutzer erstellen möchten. Wenn Sie jedoch möchten, dass Ihr Plugin in anderen Sprachen verfügbar ist, können Sie den Übersetzungsordner im Plugin-Verzeichnis erstellen und die .json Dateien für alle Sprachen ablegen, die Sie verwenden möchten.

Lesen Sie die offizielle API-Dokumentation, um zu erfahren, wie Sie Ihr Plugin richtig lokalisieren können.

Schritt 5. Bereiten Sie das Plugin für die Veröffentlichung im ONLYOFFICE Marketplace vor

Um das Erscheinungsbild Ihres Plugins zu verbessern, bevor es auf dem ONLYOFFICE-Marktplatz verfügbar wird, müssen Sie ein Info-Fenster mit einer kurzen Beschreibung Ihres Plugins, seiner Version, dem Namen des Entwicklers usw. hinzufügen.

Dies ist zum Beispiel das Info-Fenster des Photo Editor-Plugins:

Um ein solches Fenster für Ihr Plugin erstellen zu können, folgen Sie diesen Anweisungen.

Außerdem müssen Sie Symbole für Ihr Plugin erstellen und diese in den Ressourcenordner legen. Im Allgemeinen benötigen Sie 8 Symbole, damit Ihr Plugin auf dem ONLYOFFICE-Plugin-Marktplatz korrekt angezeigt wird: 4 Symbole (125 %, 150 %, 175 % und 200 % Skalierung) für die Hell- und Dunkel-Oberflächenthemen.

Zusätzlich können Sie eine Readme-Datei erstellen und diese in den Haupt-Plugin-Ordner legen. Diese Datei kann alle Informationen enthalten, die Sie anderen Benutzern mitteilen möchten – eine Beschreibung der Hauptfunktionen Ihres Plugins, Installationsanweisungen, bekannte Probleme und Fehler usw.

Jetzt ist Ihr Plugin fertig und Sie können es ordnungsgemäß testen, bevor Sie es auf dem Marktplatz veröffentlichen.

Schritt 6. Testen Sie Ihr ONLYOFFICE Docs-Plugin

Jetzt ist es an der Zeit, alle Dateien, die Sie bereits gemäß den obigen Anweisungen erstellt haben, in den Plugin-Ordner zu legen. Verschieben Sie dann den Plugin-Ordner in das Remote-Repository und testen Sie das Plugin in den ONLYOFFICE Desktop Editoren. Zu diesem Zweck können Sie die Desktop-App im Debugging-Modus ausführen.

Unter Linux können Sie das Terminal mit STRG+ALT+T öffnen. Geben Sie danach den Pfad zu ONLYOFFICE Desktop Editors ein, fügen Sie ein Leerzeichen hinzu und geben Sie dann --ascdesktop-support-debug-info an:

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

Testen Sie Ihr Plugin und seine Funktionen.

Wenn alles in Ordnung ist, können Sie Ihr Plugin auch in der Webversion der ONLYOFFICE-Suite, ONLYOFFICE Docs, testen. Mit anderen Worten, Ihr Plugin kann als neue Erweiterung hinzugefügt werden.

Um die entsprechende Erweiterung zu erstellen, müssen Sie die onlyoffice.github.io/store/plugin-dev/extension/inject.js Datei öffnen und den Pfad zu Ihrem Plugin auf der GitHub Pages-Website in der Variablen URL_TO_PLUGIN angeben:

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

Der Ordner onlyoffice.github.io/store/plugin-dev/extension ist die Erweiterung, die Sie benötigen. Laden Sie es einfach in Ihren Webbrowser hoch, führen Sie Ihre ONLYOFFICE Docs aus und suchen Sie Ihr Plugin im Plugin-Manager auf der Registerkarte Plugins in der oberen Symbolleiste. Hier finden Sie eine detaillierte Anleitung, wie Sie ein Plugin zu einem Webbrowser hinzufügen.

Wenn Ihr Plugin wie vorgesehen funktioniert, können Sie mit dem letzten Schritt fortfahren.

Schritt 7. Übermitteln Sie das Plugin an den ONLYOFFICE Marketplace

Glückwunsch! Sie haben den Plugin-Erstellungsprozess durchlaufen und können Ihr Plugin nun für andere Benutzer verfügbar machen. Zu diesem Zweck können Sie einen Pull Request von Ihrem Fork zu diesem ONLYOFFICE-Repository erstellen unter:

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

Wenn Ihr Plugin gut funktioniert, werden die ONLYOFFICE-Entwickler Ihren Pull-Request genehmigen und Ihr Plugin wird auf dem ONLYOFFICE-Plugin-Marktplatz angezeigt. In diesem Fall können andere es mit wenigen Klicks vom Marktplatz installieren.

Wir hoffen, dass Sie diesen Artikel nützlich finden. Vergessen Sie nicht, Ihre Meinung in den Kommentaren unten mitzuteilen.

Verwandte Artikel: