Πώς να αναπτύξετε ένα πρόσθετο DocSpace – Ολοκληρωμένος οδηγός βήμα προς βήμα

5 Φεβρουαρίου 2026Από τον Efstathios Iosifidis

Σε έναν κόσμο όπου η ταχύτητα και η συνεργασία είναι τα πάντα, τα εργαλεία παραγωγικότητας πρέπει να ακολουθούν. Τα πρόσθετα DocSpace προσφέρουν έναν μοντέρνο τρόπο για να βελτιώσετε τον τρόπο με τον οποίο οι χρήστες διαχειρίζονται και αλληλεπιδρούν με έγγραφα. Σε αυτόν τον οδηγό, θα σας καθοδηγήσουμε βήμα προς βήμα για να δημιουργήσετε το δικό σας πρόσθετο DocSpace χρησιμοποιώντας πραγματικά παραδείγματα από τα επίσημα δείγματα προσθέτων μας.

How to develop a DocSpace plugin – complete Step-by-Step Tutorial

Σχετικά με το ONLYOFFICE DocSpace Plugins SDK

Το ONLYOFFICE DocSpace Plugins SDK είναι ένα πακέτο npm βασισμένο σε μηχανές TypeScript που παρέχει διεπαφές που σας επιτρέπουν να δημιουργήσετε τα δικά σας πρόσθετα και να τα ενσωματώσετε στην πύλη DocSpace. Ο κύκλος ζωής ανάπτυξης προσθέτου περιλαμβάνει τον σχεδιασμό, την ανάπτυξη, τη δοκιμή και τη χρήση.

Για να δείξουμε πώς να χρησιμοποιήσετε το Plugins SDK μας, δημιουργήσαμε ένα αποθετήριο με τα δείγματα προσθέτων. Ας εμβαθύνουμε σε ολόκληρη τη διαδικασία ανάπτυξης προσθέτου βασισμένη στα δείγματα προσθέτων μας.

Σχεδιασμός

Καθορίστε τον σκοπό του προσθέτου, σκεφτείτε από πού θα το προσπελάσετε και ποιες υπηρεσίες τρίτων χρειάζεται να συνδεθείτε.

Βήμα 1. Εγκαταστήστε όλα τα απαραίτητα πακέτα και προγράμματα

ONLYOFFICE DocSpace εσωτερικής εγκατάστασης.
@onlyoffice/docspace-plugin-sdk πακέτο npm

Για να εγκαταστήσετε το πακέτο npm @onlyoffice/docspace-plugin-sdk καθολικά, χρησιμοποιήστε την ακόλουθη εντολή:

 npm i -g @onlyoffice/docspace-plugin-sdk

Βήμα 2. Σχεδιάστε τον τρόπο λειτουργίας του προσθέτου σας

Επιλέξτε την υπηρεσία που σας επιτρέπει να προσθέσετε την απαραίτητη λειτουργικότητα στο DocSpace σας.

Για παράδειγμα, στα δείγματα προσθέτων μας, χρησιμοποιούμε:

AssemblyAI για να μετατρέψουμε την ομιλία από αρχεία ήχου και βίντεο σε κείμενο.
ConvertAPI για να μετατρέψουμε έγγραφα, υπολογιστικά φύλλα, παρουσιάσεις και φόρμες σε PDF.
Draw.io για να δημιουργήσουμε, επεξεργαστούμε και εισάγουμε επαγγελματικά διαγράμματα.

Σημείωση! Βεβαιωθείτε ότι η τεκμηρίωση της υπηρεσίας είναι διαθέσιμη, ελέγξτε την άδεια χρήσης της, τη διαθεσιμότητα μεθόδων API κ.λπ. Για ορισμένες υπηρεσίες, ο χρήστης πρέπει να αποκτήσει ένα κλειδί API για να αρχίσει να χρησιμοποιεί το πρόσθετο.

