createConnector not present in Docker's api.js

Docs API
1

Hey there :smiley:

I set up the Docker image for document builder as it is defined in the docs (without the JWT token for creating the POC).

I am using React, but because I want to programatically edit the document (I want to dynamically add highlights and anotations) I decided to use the api.js script insted of the React component (DocumentEditor).

This is how I set it up:

const loadScript = (src: string) => {
    return new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = src
      script.async = true
      script.onload = () => resolve(true)
      script.onerror = () => reject(new Error(`Failed to load script ${src}`))
      document.head.appendChild(script)
      return () => {
        document.head.removeChild(script)
      }
    })
  }

  useEffect(() => {
    const cleanupFunction = () => {}
    const loadAndAwaitScript = async () => {
      try {
        await loadScript('http://localhost/web-apps/apps/api/documents/api.js')
        const docEditor = new DocsAPI.DocEditor('placeholder', {
          document: {
            fileType: 'docx',
            key: 'TestKey',
            title: 'Example.docx',
            url: 'https://calibre-ebook.com/downloads/demos/demo.docx',
          },
          documentType: 'word',
          editorConfig: {
            mode: 'view',
          },
          height: '800px',
          width: '100%',
        })
        const connector = docEditor.createConnector()
        connector.callCommand(
          function () {
            const oDocument = Api.GetDocument()
            const oParagraph = Api.CreateParagraph()
            oParagraph.AddText('Hello there')
            oDocument.InsertContent([oParagraph])
          },
          function () {
            console.log('callback command')
          }
        )
      } catch (error) {
        console.error('Error loading script:', error)
      }
    }

    loadAndAwaitScript()

    return () => {
      cleanupFunction()
    }
  }, [])

The document is loded successfully (is visible), but then I get an error that createConnector() does not exist. And after I checked I see that it is not present in the Docker’s api.js file, but I see that it is present here: https://api.docs.onlyoffice.com/web-apps/apps/api/documents/api.js

Why is there no createConnector or how can I achive dynamically editing of documents in react app?

2

@Alexandre @Constantine @Nikolas @Carl

3

Hello @ttset,

Are you using the Community Edition Document Server? In this case the connector class won’t be available. It can only be used in a Developer Edition Document Server with a special license.

1 Like
4

Thanks for the response.
Yes, it is most likely community edition.

Does the Developer Edition Document Server come with a docker image or is only as a Service?
And is there a free/trial option for it, I’d like to first set everything up and then buy a license if needed.

5

What about the connector.callCommand function?
Should this one be present in Developer Edition Document Server?

The only one I see is onMessageBound
image

6

@Carl why dont I see callCommand function on the connector? I used Developer Edition Document Server

7

@Alexandre @Constantine @Nikolas @Carl

8

Okay I found that I was missing event callback configuration. The updated code is now:

        const onDocumentReady = function () {
          const connector = docEditor.createConnector()
          connector.callCommand(
            function () {
              const oDocument = Api.GetDocument()
              const aSearch = oDocument.Search('demonstrates')
              aSearch[0].SetBold(true)
            },
            function () {
              console.log('callback command')
            }
          )
        }

        const docEditor = new DocsAPI.DocEditor('placeholder', {
          ...,
          events : {
            onDocumentReady: onDocumentReady
          }
        })

This actually works (the command is sent to the Document builder), but no change is visible in the document. Am I missing something?

9

If I set DocEditor config:

editorConfig: {
  mode: 'edit', 
  // Other configurations...
}

then it works, but also all users can edit. Is there no other way to edit the document programatically from frontend?
I would at least like to hide the options to edit the documnet for users …

10

Hello @ttset

This is expected behavior as your function makes changes in the document, so when mode is set to view you cannot make any changes, but if it is edit, then you can and it works.

If I understand correctly, your goal is to run editors, make certain changes in the document, but leave it uneditable for users. As a workaround you can start your document in edit mode to execute your function and then use SetEditingRestrictions method to restrict editing. For instance:

        var connector = docEditor.createConnector();
        connector.callCommand(
            function () {
              const oDocument = Api.GetDocument()
              const aSearch = oDocument.Search("RANDOM")
              aSearch[0].SetBold(true)
            },
            function () {
              console.log("callback command")
            }
		);
		connector.executeMethod("SetEditingRestrictions", ["readOnly"]);
		};

That way after initializing editors, you function will be executed and editing will be restricted.

By the way, if you have active trial of Docs Developer Edition, you can also contact via Zendesk to get prompt replies.