Ricerca nel sito web

Come creare il tuo plugin per OnlyOffice Docs

Breve: in questo articolo imparerai come creare il tuo plugin per OnlyOffice Docs e come pubblicarlo nel mercato dei plugin ufficiale disponibile a partire dalla versione 7.2.

LYONOFFICE Docs non è una normale suite per ufficio nel senso tradizionale. Naturalmente, ti consente di fare ciò che potresti fare utilizzando altri pacchetti per ufficio: creare e modificare documenti, fogli di calcolo e presentazioni, condividerli e modificarli insieme online, creare moduli compilabili, sfogliare e convertire file PDF e così via.

Tuttavia, esiste un modo per rendere ONLYOFFICE ancora più potente. Si tratta di plugin di terze parti, ovvero strumenti software aggiuntivi che migliorano le capacità funzionali standard della suite. I plugin consentono ad esempio di collegare servizi di terzi o di aggiungere nuovi elementi all'interfaccia utente.

Come creare un plugin per OnlyOffice Docs

Prima di iniziare a creare il tuo plugin per ONLYOFFICE Docs, devi assicurarti di avere un account GitHub e conoscere i fondamenti su come lavorare con questa piattaforma. Questo è molto importante. Se sei nuovo su GitHub, puoi dare un'occhiata alla documentazione ufficiale di GitHub.

Il processo di creazione del plugin può essere suddiviso in sette passaggi che è necessario seguire attentamente:

  • Attività preliminari.
  • Codifica.
  • Regolazione dello stile del plugin.
  • Localizzazione (opzionale).
  • Preparazione.
  • Test.
  • Pubblicazione nel marketplace dei plugin.

Immergiamoci più a fondo nello sviluppo del plugin.

Passaggio 1. Effettua il fork del repository del marketplace dei plug-in

Prima di tutto, devi accedere al tuo account GitHub o crearne uno se non ne hai uno. Successivamente, devi creare un fork del repository del marketplace dei plugin di OnlyOffice che è disponibile al seguente indirizzo URL:

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

Di conseguenza, avrai un altro repository e il suo indirizzo URL sarà simile a questo:

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

Dopo aver effettuato con successo il fork del repository del marketplace dei plug-in, è necessario creare un sito GitHub Pages da questo repository a scopo di test. Se non sai come farlo, fai riferimento alla guida ufficiale di GitHub.

Ora che hai il tuo sito GitHub Pages, è il momento di clonare il fork sul tuo computer.

Infine, devi creare una cartella per il tuo futuro plugin in:

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

Questo è tutto. Hai appena completato tutte le attività preliminari richieste e puoi procedere con il passaggio successivo.

Passaggio 2. Scrivi il codice per il tuo plugin

Non devi essere estremamente bravo nella programmazione, ma hai sicuramente bisogno di alcune conoscenze di base sulla programmazione per creare il tuo plugin per ONLYOFFICE Docs.

In poche parole, un plugin ONLYOFFICE è una cartella con diversi file. Devi creare tre file affinché il tuo plugin funzioni correttamente:

  • config.json – Questo è un file di configurazione del plugin che contiene informazioni su tutti i dati importanti. In questo file ci sono alcuni parametri necessari per registrare il plugin negli editor di OnlyOfficece. Guarda questa pagina nella documentazione ufficiale dell'API per leggere la descrizione completa di ciascun parametro.
  • codice plugin (file .js): questo è il file plugin stesso che contiene il codice JavaScript del tuo plugin. Questo file descrive le operazioni eseguite dal plugin e come vengono eseguite. Leggi questa guida API per sapere come funziona.
  • index.html: questo è il punto di ingresso del tuo plug-in che collega i file config.json e plugin.js. Dai un'occhiata a questo esempio per capire come dovrebbe essere.

Oltre a questi file obbligatori, la cartella del plugin può contenere altri file. Ad esempio, icone, stili di plug-in, file leggimi, servizi di terze parti, ecc. Troverai ulteriori informazioni su tali file di seguito.

Per scrivere un buon codice funzionante per il tuo plugin, devi conoscere i metodi e gli eventi richiesti.

Passaggio 3. Modifica lo stile del tuo plugin

Scrivere il codice per il tuo plugin non è sufficiente. Devi anche modificarne lo stile in modo che appaia parte integrante degli editor di OnlyOffice. Per fare ciò basta aggiungere il foglio di stile OnlyOfficece al file index.html descritto sopra:

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