Σκεφτείτε πού να υλοποιήσετε το πρόσθετο, ποια θα είναι η δομή του προσθέτου, πώς ο χρήστης θα αλληλεπιδρά με τα στοιχεία του προσθέτου κ.λπ. Κάντε μια λίστα με τους απαιτούμενους τύπους προσθέτων και αντικείμενα ανάλογα με αυτές τις πληροφορίες. Για περισσότερες πληροφορίες, διαβάστε τις ενότητες Τύποι προσθέτων και Αντικείμενα προσθέτων της τεκμηρίωσης του Plugins SDK.

Για παράδειγμα, για το πρόσθετο μετατροπής ομιλίας σε κείμενο, χρησιμοποιούμε τις ακόλουθες διεπαφές προσθέτων:

IPlugin. Απαιτείται για κάθε πρόσθετο. Περιέχει τη μεταβλητή PluginStatus, που χρησιμοποιείται για την ενσωμάτωση του προσθέτου στο DocSpace.
ApiPlugin. Απαιτείται καθώς υλοποιούμε μια υπηρεσία τρίτων.
ISettingsPlugin και ISettings. Χρησιμοποιούνται για να προσθέσουμε ένα μπλοκ ρυθμίσεων για τη διαμόρφωση του προσθέτου. Οι χρήστες θα έχουν πρόσβαση σε αυτό το μπλοκ από τις Ρυθμίσεις -> Ενσωμάτωση -> Πρόσθετα για να προσαρμόσουν τις παραμέτρους του προσθέτου.
IContextMenuPlugin και IContextMenuItem. Χρησιμοποιούνται για την υλοποίηση μιας ενέργειας μενού περιβάλλοντος. Στο πρόσθετο μετατροπής ομιλίας σε κείμενο, θα είναι διαθέσιμο για αρχεία βίντεο και ήχου, επιτρέποντας στους χρήστες να μετατρέψουν το περιεχόμενο σε κείμενο.

Η λίστα των διεπαφών μπορεί να είναι μεγαλύτερη. Για παράδειγμα, στο πρόσθετο draw\.io:

IMainButtonPlugin και IMainButtonItem. Χρησιμοποιούνται για την υλοποίηση της ενέργειας του κύριου κουμπιού. Στο πρόσθετο draw\.io, χρησιμοποιούμε τα στοιχεία μενού Κουμπί δράσης -> Περισσότερα στην ενότητα Τα έγγραφά μου ή στον επιλεγμένο χώρο για να δημιουργήσουμε διαγράμματα draw\.io.
IFilePlugin και IFileItem. Χρησιμοποιούνται για αλληλεπίδραση με συγκεκριμένους τύπους αρχείων. Σε αυτήν την περίπτωση, με τα αρχεία .drawio.

Σκεφτείτε τη δομή του προσθέτου. Όλα τα απαιτούμενα αρχεία περιγράφονται εδώ. Όλα τα υπόλοιπα μπορούν να οργανωθούν όπως προτιμάτε. Για παράδειγμα, στο πρόσθετο draw\.io , τοποθετήσαμε τον κώδικα για κάθε τύπο πρόσθετου σε ξεχωριστούς φακέλους, ενώ στο πρόσθετο μετατροπής ομιλίας σε κείμενο, αυτός ο κώδικας τοποθετείται στον φάκελο src .

How to develop a DocSpace plugin – complete Step-by-Step Tutorial

Επιλέξτε ένα όνομα για το πρόσθετό σας και γράψτε μια περιγραφή για αυτό.

Ανάπτυξη

Τώρα που όλες οι προπαρασκευαστικές εργασίες έχουν ολοκληρωθεί, μπορείτε να ξεκινήσετε την ανάπτυξη του προσθέτου σας.

Βήμα 1. Δημιουργήστε ένα πρότυπο πρόσθετου

Δημιουργήστε ένα πρότυπο πρόσθετου και ρυθμίστε τις ρυθμίσεις του που θα εμφανίζονται στις ρυθμίσεις προσθέτων του DocSpace:

