Is there a way to get selection text from inside the onlyoffice iframe?

Suggestions
1

I am using the @onlyoffice/document-editor-react package in my react web app like in the below screenshot, my question is if there is a way to get selected text data (like in the screenshot) outside the iframe, ideally to me you should have something like this where I have an event to get selected text data:

<DocumentEditor
  onSelectText={() => {}}
  // other props here
/>

Follow up question: if this is possible how can I modify programmatically document text inside onlyoffice from outside the iframe in my react web app

Screenshot 2024-12-11 at 11.31.55 AM
Screenshot 2024-12-11 at 11.31.55 AM1822×800 97 KB

Thanks!

2

Hello @leandro

It is possible to interact with editor from the outside of its frame with Automation API. Basically, it has the same interface as plugins, so can utilize all Office API and Plugins methods to develop any custom logic to perform from out the frame.

You can find some examples of such interaction on this page:
https://api.onlyoffice.com/docs/docs-api/get-started/external-access-to-the-document-editing/

3

@Constantine Thanks! I was able to had it working, but the react package (@onlyoffice/document-editor-react) seems to have a bug, I was trying to do this

      <DocumentEditor
        config={documentEditorConfig}
        documentServerUrl={DOCUMENT_SERVER_URL}
        events_onDocumentReady={e => {
          const connector = e.target.DocEditor().createConnector()

          connector.executeMethod('GetSelectedText', [], selectedText => {
            console.log('Selected text:', selectedText)
          })

          connector.executeMethod('GetAllComments', null, data => {
            console.log('GetAllComments', data)
          })
        }}
        id="docxEditor"
        onLoadComponentError={onLoadComponentError}
      />

and for some reason the connector APIs were not doing anything, but if I access the connector directly from window object like this it works fine

const connector = window.DocEditor.instances.docxEditor.createConnector()

So there may be an object reference issue or similar

Thanks!

4

Try defining the event onDocumentReady as a separate function before creating docxEditor object, for instance, like that:

function onDocumentReady(event) {
  const connector = window.DocEditor.instances.docxEditor.createConnector()
  console.log("Connector created")

  connector.executeMethod('GetSelectedText', [], selectedText => {
    console.log('Selected text:', selectedText)
  })

  connector.executeMethod('GetAllComments', null, data => {
    console.log('GetAllComments', data)
  })
}

export default function App() {
  return (
    <DocumentEditor
      id="docxEditor"
      documentServerUrl="http://documentserver/"
      config={{
        document: {
          ...
          },
      }}
      events_onDocumentReady={onDocumentReady}
    />
  )
}
5

Yes, that’s what I did and it works, but I had to look into the internal code to realize that I can use this window.DocEditor.instances.docxEditor.createConnector() and this is internal implementation details, my intuition was that I should be able to do something like

events_onDocumentReady={e => {
          const connector = e.target.DocEditor().createConnector()

          connector.executeMethod('GetSelectedText', [], selectedText => {
            console.log('Selected text:', selectedText)
          })
}}

and I should not need to know about window.DocEditor...

6

connector is created for editor frame, so this is expected. Did you manage to make it work for your case?

7

I manage to get it working, the point I am making is that I had to see the internal code to realize the use of window.DocEditor.instances.docxEditor.createConnector() which was not expected by me, but if this is expected and the right way to do it then it should be documented, just a feedback

Thanks!

1 Like
8

Thanks for the feedback. I am glad to know that it is working.

It is actually documented on the Automation API page:

To create the connector, use the createConnector method of the document editor object.

In case of React integration it is a bit different object, which is expected.