How to use DocEditor with Vue?

Docs API
,
1

Hello. Could you please help me? I’m trying to integrate OnlyOffice to my app using Vue and i follow this page

and all work well, but i cant understand how i can use methods

for example for testing i want to use “showMessage” method and i must do it after “onAppReady” event.

I am doing like this

  <div style="height: 100%;" v-if="showEditor">
   <DocumentEditor
      id="docEditor"
      :documentServerUrl="documentServerUrl"
      :config="config"
      document-type="word"
      type="desktop"
      width="100%"
      height="100%"
      :events_onDocumentReady="onDocumentReady"
      :onLoadComponentError="onLoadComponentError"
      :events_on-app-ready="(event) => {event.target.DocEditor.showMessage('test')}"
    />
  </div>
</template>

and i dont see any message. I think i am calling methods wrong. Could you tell me how to call it correct, please?

2

Hello @belevich00

First of all, please note that the event name is events_onAppReady, not events_on-app-ready.
Second, events rely on being defined separately and then referenced in the config:

<template>
    <DocumentEditor 
        id="docEditor" 
        documentServerUrl="http://documentserver/"
        :config="config"
        :events_onDocumentReady="onDocumentReady"
        :onLoadComponentError="onLoadComponentError"
    /> 
</template>
...
export default defineComponent({
    ...
    methods: {
        onDocumentReady() {
            console.log("Document is loaded");
        },

I’d recommend revising your approach. Also, for additional information you can check out browser console after running the editor to see if any error has been prompted.

3

Thanks for your answer. In VUE you can specify props like “my-props-name” even if props name “myPropsName”. You can also pass the function as anonymous, but I did exactly as in the example.
here my full code:

  <div style="height: 100%;" v-if="showEditor">
   <DocumentEditor
      id="docEditor"
      :documentServerUrl="documentServerUrl"
      :config="config"
      document-type="word"
      type="desktop"
      width="100%"
      height="100%"
      :events_onDocumentReady="onDocumentReady"
      :onLoadComponentError="onLoadComponentError"
      :events_onAppReady="onAppReady"
      :events_onRequestHistory="onRequestHistory"
    />
  </div>
</template>

<script>
import { defineComponent } from "vue";
import axios from "@/plugins/axios.js";
import { useRoute } from "vue-router";
import { DocumentEditor } from "@onlyoffice/document-editor-vue";

export default defineComponent({
  name: "OOEditor",
  components: {
    DocumentEditor
  },

  data(){
    return {
      documentServerUrl: import.meta.env.VITE_APP_ONLY_OFFICE_HOST,
      showEditor: false,
      config: {}
    }
  },
  mounted() {
    this.load()
  },
  methods: {
    load(){
      const route = useRoute()
      axios.get("api/v1/only-office/"+ route.params.id + "/").then((response) =>{
        this.config = response.data.config
        this.showEditor = true
      }).catch((error)=>{
        console.log(error, 'ERROR')
      })
    },
    onAppReady(event){
      console.log("DOCUMENT IS OPEN")
    },
    onRequestHistory(event){
      console.log("I CLICK BUTTON 'VERSIONS'")
    },
    onDocumentReady() {
        console.log("Document is loaded");
    },
    onLoadComponentError (errorCode, errorDescription) {
            switch(errorCode) {
                case -1: // Unknown error loading component
                    console.log(errorDescription);
                    break;

                case -2: // Error load DocsAPI from http://documentserver/
                    console.log(errorDescription);
                    break;

                case -3: // DocsAPI is not defined
                    console.log(errorDescription);
                    break;
            }
        }
  },
})
</script>

And all works well. For example when I open a document I see a message “DOCUMENT IS OPEN” in the console. And ONLY when i add “onRequestHistory” event i see versions button and ONLY when i click button i see message “I CLICK BUTTON ‘VERSIONS’”. But how i can call methods?

The documentation says that I should use the docEditor object and use it only after calling event
Documentation says i can create object like this:
“var docEditor = new DocsAPI.DocEditor(“placeholder”, config);”
But where can I get the DocsAPI object?
I have this object in my window, there is also a DocEditor object. but when i tried
something like:
docEditor = new window.DocsAPI.DocEditor(“placeholder”, config);
but when I do this, I get a cycle of creating an editor and in the cycle I see a message from the event
onAppReady

If I correctly understood the essence of how this works, I add callback functions for certain events and there I must call methods in them. So my question is from which object should I call these methods?

4

It’s funny, but while I was writing about what I wanted to get, I thought I could try it like this and it worked for me :grinning:

onAppReady(event){
      console.log("DOCUMENT IS OPEN")
      window.DocEditor.instances.docEditor.showMessage('test')
    },

and now I see the message. Thanks for your answer, good luck

1 Like
5

Good job! Closing as solved.