Για να δημιουργήσετε ένα πρότυπο πρόσθετου, ανοίξτε το τερματικό και εκτελέστε την ακόλουθη εντολή npx:

 npx create-docspace-plugin

Εάν η εντολή npx δεν είναι διαθέσιμη, εγκαταστήστε το πακέτο npm @onlyoffice/docspace-plugin-sdk καθολικά χρησιμοποιώντας την ακόλουθη εντολή:

npm i -g @onlyoffice/docspace-plugin-sdk

Ρυθμίστε το πρόσθετο στο τερματικό καθορίζοντας ρυθμίσεις στον διάλογο. Όλες οι ρυθμίσεις περιγράφονται εδώ.

Για το πρόσθετο μετατροπής ομιλίας σε κείμενο , μπορείτε να χρησιμοποιήσετε τις ακόλουθες τιμές:

How to develop a DocSpace plugin – complete Step-by-Step Tutorial

Μπορείτε να αλλάξετε όλες τις καθορισμένες παραμέτρους αργότερα στο αρχείο package.json.

Μπορείτε επίσης να δημιουργήσετε ένα πρόσθετο σε οποιοδήποτε έργο προσθέτοντας το πακέτο npm @onlyoffice/docspace-plugin-sdk ως εξάρτηση και καθορίζοντας όλα τα απαραίτητα πεδία στο αρχείο package.json.

Βήμα 2. Ρυθμίστε το σημείο εισόδου του προσθέτου

Το σημείο εισόδου του προσθέτου index.ts θα δημιουργηθεί αυτόματα στον φάκελο src κατά τη διάρκεια του βήματος δημιουργίας προτύπου. Αυτό το αρχείο είναι απαραίτητο.

Αυτό το αρχείο περιέχει όλες τις βασικές μεθόδους των τύπων προσθέτων που επιλέξατε στο προηγούμενο βήμα. Μπορείτε να αλλάξετε αυτό το αρχείο ανά πάσα στιγμή.

Εάν δημιουργήσετε ένα πρόσθετο μόνοι σας, χωρίς πρότυπο, για το σημείο εισόδου του προσθέτου, μπορείτε να χρησιμοποιήσετε τον κώδικα από τα έτοιμα δείγματα προσθέτων μας. Θα λειτουργεί άψογα.

Βήμα 3. Προσθέστε εικονίδια προσθέτου

Δημιουργήστε τον φάκελο assets στον ριζικό φάκελο του προσθέτου και προσθέστε εκεί όλα τα εικονίδια του προσθέτου. Ο αριθμός των εικονιδίων και τα μεγέθη τους θα εξαρτηθούν από τους τύπους προσθέτων που υλοποιείτε. Για το πρόσθετο μετατροπής ομιλίας σε κείμενο, χρειαζόμαστε τα ακόλουθα εικονίδια:

Ο προεπιλεγμένος τύπος πρόσθετου απαιτεί μια εικόνα λογότυπου . Είναι ίδια με την παράμετρο logo από το αρχείο package.json. Το λογότυπο θα εμφανίζεται στις ρυθμίσεις προσθέτων του DocSpace. Το απαιτούμενο μέγεθος εικονιδίου είναι 48×48 px. Διαφορετικά, θα συμπιεστεί σε αυτό το μέγεθος.
Το πρόσθετο μενού περιβάλλοντος χρησιμοποιεί ένα εικονίδιο στο κουμπί Μετατροπή σε κείμενο. Το απαιτούμενο μέγεθος εικονιδίου είναι 16×16 px. Διαφορετικά, θα συμπιεστεί σε αυτό το μέγεθος.

How to develop a DocSpace plugin – complete Step-by-Step Tutorial

Αυτό το εικονίδιο μπορεί επίσης να χρησιμοποιηθεί για το εικονίδιο του κύριου κουμπιού. Για παράδειγμα, στο πρόσθετο draw\.io , το ίδιο εικονίδιο χρησιμοποιείται για το μενού περιβάλλοντος και το κύριο κουμπί.

Το πρόσθετο draw\.io χρησιμοποιεί επίσης ένα συγκεκριμένο εικονίδιο αρχείου δίπλα στα αρχεία .drawio, τα οποία δημιουργούνται με τον τύπο πρόσθετου αρχείου. Το προτιμώμενο μέγεθος εικονιδίου για τη μορφή πίνακα είναι 32×32 px.

Βήμα 4. Ρυθμίστε τα στοιχεία διεπαφής του προσθέτου

Για παράδειγμα, το πρόσθετο draw\.io περιέχει δύο κύρια στοιχεία διεπαφής χρήστη – το παραθυρικό παράθυρο και τον επεξεργαστή διαγραμμάτων. Δημιουργήστε αρχεία για τη ρύθμιση κάθε στοιχείου. Για τη διευκόλυνσή σας, μπορείτε να τοποθετήσετε αυτά τα αρχεία σε έναν ξεχωριστό φάκελο DrawIO.

Στο αρχείο Dialog.ts, ρυθμίστε τις ρυθμίσεις του παραθυρικού παραθύρου. Καθορίστε το στοιχείο διεπαφής χρήστη IFrame που χρησιμοποιείται για την ενσωμάτωση της ιστοσελίδας draw\.io σε ένα παραθυρικό παράθυρο:

  export const frameProps: IFrame = {
    width: "100%",
    height: "100%",
    name: "test-drawio",
    src: "",
  }

Δημιουργήστε τον IBox κοντέινερ για να προσθέσετε το iframe σε αυτόν:

 const body: IBox = {
    widthProp: "100%",
    heightProp: "100%",


    children: [
      {
        component: Components.iFrame,
        props: frameProps,
      },
    ],
  }

