Debagovanje ONLYOFFICE plugin-ova: praktičan vodič

Razvijanje i debagovanje ONLYOFFICE plugin-ova može biti izazovno, ali uz odgovarajuće alate i tehnike proces se može znatno olakšati. Ovaj vodič će vas provesti kroz korake potrebne za efikasno debagovanje plugin-ova u različitim okruženjima.

O ONLYOFFICE plugin-ovima

ONLYOFFICE vam omogućava da proširite funkcionalnost svojih editora putem plugin-a. Ovi plugin-ovi su HTML stranice koje su ugrađene u editor i koriste API za interakciju sa njim. Razumevanje strukture plugin-a i metoda debagovanja ključno je za uspešan razvoj.

Plugin struktura

Tipičan ONLYOFFICE plugin sastoji se od sledećih fajlova:

• config.json : Konfiguracioni fajl koji definiše osnovne informacije o plugin-u.
• index.html: Glavna HTML stranica plugin-a.
• scripts: Direktorijum koji sadrži JavaScript fajlove potrebne za funkcionalnost plugin-a.

Detaljna struktura i primeri dostupni su ovde.

Debagovanje plugin-ova u veb editorima

Da biste debagovali plugin-ove u veb verziji ONLYOFFICE editora, pratite ove korake:

• Dodajte debugger komandu u svoj skript.

(function (window, undefined) {
    window.Asc.plugin.init = function () {
        this.callCommand(function () {
            debugger;
            let oDocument = Api.GetDocument();
            let oParagraph = Api.CreateParagraph();
            oParagraph.AddText("Hello from the plugin!");
            oDocument.InsertContent([oParagraph]);
        }, true);
    };
})(window, undefined);

• Pritisnite F12 da otvorite konzolu u vašem pretraživaču.
• U ONLYOFFICE editoru idite na karticu Plugins i pokrenite svoj plugin.

Napomena: debugger komanda radi samo ako su developerski alati otvoreni; u suprotnom će biti ignorisana. Više o tome možete pročitati na ovoj stranici.

Debagovanje plugin-a u desktop editorima

Da biste debagovali plugin-e u desktop verziji ONLYOFFICE editora, koristite sledeći pristup:

• Pokrenite editor sa –ascdesktop-support-debug-info flagom.

• Ovaj flag omogućava prikaz dodatnih informacija korisnih za debagovanje.
• Slično kao u veb editorima, ubacite debugger; na željeno mesto u vašem kodu.

(function (window, undefined) {
    window.Asc.plugin.init = function () {
        this.callCommand(function () {
            debugger;
            let oDocument = Api.GetDocument();
            let oParagraph = Api.CreateParagraph();
            oParagraph.AddText("Hello from the plugin!");
            oDocument.InsertContent([oParagraph]);
        }, true);
    };
})(window, undefined);

• Pritisnite F1 da otvorite konzolu i pokrenete plugin.

Nakon pokretanja editora sa navedenim flagom, otvorite plugin i pratite izvršavanje koda.

Detaljna uputstva za različite operativne sisteme dostupna su ovde.

Upravljanje opsegovima

Prilikom razvijanja ONLYOFFICE plugin-a važno je razumeti kako se prosleđuju podaci između korisničkog interfejsa plugin-a (HTML stranica) i okruženja za izvršavanje editora, gde se pokreću Document Builder API komande. To su različiti konteksti ili opsezi.

Čest izvor grešaka je nepravilno rukovanje podacima između ovih opsega. ONLYOFFICE obezbeđuje Asc.scope objekat da olakša ovo. Možete prikačiti promenljive na Asc.scope u glavnom skriptu plugin-a, a one će biti dostupne unutar funkcije prosleđene this.callCommand().

Evo primera kako proslediti tekst promenljivu iz vašeg plugin editoru:

(function (window, undefined) {
    window.Asc.plugin.init = function () {
    // In your main script (e.g., scripts/plugin.js)
    let text = "Hello from the plugin!";
    Asc.scope.dataForEditor = text; // Export variable to the shared plugin scope
    // In the command executed in the editor's scope
    this.callCommand(function () {
         debugger;
         let oDocument = Api.GetDocument();
         let Paragraph = Api.CreateParagraph();
         oParagraph.AddText(Asc.scope.dataForEditor);// Access the variable via Asc.scope
         oDocument.InsertContent([oParagraph]);
    }, true);
  };
})(window, undefined);

Pravilno korišćenje Asc.scope obezbeđuje ispravno prosleđivanje podataka između različitih konteksta, što je ključno za izgradnju složenih plugin-ova.

Uobičajeni problemi i rešavanje

Tokom debagovanja možete naići na nekoliko uobičajenih problema. Evo najčešćih i njihovih rešenja:

Debugger ne radi

Izjava debugger; se ignoriše i izvršavanje se ne pauzira.

• Uverite se da su developerski alati pretraživača (F12) otvoreni pre pokretanja plugin-a.
• debugger; radi samo kada je DevTools aktivan.

Plugin se ne učitava ili nije vidljiv

• Proverite da je vaš config.json ispravno formatiran (validan JSON).
• Proverite da su svi potrebni parametri prisutni (name, guid, baseUrl).
• Proverite konzolu pretraživača zbog grešaka pri učitavanju.
  
• Uverite se da je plugin pravilno instaliran u ONLYOFFICE Plugins kartici.
  
• Ručno instaliranje pomoću zipovanog .plugin fajla ili Asc.editor.installDeveloperPlugin() metode.

Cors (cross-origin resource sharing) greške

• Instalirajte ONLYOFFICE Docs.
• Za veb editore u ONLYOFFICE Docs, pokrenite http-server unutar foldera vašeg plugin-a.
• Ili prilagodite putanju do vašeg config.json u installDeveloperPlugin().

Asc.editor.installDeveloperPlugin("https://<documentserver>:<port>/<folder-name>/config.json")

Promenjeni fajlovi, ali se stari kod i dalje izvršava – veb editori

• Ako ste izmenili lokalne fajlove plugin-a, potrebno je da osvežite stranicu i keš.
• Desni klik na dugme za osvežavanje u pretraživaču i izaberite “Empty Cache and Hard Reload”, zatim ponovo pokrenite plugin.

Efikasno debagovanje je ključno za razvoj stabilnih i funkcionalnih ONLYOFFICE plugin-a. Korišćenjem opisanih tehnika i alata, brzo možete identifikovati i rešiti probleme u vašem kodu, čime poboljšavate kvalitet i performanse plugin-a.

Dobrodošla su vaša pitanja, predlozi i ideje za plugin-e. Ako želite da podelite svoj rad sa nama, slobodno nas kontaktirajte. Otvoreni smo za saradnju i rado ćemo se povezati.