Deploy document editor component for mobile in React Document editor component

3 May 20253 minutes to read

Document editor component for Mobile

At present, Document editor component is not responsive for mobile, and we haven’t ensured the editing functionalities in mobile browsers. Whereas it works properly as a document viewer in mobile browsers.

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

The following example code illustrates how to deploy Document Editor component for Mobile.

import {
  DocumentEditorContainer,
  Toolbar,
  DocumentEditorContainerComponent,
} from '@syncfusion/ej2-react-documenteditor';
import * as ReactDOM from 'react-dom';
import * as React from 'react';

DocumentEditorContainerComponent.Inject(Toolbar);
function App() {
  let container;
  let hosturl =
    'https://services.syncfusion.com/react/production/api/documenteditor/';

  function onDocumentChange() {
    let proxy = (container = DocumentEditorContainerComponent);
    //To detect the device
    let isMobileDevice = /Android|Windows Phone|webOS/i.test(
      navigator.userAgent
    );

    if (isMobileDevice) {
      proxy.restrictEditing = true;
      setTimeout(() => {
        proxy.documentEditor.fitPage('FitPageWidth');
      }, 50);
    } else {
      proxy.restrictEditing = false;
    }
  }
  return (
    <div className="App">
      <DocumentEditorContainerComponent
        id="container"
        ref={(scope) => {
          container = scope;
        }}
        style={{ height: '590px' }}
        enableToolbar={true}
        documentChange={onDocumentChange}
        serviceUrl={hosturl}
        height={'590px'}
      />
    </div>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));

The Web API hosted link https://services.syncfusion.com/react/production/api/documenteditor/ utilized in the Document 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

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