Ρυθμίστε τις ιδιότητες του παραθυρικού παραθύρου :

 export const drawIoModalDialogProps: IModalDialog = {
    dialogHeader: "",
    dialogBody: body,
    displayType: ModalDisplayType.modal,
    fullScreen: true,
    onClose: () => {
      const message: IMessage = {
        actions: [Actions.closeModal],
      }
      return message
    },
    onLoad: async () => {
      return {
        newDialogHeader: drawIoModalDialogProps.dialogHeader || "",
        newDialogBody: drawIoModalDialogProps.dialogBody,
      }
    },
    autoMaxHeight: true,
    autoMaxWidth: true,

Στο αρχείο Editor.ts, ρυθμίστε τον επεξεργαστή διαγραμμάτων. Δημιουργήστε τη συνάρτηση DiagramEditor με τις ακόλουθες παραμέτρους:

Παράμετρος	Τύπος	Παράδειγμα	Περιγραφή
ui	string	“default”	Καθορίζει το θέμα διεπαφής χρήστη του επεξεργαστή.
dark	string	“auto”	Καθορίζει το σκοτεινό θέμα του επεξεργαστή.
off	boolean	false	Καθορίζει εάν η λειτουργία εκτός σύνδεσης είναι ενεργή ή όχι.
lib	boolean	false	Καθορίζει εάν οι βιβλιοθήκες είναι ενεργοποιημένες ή όχι.
lang	string	“auto”	Καθορίζει τη γλώσσα του επεξεργαστή.
url	string	`https://embed.diagrams.net`	Καθορίζει τη διεύθυνση URL του επεξεργαστή.
showSaveButton	boolean	true	Καθορίζει εάν το κουμπί Αποθήκευση θα εμφανίζεται στον επεξεργαστή.

Στη συνέχεια, καθορίστε μεθόδους για εργασία με διαγράμματα:

Μέθοδος	Περιγραφή
startEditing	Ξεκινά τον επεξεργαστή με τα δεδομένα που δίνονται.
getData	Επιστρέφει τα δεδομένα του διαγράμματος.
getTitle	Επιστρέφει τον τίτλο του διαγράμματος.
getFormat	Επιστρέφει τη μορφή του διαγράμματος.
getFrameId	Επιστρέφει το αναγνωριστικό του πλαισίου του επεξεργαστή.
getFrameUrl	Επιστρέφει τη διεύθυνση URL του iframe.
handleMessage	Χειρίζεται το δεδομένο μήνυμα.
initializeEditor	Αποστέλλει το μήνυμα φόρτωσης στον επεξεργαστή.
save	Αποθηκεύει τα δεδομένα που δίνονται.

Ο πλήρης κώδικας για τον *DiagramEditor* μπορείτε να τον βρείτε εδώ

Βήμα 5. Δημιουργήστε τύπους προσθέτων

Τώρα που το προεπιλεγμένο πρόσθετο είναι έτοιμο, μπορείτε να αρχίσετε να κωδικοποιείτε άλλους τύπους προσθέτων.

Κάθε τύπος πρόσθετου έχει συγκεκριμένα αντικείμενα προσθέτων. Καθορίστε το αντικείμενο μενού περιβάλλοντος που θα εμφανίζεται όταν κάνετε δεξί κλικ σε αρχεία ήχου ή βίντεο:

export const contextMenuItem: IContextMenuItem = {
  key: "speech-to-text-context-menu-item",
  label: "Μετατροπή σε κείμενο",
  icon: "speech-to-text-16.png",
  onClick: assemblyAI.speechToText,
  fileType: [FilesType.video],
  withActiveItem: true,
}

Μπορείτε να προσθέσετε περισσότερους τύπους προσθέτων. Για παράδειγμα, το πρόσθετο draw\.io μπορεί να προσπελαστεί από το μενού του κύριου κουμπιού, επομένως πρέπει να καθορίσουμε το αντικείμενο κύριου κουμπιού:

const mainButtonItem: IMainButtonItem = {
  key: "draw-io-main-button-item",
  label: "Draw.io",
  icon: "drawio.png",
  onClick: (id: number) => {
    drawIo.setCurrentFolderId(id)


    const message: IMessage = {
      actions: [Actions.showCreateDialogModal],
      createDialogProps: {
        title: "Δημιουργία διαγράμματος",
        startValue: "Νέο διάγραμμα",
        visible: true,
        isCreateDialog: true,
        extension: ".drawio",
        onSave: async (e: any, value: string) => {
          await drawIo.createNewFile(value)
        },
        onCancel: (e: any) => {
          drawIo.setCurrentFolderId(null)
        },
        onClose: (e: any) => {
          drawIo.setCurrentFolderId(null)
        },
      },
    }
    return message
  },
  // items: [createItem],
}

Όταν γίνεται κλικ στο αντικείμενο κύριου κουμπιού, εμφανίζεται το παραθυρικό παράθυρο όπου μπορείτε να πληκτρολογήσετε το όνομα του διαγράμματος και να ανοίξετε ένα κενό αρχείο .drawio.

(no title)

Για το πρόσθετο draw\.io, πρέπει επίσης να ρυθμίσετε τον τύπο πρόσθετου αρχείου που λειτουργεί όταν ο χρήστης ανοίγει το συγκεκριμένο αρχείο .drawio :

Καθορίστε το αντικείμενο αρχείου που αντιπροσωπεύεται ως αρχείο με τη συγκεκριμένη επέκταση (.drawio) και εικονίδιο:

 export const drawIoItem: IFileItem = {
     extension: ".drawio",
     fileTypeName: "Διάγραμμα",
     fileRowIcon: "drawio-32.svg",
     fileTileIcon: "drawio-32.svg",
     devices: [Devices.desktop],
     onClick,
   }

Καθορίστε το συμβάν onClick που θα εκτελεί τη μέθοδο editDiagram κάθε φορά που ανοίγει το αρχείο .drawio:

  const onClick = async (item: File) => {
     return await drawIo.editDiagram(item.id)
   }

(no title)

Βήμα 6. Δημιουργήστε τον τύπο πρόσθετου ρυθμίσεων

Ρυθμίστε τον τύπο πρόσθετου ρυθμίσεων για να παρέχετε στους χρήστες τις ρυθμίσεις διαχειριστή.

Δημιουργήστε ένα κοντέινερ όπου θα τοποθετηθούν οι ρυθμίσεις του προσθέτου:

 const descriptionText: TextGroup = {
     component: Components.text,
     props: {
       text: "Για να δημιουργήσετε διακριτικό API, επισκεφθείτε https://www.assemblyai.com",
       color: "#A3A9AE",
       fontSize: "12px",
       fontWeight: 400,
       lineHeight: "16px",
     },
   }
   
   const descGroup: BoxGroup = {
     component: Components.box,
     props: {children: [descriptionText]},
   }
   
   const parentBox: IBox = {
     displayProp: "flex",
     flexDirection: "column",
     // marginProp: "16px 0 0 0",
     children: [tokenGroup, descGroup],
   }

Στην περιγραφή των ρυθμίσεων, αναφέρετε ότι είναι απαραίτητο να δημιουργήσετε ένα διακριτικό API για να μπορείτε να εργαστείτε με το πρόσθετο.

Ρυθμίστε τις ρυθμίσεις διαχειριστή με το αντικείμενο ISettings :

const adminSettings: ISettings = {
     settings: parentBox,
     saveButton: userButtonComponent,
     onLoad: async () => {
       assemblyAI.fetchAPIToken()
   
       tokenInput.value = assemblyAI.apiToken
   
       if (!assemblyAI.apiToken) {
         return {
           settings: parentBox,
         }
       }


       plugin.setAdminPluginSettings(adminSettings)
   
       return {settings: parentBox}
     }

Καθορίστε το συμβάν onLoad που καθορίζει ποιες ρυθμίσεις πρόσθετου θα εμφανίζονται όταν φορτώνεται το μπλοκ ρυθμίσεων.

Κάθε στοιχείο ρυθμίσεων καθορίζεται σε ξεχωριστά αρχεία (κουμπιά, διακριτικό).

How to develop a DocSpace plugin – complete Step-by-Step Tutorial

Βήμα 7. Δημιουργήστε το κύριο αρχείο κώδικα του προσθέτου

Δημιουργήστε ένα αρχείο στον φάκελο src με τον κύριο κώδικα του προσθέτου. Αυτό το αρχείο είναι απαραίτητο. Ανατρέξτε στην τεκμηρίωση μιας υπηρεσίας τρίτων για να γράψετε αυτόν τον κώδικα.

Ας δούμε πώς είναι οργανωμένο το αρχείο AssemblyAI.ts λεπτομερώς:

Καθορίστε την κλάση AssemblyAI με όλες τις απαραίτητες μεταβλητές και μεθόδους:

Μεταβλητές και περιγραφή τους:

apiURL

Καθορίζει τη διεύθυνση URL του API.

apiURL = ""

currentFileId

Καθορίζει το τρέχον αναγνωριστικό αρχείου.

const currentFileId: numbernull | number = null

apiToken

Καθορίζει το διακριτικό API.

 apiToken = ""

Μέθοδοι και περιγραφή τους

createAPIUrl

Δημιουργεί τη διεύθυνση URL του API.

 createAPIUrl = () => {
     const api = plugin.getAPI()


     this.apiURL = api.origin.replace(/\/+$/, "")


     const params = [api.proxy, api.prefix]


     if (this.apiURL) {
       for (const part of params) {
         if (!part) {
           continue
         }
         const newPart = part.trim().replace(/^\/+/, "")
         if (newPart) {
           if (this.apiURL.length !== 0 && this.apiURL[this.apiURL.length - 1] === "/") {
             this.apiURL += newPart
           } else {
             this.apiURL += `/${newPart}`
           }
         }
       }
     }
   }

setAPIUrl

Ορίζει τη διεύθυνση URL του API.

 setAPIUrl = (url: string) => {
     this.apiURL = url
   }

getAPIUrl

Επιστρέφει τη διεύθυνση URL του API.

 getAPIUrl = () => {
     return this.apiURL
   }

setAPIToken

Ορίζει το διακριτικό API.

   setAPIToken = (apiToken: string) => {
     this.apiToken = apiToken
   }

getAPIToken

Επιστρέφει το διακριτικό API.

   getAPIToken = () => {
     return this.apiToken
   }

fetchAPIToken

Ανακτά το διακριτικό API.

   fetchAPIToken = async () => {
     const apiToken = localStorage.getItem("speech-to-text-api-token")
  
     if (!apiToken) {
       return
     }


     this.setAPIToken(apiToken)
     plugin.updateStatus(PluginStatus.active)
   }

saveAPIToken

Αποθηκεύει το διακριτικό API.

   saveAPIToken = (apiToken: string) => {
     localStorage.setItem("speech-to-text-api-token", apiToken)
  
     let status
     if (apiToken) {
       status = PluginStatus.active
     } else {
       status = PluginStatus.hide
     }
     plugin.updateStatus(status)
   }

setCurrentFileId

Ορίζει το αναγνωριστικό στο τρέχον αρχείο.

 setCurrentFileId = (id: number | null) => {
     this.currentFileId = id
   }

uploadFile

Ανεβάζει ένα αρχείο που θα μεταγραφεί.

uploadFile = async (apiToken: string, path: string, data: Blob) => {
     console.log(`Uploading file: ${path}`)
  
     const url = "https://api.assemblyai.com/v2/upload"
  
     try {
       const response = await fetch(url, {
         method: "POST",
         body: data,
         headers: {
           "Content-Type": "application/octet-stream",
           "Authorization": apiToken,
         },
       })
  
       if (response.status === 200) {
         const responseData = await response.json()
         return responseData["upload_url"]
       }
       console.error(`Error: ${response.status} - ${response.statusText}`)
       return null
     } catch (error) {
       console.error(`Error: ${error}`)
       return null
     }
   }

transcribeAudio

Μεταγράφει το αρχείο ήχου.

transcribeAudio = async (apiToken: string, audioUrl: string) => {
     console.log("Transcribing audio... This might take a moment.")
  
     const headers = {
       "authorization": apiToken,
       "content-type": "application/json",
     }
     const response = await fetch("https://api.assemblyai.com/v2/transcript", {
       method: "POST",
       body: JSON.stringify({audioUrl}),
       headers,
     })
  
     const responseData = await response.json()
     const transcriptId = responseData.id
  
     const pollingEndpoint = `https://api.assemblyai.com/v2/transcript/${transcriptId}`
  
     while (true) {
       const pollingResponse = await fetch(pollingEndpoint, {headers})
       const transcriptionResult = await pollingResponse.json()
  
       if (transcriptionResult.status === "completed") {
         return transcriptionResult
       } else if (transcriptionResult.status === "error") {
         throw new Error(`Transcription failed: ${transcriptionResult.error}`)
       } else {
         await new Promise((resolve) => {
           setTimeout(resolve, 3000)
         })
       }
     }
   }

speechToText

Υλοποιεί τη λειτουργικότητα του προσθέτου.

speechToText = async (id: number) => {
     if (!this.apiToken) {
       return
     }


     this.setCurrentFileId(null)
  
     if (!this.apiURL) {
       this.createAPIUrl()
     }


     const response = await fetch(`${this.apiURL}/files/file/${id}`)
     const data = await response.json()
     const {viewUrl, title, folderId, fileExst} = data.response
  
     const file = await fetch(viewUrl)
  
     const fileBlob = await file.blob()
  
     const uploadUrl = await this.uploadFile(this.apiToken, viewUrl, fileBlob)
  
     const transcript = await this.transcribeAudio(this.apiToken, uploadUrl)
  
     const blob = new Blob([transcript.text], {
       type: "text/plain;charset=UTF-8",
     })
  
     const newFile = new File([blob], "blob", {
       type: "",
       lastModified: Date.now(),
     })
  
     const formData = new FormData()
     formData.append("file", newFile)
  
     const newTitle = `${title.replaceAll(fileExst, "")} text`
  
     try {
       const sessionRes = await fetch(
         `${this.apiURL}/files/${folderId}/upload/create_session`,
         {
           method: "POST",
           headers: {
             "Content-Type": "application/json;charset=utf-8",
           },
           body: JSON.stringify({
             createOn: new Date(),
             fileName: `${newTitle}.txt`,
             fileSize: newFile.size,
             relativePath: "",
           }),
         },
       )
       const response = await sessionRes.json()
       const sessionData = response.response.data
  
       const data = await fetch(`${sessionData.location}`, {
         method: "POST",
         body: formData,
       })


       const jsonData = await data.json()
       const {id: fileId} = jsonData.data
  
       return fileId
     } catch (e) {
       console.log(e)
     }


     return {
       actions: [Actions.showToast],
       toastProps: [{type: ToastType.success, title: ""}],
     } as IMessage
   }

Δηλώστε την παρουσία της κλάσης AssemblyAI:

const assemblyAI = new AssemblyAI()

Εξαγάγετε την δημιουργημένη παρουσία του προσθέτου:

export default assemblyAI

Δοκιμή

Για να ελέγξετε τη λειτουργικότητα του προσθέτου και να διορθώσετε τυχόν σφάλματα, δοκιμάστε το πρόσθετο:

Δημιουργήστε το προετοιμασμένο πρόσθετο ακολουθώντας τις οδηγίες εδώ

Ο φάκελος dist θα δημιουργηθεί στον ριζικό φάκελο του προσθέτου και το αρχείο του προσθέτου θα τοποθετηθεί σε αυτόν. Αυτό το αρχείο είναι το ολοκληρωμένο πρόσθετο που μπορεί να ανεβεί στην πύλη DocSpace.

Ανεβάστε το πρόσθετό σας στην πύλη DocSpace και δοκιμάστε διεξοδικά την εμφάνιση και τη λειτουργικότητά του.

Σημείωση! Λάβετε υπόψη ότι μπορείτε να ανεβάσετε τα δικά σας πρόσθετα μόνο στην έκδοση διακομιστή του DocSpace

Εάν προκύψουν σφάλματα, διορθώστε τον πηγαίο κώδικα του προσθέτου σας και επαναλάβετε τη διαδικασία δημιουργίας και δοκιμής.

Τώρα που το πρόσθετό σας έχει δοκιμαστεί και λειτουργεί σωστά, μπορείτε να το προσθέσετε στην έκδοση διακομιστή του DocSpace και να αρχίσετε να το χρησιμοποιείτε.

Το πρόσθετο DocSpace προσφέρει μια ισχυρή, φιλική προς τον χρήστη προσέγγιση στη διαχείριση και τη συνεργασία εγγράφων. Με την ενσωμάτωση με τις πλατφόρμες που προτιμούν οι χρήστες, αφαιρεί κοινά εμπόδια και βελτιώνει την παραγωγικότητα σε διαφορετικές ροές εργασίας. Εάν έχετε οποιεσδήποτε ερωτήσεις σχετικά με τα πρόσθετα DocSpace, μην διστάσετε να ρωτήσετε τους προγραμματιστές μας στο φόρουμ ONLYOFFICE (απαιτείται εγγραφή). Μπορείτε επίσης να ζητήσετε μια λειτουργία ή να αναφέρετε ένα σφάλμα δημοσιεύοντας ένα ζήτημα στο GitHub ή να μοιραστείτε τα πρόσθετα DocSpace σας μαζί μας και με άλλους χρήστες. Καλή τύχη στις εξερευνήσεις σας!