Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Recently, ONLYOFFICE has been used in the background management system to achieve the function of online document editing by multiple people. If you are free today, you can arrange it for the convenience of next use. (The official website is in English, which seems really difficult for me.)

The project framework is VUE, so I will take vUE project as an example:

We will first introduce the backend address in the index.html file. Here is an example from the official website. We will use the backend address again in the project:

<script type="text/javascript" src="https://documentserver/web-apps/apps/api/documents/api.js"></script>
Copy the code

Components (please ignore the outer popover components) :

 <div id="onlineEdit"></div>
Copy the code

  option: {
        document: {
          fileType: ' '.permissions: {
            comment: true.download: false.edit: false.copy: false.print: false,},key: ' '.title: ' '.url: ' '
        },
        editorConfig: {
          lang: 'zh-CN'.// Callback interface, used to save the function after editing,(close the page for about 5 seconds will trigger)
          callbackUrl: ' '.user: {
            id: ' '.name: ' '}},token: ' '.height: '100%'.width: '100%'
      },
      docEditor: null.Copy the code

Then you can set some permissions on the document as required:

  • this.option.document.permissions.edit = true;Editable or not
  • this.option.document.permissions.copy = true;Replicable or not
  • this.option.document.permissions.download = true;Downloadable or not (the document is set on the back end)
  • this.option.document.permissions.comment = true;Reviewable
  • this.option.document.permissions.print = true;Whether it is printable (the document is set on the back end)

(I only used edit and copy functions, download is set up in the back end, other functions are to be studied.)

Instantiation:

 this.docEditor = new DocsAPI.DocEditor('onlineEdit'.this.option);
Copy the code

Complete code can go to gitHub to view, free I write a demo.

Thank you for your support!!