How to Resize in Vue DOCX Editor

28 Aug 20264 minutes to read

In this article, we are going to see how to change the height and width of the Vue DOCX Editor (Document Editor).

Change height of DOCX Editor

DocumentEditorContainer initially renders with default height. You can change the height of the DOCX Editor using the height property, the value which is in pixels.

The following example code illustrates how to change the height of DOCX Editor.

 <ejs-documenteditorcontainer ref='container' :serviceUrl='serviceUrl' height="590px" id='container' :enableToolbar='true'></ejs-documenteditorcontainer>

Similarly, you can use height property for DocumentEditor also.

Change width of DOCX Editor

DocumentEditorContainer initially renders with default width. You can change the width of the DOCX Editor using the width property, the value which is in percentages.

The following example code illustrates how to change the width of DOCX Editor.

<ejs-documenteditorcontainer ref='container' :serviceUrl='serviceUrl' v-on:created="onCreated" width="100%" id='container' :enableToolbar='true'></ejs-documenteditorcontainer>

Similarly, you can use width property for DocumentEditor also.

Resize DOCX Editor

Using the resize method, you can change the height and width of the DOCX Editor.

The following example code illustrates how to fit the DOCX Editor to the browser window size.

Composition API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-documenteditorcontainer ref='container' :serviceUrl='serviceUrl' v-on:created="onCreated" height="590px"
      id='container' :enableToolbar='true'></ejs-documenteditorcontainer>
  </div>
</template>
<script setup>
import { DocumentEditorContainerComponent as EjsDocumenteditorcontainer, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
import { provide, ref } from 'vue';

const container = ref(null);
const serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';

//Inject required modules.
provide('DocumentEditorContainer', [Toolbar]);

const onWindowResize = function () {
  //Resizes the Document Editor component to fit full browser window automatically whenever the browser is resized.
  updateDocumentEditorSize();
}
const updateDocumentEditorSize = function () {
  //Resizes the Document Editor component to fit full browser window.
  let windowWidth = window.innerWidth;
  let windowHeight = window.innerHeight;
  container.value.ej2Instances.resize(windowWidth, windowHeight);
}
const onCreated = function () {
  setInterval(() => {
    updateDocumentEditorSize();
  }, 100);
  //Adds event listener for browser window resize event.
  window.addEventListener('resize', onWindowResize);
}
</script>

Options API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-documenteditorcontainer ref='container' :serviceUrl='serviceUrl' v-on:created="onCreated" height="590px"
      id='container' :enableToolbar='true'></ejs-documenteditorcontainer>
  </div>
</template>
<script>
import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';

export default {
  components: {
    'ejs-documenteditorcontainer': DocumentEditorContainerComponent
  },
  data() {
    return {
      serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'
    };
  },
  provide: {
    //Inject required modules.
    DocumentEditorContainer: [Toolbar]
  },
  methods: {
    onWindowResize: function () {
      //Resizes the Document Editor component to fit full browser window automatically whenever the browser is resized.
      this.updateDocumentEditorSize();
    },
    updateDocumentEditorSize: function () {
      //Resizes the Document Editor component to fit full browser window.
      let windowWidth = window.innerWidth;
      let windowHeight = window.innerHeight;
      this.$refs.container.ej2Instances.resize(windowWidth, windowHeight);
    },
    onCreated: function () {
      setInterval(() => {
        this.updateDocumentEditorSize();
      }, 100);
      //Adds event listener for browser window resize event.
      window.addEventListener('resize', this.onWindowResize.bind(this));
    },
  },
};
</script>

The Web API hosted link https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/ utilized in the DOCX Editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and use for the serviceUrl property.