How to Deploy TypeScript DOCX Editor for Mobile

28 Aug 20262 minutes to read

DOCX Editor component for mobile

At present, the TypeScript DOCX Editor (Document Editor) component is not responsive on mobile, and we haven’t ensured the editing functionality in mobile browsers. However, it works properly as a document viewer in mobile browsers.

Hence, it is recommended to switch the DOCX Editor component to read-only mode in mobile browsers. Also, invoke the fitPage method with the FitPageWidth parameter in the document change event to display one full page by adjusting the zoom factor.

The following example code illustrates how to deploy the DOCX Editor component for mobile.

//Initialize Document Editor Container component.
import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';

DocumentEditorContainer.Inject(Toolbar);
let container: DocumentEditorContainer = new DocumentEditorContainer({
    enableToolbar: true, height: '590px'
});
container.serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';
container.appendTo('#DocumentEditor');

//To detect the device
let isMobileDevice: boolean = /Android|Windows Phone|webOS/i.test(navigator.userAgent);

container.documentChange = () => {
    if (isMobileDevice) {
        container.restrictEditing = true;
        setTimeout(() => {
            container.documentEditor.fitPage("FitPageWidth");
        }, 50);
    }
    else {
        container.restrictEditing = false;
    }
}

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.

You can download the complete working example from this GitHub location.

You can use the restrictEditing in DocumentEditorContainer and isReadOnly in DocumentEditor based on your requirement to change the component to read-only mode.