Puoi aggiungere pulsanti, controlli di input, controlli di etichette, caricatori e altri elementi.

Ad esempio, per aggiungere una casella combinata al tuo plugin, puoi utilizzare la funzione seleziona2:

<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 casella combinata inserita sarà simile alla seguente:

Maggiori informazioni sugli elementi di stile di OnlyOfficece possono essere trovate qui.

Passaggio 4. Localizza il tuo plugin (facoltativo)

Puoi saltare questo passaggio se intendi creare un plugin solo per utenti di lingua inglese. Tuttavia, se desideri che il tuo plugin sia disponibile in altre lingue, puoi creare la cartella delle traduzioni nella directory dei plugin e inserire i file .json per tutte le lingue che desideri utilizzare.

Leggi la documentazione ufficiale dell'API per scoprire come localizzare correttamente il tuo plugin.

Passaggio 5. Prepara il plugin per la pubblicazione nel Marketplace di OnlyOffice

Per perfezionare l'aspetto del tuo plugin prima che diventi disponibile nel marketplace di OnlyOFFICE, devi aggiungere una finestra Informazioni con una breve descrizione del tuo plugin, la sua versione, il nome dello sviluppatore, ecc.

Ad esempio, questa è la finestra Informazioni del plugin Editor di foto:

Per poter creare una finestra di questo tipo per il tuo plugin, segui queste istruzioni.

Inoltre, devi creare icone per il tuo plugin e inserirle nella cartella delle risorse. In generale, hai bisogno di 8 icone affinché il tuo plugin venga visualizzato correttamente nel marketplace dei plugin di OnlyOffice: 4 icone (125%, 150%, 175% e ridimensionamento del 200%) per i temi dell'interfaccia Chiaro e Scuro.

Inoltre, puoi creare un file leggimi e inserirlo nella cartella principale del plugin. Questo file può includere qualsiasi informazione che desideri che gli altri utenti conoscano: una descrizione delle funzionalità principali del tuo plug-in, istruzioni di installazione, problemi noti e bug, ecc.

Ora il tuo plugin è pronto e puoi testarlo correttamente prima di pubblicarlo sul marketplace.

Passaggio 6. Testa il tuo plugin per documenti OnlyOffice

Adesso è il momento di mettere tutti i file che hai già creato secondo le istruzioni sopra nella cartella del plugin. Quindi sposta la cartella del plug-in nel repository remoto e testa il plug-in in OnlyOFFICE Desktop Editors. A questo scopo è possibile eseguire l'app desktop in modalità debug.

Su Linux, puoi aprire il terminale con CTRL+ALT+T. Successivamente, inserisci il percorso di ONLYOFFICE Desktop Editors, aggiungi uno spazio e quindi specifica --ascdesktop-support-debug-info:

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

Testa il tuo plugin e le sue funzionalità.

Se tutto è a posto, puoi anche testare il tuo plugin nella versione web della suite OnlyOffice, OnlyOffice Docs. In altre parole, il tuo plugin può essere aggiunto come una nuova estensione.

Per creare l'estensione corrispondente, devi aprire il file onlyoffice.github.io/store/plugin-dev/extension/inject.js e specificare il percorso del tuo plugin sul sito GitHub Pages nel Variabile URL_TO_PLUGIN:

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

La cartella onlyoffice.github.io/store/plugin-dev/extension è l'estensione di cui hai bisogno. Caricalo semplicemente sul tuo browser web, esegui i tuoi documenti OnlyOFFICE e trova il tuo plugin nel Gestione plugin nella scheda Plugin sulla barra degli strumenti in alto. Ecco una guida dettagliata su come aggiungere un plugin a un browser web.

Se il tuo plugin funziona come previsto, puoi procedere con il passaggio finale.

Passaggio 7. Invia il plugin a OnlyOffice Marketplace

Congratulazioni! Hai completato il processo di creazione del plugin e ora puoi rendere il tuo plugin disponibile per altri utenti. A questo scopo, puoi creare una richiesta pull dal tuo fork a questo repository OnlyOFFICE all'indirizzo:

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

Se il tuo plugin funziona bene, gli sviluppatori di ONLYOFFICE approveranno la tua richiesta di pull e il tuo plugin apparirà nel mercato dei plugin di ONLYOFFICE. In questo caso, altri potranno installarlo dal marketplace con pochi clic.

Ci auguriamo che questo articolo ti sia utile. Non dimenticare di condividere ciò che pensi nei commenti qui sotto.