diff --git a/CHANGELOG.md b/CHANGELOG.md index ac4d2054d..f4cda6dca 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ # Change Log +- docs api: added the information about calling editor methods in the frameworks - docs api: added the Checking PDF forms page - docspace backend: added the Removed user page diff --git a/site/pages/Docs/Docs API/Get Started/Frontend Frameworks/Angular/index.md b/site/pages/Docs/Docs API/Get Started/Frontend Frameworks/Angular/index.md index d2f8eb24a..fdb0a5580 100644 --- a/site/pages/Docs/Docs API/Get Started/Frontend Frameworks/Angular/index.md +++ b/site/pages/Docs/Docs API/Get Started/Frontend Frameworks/Angular/index.md @@ -213,6 +213,30 @@ Test the application using the Node.js development server: - To stop the development server, select on the command line or command prompt and press *Ctrl+C*. +## Calling editor methods in the Angular component + +1. Add the `DocEditor.instances` parameter to the `window` object and get the editor object from it by the editor ID: + + ```ts + const documentEditor = window.DocEditor.instances["docxEditor"] + ``` + +2. Call any editor [method](../../../Usage%20API/Methods/index.md) from this object: + + ```ts + documentEditor.showMessage("Welcome to ONLYOFFICE Editor!") + ``` + +Example: + +```ts +onDocumentReady = () => { + const documentEditor = window.DocEditor.instances["docxEditor"] + + documentEditor.showMessage("Welcome to ONLYOFFICE Editor!") +} +``` + ## Deploying the demo Angular application To deploy the application to a production environment, create the build-specific configuration options for Angular projects: diff --git a/site/pages/Docs/Docs API/Get Started/Frontend Frameworks/React/index.md b/site/pages/Docs/Docs API/Get Started/Frontend Frameworks/React/index.md index 91f97edeb..a779aa373 100644 --- a/site/pages/Docs/Docs API/Get Started/Frontend Frameworks/React/index.md +++ b/site/pages/Docs/Docs API/Get Started/Frontend Frameworks/React/index.md @@ -100,6 +100,30 @@ This procedure creates a [basic React application](https://github.com/facebook/c - To stop the development server, select on the command line or command prompt and press *Ctrl+C*. +## Calling editor methods in the React component + +1. Add the `DocEditor.instances` parameter to the `window` object and get the editor object from it by the editor ID: + + ```tsx + const documentEditor = window.DocEditor.instances["docxEditor"] + ``` + +2. Call any editor [method](../../../Usage%20API/Methods/index.md) from this object: + + ```tsx + documentEditor.showMessage("Welcome to ONLYOFFICE Editor!") + ``` + +Example: + +```tsx +const onDocumentReady = () => { + const documentEditor = window.DocEditor.instances["docxEditor"] + + documentEditor.showMessage("Welcome to ONLYOFFICE Editor!") +} +``` + ## Deploying the demo React application The easiest way to deploy the application to a production environment is to install [serve](https://github.com/vercel/serve) and create a static server: diff --git a/site/pages/Docs/Docs API/Get Started/Frontend Frameworks/Vue/index.md b/site/pages/Docs/Docs API/Get Started/Frontend Frameworks/Vue/index.md index 4f5ed628b..4c65e9633 100644 --- a/site/pages/Docs/Docs API/Get Started/Frontend Frameworks/Vue/index.md +++ b/site/pages/Docs/Docs API/Get Started/Frontend Frameworks/Vue/index.md @@ -104,6 +104,30 @@ This procedure creates a [basic Vue.js application](https://cli.vuejs.org/guide/ - To stop the development server, select on the command line or command prompt and press *Ctrl+C*. +## Calling editor methods in the Vue.js application + +1. Add the `DocEditor.instances` parameter to the `window` object and get the editor object from it by the editor ID: + + ```vue + const documentEditor = window.DocEditor.instances["docEditor"] + ``` + +2. Call any editor [method](../../../Usage%20API/Methods/index.md) from this object: + + ```vue + documentEditor.showMessage("Welcome to ONLYOFFICE Editor!") + ``` + +Example: + +```vue +onDocumentReady() { + const documentEditor = window.DocEditor.instances["docEditor"] + + documentEditor.showMessage("Welcome to ONLYOFFICE Editor!") +} +``` + ## Deploying the demo Vue.js application The easiest way to deploy the application to a production environment is to install [serve](https://github.com/vercel/serve) and create a static server: