Scrolling and Zooming in React DOCX Editor

14 Aug 202624 minutes to read

The React DOCX Editor (Document Editor) renders the document page by page. You can scroll through the pages by mouse wheel or touch interactions. You can also scroll through the pages by using the scrollToPage() method of the document editor instance. Refer to the following code example.

index.jsx

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { DocumentEditorComponent, Selection, Editor } from '@syncfusion/ej2-react-documenteditor';
DocumentEditorComponent.Inject(Selection, Editor);
function App() {
    let documenteditor;
    React.useEffect(() => {
        componentDidMount();
    }, []);
    function onLoadDefault() {
        let defaultDocument = {
            sections: [
                {
                    blocks: [
                        {
                            paragraphFormat: {
                                styleName: 'Normal',
                            },
                            inlines: [
                                {
                                    text: 'First page',
                                },
                            ],
                        },
                    ],
                    headersFooters: {},
                },
                {
                    blocks: [
                        {
                            paragraphFormat: {
                                styleName: 'Normal',
                            },
                            inlines: [
                                {
                                    text: 'Second page',
                                },
                            ],
                        },
                    ],
                    headersFooters: {},
                },
            ],
            characterFormat: {},
            paragraphFormat: {},
            background: {
                color: '#FFFFFFFF',
            },
            styles: [
                {
                    type: 'Paragraph',
                    name: 'Normal',
                    next: 'Normal',
                },
                {
                    type: 'Character',
                    name: 'Default Paragraph Font',
                },
            ],
        };
        documenteditor.open(JSON.stringify(defaultDocument));
        documenteditor.focusIn();
    }
    function componentDidMount() {
        setTimeout(() => {
            //Load default document.
            onLoadDefault();
            //Scroll to specified page.
            documenteditor.scrollToPage(2);
        });
    }
    return (<DocumentEditorComponent id="DocumentEditor" height={'330px'} ref={(scope) => { documenteditor = scope; }} isReadOnly={false} enableEditor={true} />);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));

index.tsx

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { DocumentEditorComponent, Selection, Editor } from '@syncfusion/ej2-react-documenteditor';
DocumentEditorComponent.Inject(Selection, Editor);
function App() {
    let documenteditor: DocumentEditorComponent;
    React.useEffect(() => {
        componentDidMount()
    }, []);
    function onLoadDefault() {
        let defaultDocument: object = {
            sections: [
                {
                    blocks: [
                        {
                            paragraphFormat: {
                                styleName: 'Normal',
                            },
                            inlines: [
                                {
                                    text: 'First page',
                                },
                            ],
                        },
                    ],
                    headersFooters: {},
                },
                {
                    blocks: [
                        {
                            paragraphFormat: {
                                styleName: 'Normal',
                            },
                            inlines: [
                                {
                                    text: 'Second page',
                                },
                            ],
                        },
                    ],
                    headersFooters: {},
                },
            ],
            characterFormat: {},
            paragraphFormat: {},
            background: {
                color: '#FFFFFFFF',
            },
            styles: [
                {
                    type: 'Paragraph',
                    name: 'Normal',
                    next: 'Normal',
                },
                {
                    type: 'Character',
                    name: 'Default Paragraph Font',
                },
            ],
        };
        documenteditor.open(JSON.stringify(defaultDocument));
        documenteditor.focusIn();
    }

    function componentDidMount() {
        setTimeout(() => {
            //Load default document.
            onLoadDefault();
            //Scroll to specified page.
            documenteditor.scrollToPage(2);
        });
    }
    return (
        <DocumentEditorComponent id="DocumentEditor" height={'330px'} ref={(scope) => { documenteditor = scope; }} isReadOnly={false} enableEditor={true} />
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-lists/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/fabric.css" rel="stylesheet" /> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='sample'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

NOTE

Calling this method brings the specified page into view but doesn’t move selection. Hence this method will work by default. That is, it works even if selection is not enabled.

If you wish to move the selection to any page in the document editor and bring it into view, you can use the goToPage() method of the selection instance. Refer to the following code example.

index.jsx

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { DocumentEditorComponent, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog, } from '@syncfusion/ej2-react-documenteditor';
//Inject require modules.
DocumentEditorComponent.Inject(Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog);
function App() {
    let documenteditor;
    React.useEffect(() => {
        componentDidMount();
    }, []);
    function onLoadDefaultDocument() {
        let defaultDocument = {
            sections: [
                {
                    blocks: [
                        {
                            paragraphFormat: {
                                styleName: 'Normal',
                            },
                            inlines: [
                                {
                                    text: 'First page',
                                },
                            ],
                        },
                    ],
                    headersFooters: {},
                },
                {
                    blocks: [
                        {
                            paragraphFormat: {
                                styleName: 'Normal',
                            },
                            inlines: [
                                {
                                    text: 'Second page',
                                },
                            ],
                        },
                    ],
                    headersFooters: {},
                },
                {
                    blocks: [
                        {
                            paragraphFormat: {
                                styleName: 'Normal',
                            },
                            inlines: [
                                {
                                    text: 'Third page',
                                },
                            ],
                        },
                    ],
                    headersFooters: {},
                },
            ],
            characterFormat: {},
            paragraphFormat: {},
            background: {
                color: '#FFFFFFFF',
            },
            styles: [
                {
                    type: 'Paragraph',
                    name: 'Normal',
                    next: 'Normal',
                },
                {
                    type: 'Character',
                    name: 'Default Paragraph Font',
                },
            ],
        };
        documenteditor.open(JSON.stringify(defaultDocument));
        documenteditor.focusIn();
    }
    function componentDidMount() {
        setTimeout(() => {
            //Load default document.
            onLoadDefaultDocument();
            //Navigate to specified page.
            documenteditor.viewer.scrollToPage(3);
        });
    }
    return (<DocumentEditorComponent id="container" height={'330px'} ref={(scope) => {
            documenteditor = scope;
        }} isReadOnly={false} enablePrint={true} enableSelection={true} enableEditor={true} enableEditorHistory={true} enableContextMenu={true} enableSearch={true} enableOptionsPane={true} enableBookmarkDialog={true} enableBordersAndShadingDialog={true} enableFontDialog={true} enableTableDialog={true} enableParagraphDialog={true} enableHyperlinkDialog={true} enableImageResizer={true} enableListDialog={true} enablePageSetupDialog={true} enableSfdtExport={true} enableStyleDialog={true} enableTableOfContentsDialog={true} enableTableOptionsDialog={true} enableTablePropertiesDialog={true} enableTextExport={true} enableWordExport={true}/>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));

index.tsx

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { DocumentEditorComponent, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog } from '@syncfusion/ej2-react-documenteditor';

//Inject require modules.
DocumentEditorComponent.Inject(Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog);
function App() {
    let documenteditor: DocumentEditorComponent;
    React.useEffect(() => {
        componentDidMount()
    }, []);
    function onLoadDefaultDocument(): void {
        let defaultDocument: object = {
            sections: [
                {
                    blocks: [
                        {
                            paragraphFormat: {
                                styleName: 'Normal',
                            },
                            inlines: [
                                {
                                    text: 'First page',
                                },
                            ],
                        },
                    ],
                    headersFooters: {},
                },
                {
                    blocks: [
                        {
                            paragraphFormat: {
                                styleName: 'Normal',
                            },
                            inlines: [
                                {
                                    text: 'Second page',
                                },
                            ],
                        },
                    ],
                    headersFooters: {},
                },
                {
                    blocks: [
                        {
                            paragraphFormat: {
                                styleName: 'Normal',
                            },
                            inlines: [
                                {
                                    text: 'Third page',
                                },
                            ],
                        },
                    ],
                    headersFooters: {},
                },
            ],
            characterFormat: {},
            paragraphFormat: {},
            background: {
                color: '#FFFFFFFF',
            },
            styles: [
                {
                    type: 'Paragraph',
                    name: 'Normal',
                    next: 'Normal',
                },
                {
                    type: 'Character',
                    name: 'Default Paragraph Font',
                },
            ],
        };
        documenteditor.open(JSON.stringify(defaultDocument));
        documenteditor.focusIn();
    }

    function componentDidMount() {
        setTimeout(() => {
            //Load default document.
            onLoadDefaultDocument();
            //Navigate to specified page.
            documenteditor.viewer.scrollToPage(3);
        });
    }
    return (
        <DocumentEditorComponent
            id="container"
            height={'330px'}
            ref={(scope) => {
                documenteditor = scope;
            }}
            isReadOnly={false}
            enablePrint={true}
            enableSelection={true}
            enableEditor={true}
            enableEditorHistory={true}
            enableContextMenu={true}
            enableSearch={true}
            enableOptionsPane={true}
            enableBookmarkDialog={true}
            enableBordersAndShadingDialog={true}
            enableFontDialog={true}
            enableTableDialog={true}
            enableParagraphDialog={true}
            enableHyperlinkDialog={true}
            enableImageResizer={true}
            enableListDialog={true}
            enablePageSetupDialog={true}
            enableSfdtExport={true}
            enableStyleDialog={true}
            enableTableOfContentsDialog={true}
            enableTableOptionsDialog={true}
            enableTablePropertiesDialog={true}
            enableTextExport={true}
            enableWordExport={true}
        />
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-lists/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/fabric.css" rel="stylesheet" /> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='sample'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Zooming

You can scale the contents in the document editor ranging from 10% to 500% of the actual size. You can achieve this using mouse or touch interactions. You can also use the zoomFactor property of the document editor instance. The value can be specified in a range from 0.1 to 5. Refer to the following code example.

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
    DocumentEditorComponent, Print, SfdtExport, WordExport, TextExport,
    Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane,
    HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog,
    ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog,
    BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog,
} from '@syncfusion/ej2-react-documenteditor';

DocumentEditorComponent.Inject(Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog);

function App() {
    let documenteditor: DocumentEditorComponent;
    React.useEffect(() => {
        componentDidMount()
    }, []);
    function componentDidMount() {
        //Set zoom factor.
        documenteditor.zoomFactor = 3;
    }
    return (
        <DocumentEditorComponent id="container" ref={(scope) => { documenteditor = scope; }} height={'330px'} style={{
            width: '100%'
        }} isReadOnly={false} enablePrint={true} enableSelection={true} enableEditor={true} enableEditorHistory={true} enableContextMenu={true} enableSearch={true} enableOptionsPane={true} enableBookmarkDialog={true} enableBordersAndShadingDialog={true} enableFontDialog={true} enableTableDialog={true} enableParagraphDialog={true} enableHyperlinkDialog={true} enableImageResizer={true} enableListDialog={true} enablePageSetupDialog={true} enableSfdtExport={true} enableStyleDialog={true} enableTableOfContentsDialog={true} enableTableOptionsDialog={true} enableTablePropertiesDialog={true} enableTextExport={true} enableWordExport={true} />
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { DocumentEditorComponent, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog, } from '@syncfusion/ej2-react-documenteditor';
DocumentEditorComponent.Inject(Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog);
function App() {
    let documenteditor;
    React.useEffect(() => {
        componentDidMount();
    }, []);
    function componentDidMount() {
        //Set zoom factor.
        documenteditor.zoomFactor = 3;
    }
    return (<DocumentEditorComponent id="container" ref={(scope) => { documenteditor = scope; }} height={'330px'} style={{
            width: '100%'
        }} isReadOnly={false} enablePrint={true} enableSelection={true} enableEditor={true} enableEditorHistory={true} enableContextMenu={true} enableSearch={true} enableOptionsPane={true} enableBookmarkDialog={true} enableBordersAndShadingDialog={true} enableFontDialog={true} enableTableDialog={true} enableParagraphDialog={true} enableHyperlinkDialog={true} enableImageResizer={true} enableListDialog={true} enablePageSetupDialog={true} enableSfdtExport={true} enableStyleDialog={true} enableTableOfContentsDialog={true} enableTableOptionsDialog={true} enableTablePropertiesDialog={true} enableTextExport={true} enableWordExport={true}/>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));

Page Fit Type

Apart from specifying the zoom factor as a value, the Document Editor provides an option to specify page fit options such as fit to full page or fit to page width. You can set this option using the fitPage method of the document editor instance. Refer to the following code example.

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
    DocumentEditorComponent, DocumentEditor, Print, SfdtExport, WordExport, TextExport,
    Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane,
    HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog,
    ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog,
    BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog,
} from '@syncfusion/ej2-react-documenteditor';

DocumentEditorComponent.Inject(Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog);
function App() {
    let documenteditor: DocumentEditorComponent;
    React.useEffect(() => {
        componentDidMount()
    }, []);
    function componentDidMount(): void {
        documenteditor.fitPage('FitPageWidth');
    }
    return (
        <DocumentEditorComponent id="container" ref={(scope) => { documenteditor = scope; }} height={'330px'} style={{ width: '100%' }} isReadOnly={false} enablePrint={true} enableSelection={true} enableEditor={true} enableEditorHistory={true} enableContextMenu={true} enableSearch={true} enableOptionsPane={true} enableBookmarkDialog={true} enableBordersAndShadingDialog={true} enableFontDialog={true} enableTableDialog={true} enableParagraphDialog={true} enableHyperlinkDialog={true} enableImageResizer={true} enableListDialog={true} enablePageSetupDialog={true} enableSfdtExport={true} enableStyleDialog={true} enableTableOfContentsDialog={true} enableTableOptionsDialog={true} enableTablePropertiesDialog={true} enableTextExport={true} enableWordExport={true} />
    );

}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { DocumentEditorComponent, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog, } from '@syncfusion/ej2-react-documenteditor';
DocumentEditorComponent.Inject(Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog);
function App() {
    let documenteditor;
    React.useEffect(() => {
        componentDidMount();
    }, []);
    function componentDidMount() {
        documenteditor.fitPage('FitPageWidth');
    }
    return (<DocumentEditorComponent id="container" ref={(scope) => { documenteditor = scope; }} height={'330px'} style={{ width: '100%' }} isReadOnly={false} enablePrint={true} enableSelection={true} enableEditor={true} enableEditorHistory={true} enableContextMenu={true} enableSearch={true} enableOptionsPane={true} enableBookmarkDialog={true} enableBordersAndShadingDialog={true} enableFontDialog={true} enableTableDialog={true} enableParagraphDialog={true} enableHyperlinkDialog={true} enableImageResizer={true} enableListDialog={true} enablePageSetupDialog={true} enableSfdtExport={true} enableStyleDialog={true} enableTableOfContentsDialog={true} enableTableOptionsDialog={true} enableTablePropertiesDialog={true} enableTextExport={true} enableWordExport={true}/>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));

Zoom option using UI

The following code example shows how to provide zoom options in the document editor.

index.jsx

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
  DocumentEditorComponent,
  Print,
  SfdtExport,
  WordExport,
  TextExport,
  Selection,
  Search,
  Editor,
  ImageResizer,
  EditorHistory,
  ContextMenu,
  OptionsPane,
  HyperlinkDialog,
  TableDialog,
  BookmarkDialog,
  TableOfContentsDialog,
  PageSetupDialog,
  StyleDialog,
  ListDialog,
  ParagraphDialog,
  BulletsAndNumberingDialog,
  FontDialog,
  TablePropertiesDialog,
  BordersAndShadingDialog,
  TableOptionsDialog,
  CellOptionsDialog,
  StylesDialog,
} from '@syncfusion/ej2-react-documenteditor';
import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';

DocumentEditorComponent.Inject(Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog);

function App() {
  const documentEditorRef = React.useRef(null);
  const pageCountRef = React.useRef(null);
  const editablePageNumberRef = React.useRef(null);
  const pageNumberLabelRef = React.useRef(null);
  const zoomRef = React.useRef(null);
  let startPage = 1;
  let editorPageCount;

  const items = [
    { text: '200%' },
    { text: '175%' },
    { text: '150%' },
    { text: '125%' },
    { text: '100%' },
    { text: '75%' },
    { text: '50%' },
    { text: '25%' },
    { separator: true },
    { text: 'Fit one page' },
    { text: 'Fit page width' },
  ];

  React.useEffect(() => {
    const documenteditor = documentEditorRef.current;

    if (documenteditor) {
      documenteditor.viewChange = (e) => updatePageNumberOnViewChange(e);
      documenteditor.contentChange = () => updatePageCount();

      if (editablePageNumberRef.current) {
        editablePageNumberRef.current.onclick = () => updateDocumentEditorPageNumber();
        editablePageNumberRef.current.onkeydown = (e) => onKeyDown(e);
        editablePageNumberRef.current.onblur = () => onBlur();
      }

      updatePageCount();
      updatePageNumber();
    }
  }, []);

  function updatePageNumberOnViewChange(args) {
    const documenteditor = documentEditorRef.current;
    if (
      documenteditor.selection &&
      documenteditor.selection.startPage >= args.startPage &&
      documenteditor.selection.startPage <= args.endPage
    ) {
      startPage = documenteditor.selection.startPage;
    } else {
      startPage = args.startPage;
    }
    updatePageNumber();
  }

  function onBlur() {
    const editablePageNumber = editablePageNumberRef.current;
    if (
      editablePageNumber.textContent === '' ||
      parseInt(editablePageNumber.textContent, 0) > editorPageCount
    ) {
      updatePageNumber();
    }
    editablePageNumber.contentEditable = 'false';
  }

  function onKeyDown(e) {
    const documenteditor = documentEditorRef.current;
    const editablePageNumber = editablePageNumberRef.current;
    if (e.which === 13) {
      e.preventDefault();
      const pageNumber = parseInt(editablePageNumber.textContent, 0);
      if (pageNumber > editorPageCount) {
        updatePageNumber();
      } else {
        if (documenteditor.selection) {
          documenteditor.selection.goToPage(pageNumber);
        } else {
          documenteditor.scrollToPage(pageNumber);
        }
      }
      editablePageNumber.contentEditable = 'false';
      if (editablePageNumber.textContent === '') {
        updatePageNumber();
      }
    }
    if (e.which > 64) {
      e.preventDefault();
    }
  }

  function onZoom(args) {
    setZoomValue(args.item.text);
    updateZoomContent();
  }

  function setZoomValue(text) {
    const documenteditor = documentEditorRef.current;
    if (text.match('Fit one page')) {
      documenteditor.fitPage('FitOnePage');
    } else if (text.match('Fit page width')) {
      documenteditor.fitPage('FitPageWidth');
    } else {
      documenteditor.zoomFactor = parseInt(text, 0) / 100;
    }
  }

  function updateZoomContent() {
    if (zoomRef.current) {
      zoomRef.current.content = Math.round(documentEditorRef.current.zoomFactor * 100) + '%';
    }
  }

  function updatePageNumber() {
    if (pageNumberLabelRef.current) {
      pageNumberLabelRef.current.textContent = startPage.toString();
    }
  }

  function updatePageCount() {
    const documenteditor = documentEditorRef.current;
    editorPageCount = documenteditor.pageCount;
    if (pageCountRef.current) {
      pageCountRef.current.textContent = editorPageCount.toString();
    }
  }

  function updateDocumentEditorPageNumber() {
    const editPageNumber = editablePageNumberRef.current;
    if (editPageNumber) {
      editPageNumber.contentEditable = 'true';
      editPageNumber.focus();
      window.getSelection().selectAllChildren(editPageNumber);
    }
  }

  return (
    <div>
      <DocumentEditorComponent
        id="container"
        height={'330px'}
        ref={documentEditorRef}
        isReadOnly={false}
        enablePrint={true}
        enableSelection={true}
        enableEditor={true}
        enableEditorHistory={true}
        enableContextMenu={true}
        enableSearch={true}
        enableOptionsPane={true}
        enableBookmarkDialog={true}
        enableBordersAndShadingDialog={true}
        enableFontDialog={true}
        enableTableDialog={true}
        enableParagraphDialog={true}
        enableHyperlinkDialog={true}
        enableImageResizer={true}
        enableListDialog={true}
        enablePageSetupDialog={true}
        enableSfdtExport={true}
        enableStyleDialog={true}
        enableTableOfContentsDialog={true}
        enableTableOptionsDialog={true}
        enableTablePropertiesDialog={true}
        enableTextExport={true}
        enableWordExport={true}
      />
      <div id="page-fit-type-div">
        <label id="page"> Page </label>
        <div id="editablePageNumber" ref={editablePageNumberRef}>
          <label id="documenteditor_page_no" ref={pageNumberLabelRef} />
        </div>
        <label id="of">of</label>
        <label id="documenteditor_pagecount" ref={pageCountRef} />
        <DropDownButtonComponent
          ref={zoomRef}
          items={items}
          cssClass="e-de-statusbar-zoom"
          select={onZoom}
        >
          100%
        </DropDownButtonComponent>
      </div>
    </div>
  );
}

export default App;

ReactDOM.render(<App />, document.getElementById('sample'));

index.tsx

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
  DocumentEditorComponent,
  Print,
  SfdtExport,
  WordExport,
  TextExport,
  Selection,
  Search,
  Editor,
  ImageResizer,
  EditorHistory,
  ContextMenu,
  OptionsPane,
  HyperlinkDialog,
  TableDialog,
  BookmarkDialog,
  TableOfContentsDialog,
  PageSetupDialog,
  StyleDialog,
  ListDialog,
  ParagraphDialog,
  BulletsAndNumberingDialog,
  FontDialog,
  TablePropertiesDialog,
  BordersAndShadingDialog,
  TableOptionsDialog,
  CellOptionsDialog,
  StylesDialog,
} from '@syncfusion/ej2-react-documenteditor';
import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';
DocumentEditorComponent.Inject(
  Print,
  SfdtExport,
  WordExport,
  TextExport,
  Selection,
  Search,
  Editor,
  ImageResizer,
  EditorHistory,
  ContextMenu,
  OptionsPane,
  HyperlinkDialog,
  TableDialog,
  BookmarkDialog,
  TableOfContentsDialog,
  PageSetupDialog,
  StyleDialog,
  ListDialog,
  ParagraphDialog,
  BulletsAndNumberingDialog,
  FontDialog,
  TablePropertiesDialog,
  BordersAndShadingDialog,
  TableOptionsDialog,
  CellOptionsDialog,
  StylesDialog
);
function App() {
  const documentEditorRef = React.useRef<DocumentEditorComponent | null>(null);
  const pageCountRef = React.useRef<HTMLLabelElement | null>(null);
  const editablePageNumberRef = React.useRef<HTMLDivElement | null>(null);
  const pageNumberLabelRef = React.useRef<HTMLLabelElement | null>(null);
  const zoomRef = React.useRef<DropDownButtonComponent | null>(null);
  let startPage = 1;
  let editorPageCount: number;
  const items: ItemModel[] = [
    { text: '200%' },
    { text: '175%' },
    { text: '150%' },
    { text: '125%' },
    { text: '100%' },
    { text: '75%' },
    { text: '50%' },
    { text: '25%' },
    { separator: true },
    { text: 'Fit one page' },
    { text: 'Fit page width' },
  ];
  React.useEffect(() => {
    const documenteditor = documentEditorRef.current;
    if (documenteditor) {
      documenteditor.viewChange = (e: any) => updatePageNumberOnViewChange(e);
      documenteditor.contentChange = () => updatePageCount();
      if (editablePageNumberRef.current) {
        editablePageNumberRef.current.onclick = () => updateDocumentEditorPageNumber();
        editablePageNumberRef.current.onkeydown = (e: any) => onKeyDown(e);
        editablePageNumberRef.current.onblur = () => onBlur();
      }
      updatePageCount();
      updatePageNumber();
    }
  }, []);
  function updatePageNumberOnViewChange(args: any) {
    const documenteditor = documentEditorRef.current;
    if (
      documenteditor && documenteditor.selection &&
      documenteditor.selection.startPage >= args.startPage &&
      documenteditor.selection.startPage <= args.endPage
    ) {
      startPage = documenteditor.selection.startPage;
    } else {
      startPage = args.startPage;
    }
    updatePageNumber();
  }
  
  function onBlur() {
    const editablePageNumber = editablePageNumberRef.current;
    if (
      editablePageNumber &&
      (
        editablePageNumber.textContent === '' ||
        parseInt(editablePageNumber.textContent || '0', 10) > editorPageCount
      )
    ) {
      updatePageNumber();
    }
    if (editablePageNumber) {
      editablePageNumber.contentEditable = 'false';
    }
  }

  function onKeyDown(e: any) {
    const documenteditor = documentEditorRef.current;
    const editablePageNumber = editablePageNumberRef.current;
    if (e.which === 13) {
      e.preventDefault();
      const pageNumber = parseInt(editablePageNumber ? (editablePageNumber.textContent || '0') : '0', 0);
      if (pageNumber > editorPageCount) {
        updatePageNumber();
      } else {
        if (documenteditor && documenteditor.selection) {
          documenteditor.selection.goToPage(pageNumber);
        } else {
          if (documenteditor) { documenteditor.scrollToPage(pageNumber); }
        }
      }
      if (editablePageNumber) editablePageNumber.contentEditable = 'false';
      if (editablePageNumber && editablePageNumber.textContent === '') {
        updatePageNumber();
      }
    }
    if (e.which > 64) {
      e.preventDefault();
    }
  }
  function onZoom(args: any) {
    setZoomValue(args.item.text);
    updateZoomContent();
  }
  function setZoomValue(text: string) {
    const documenteditor = documentEditorRef.current;
    if (text.match('Fit one page')) {
      if (documenteditor) { documenteditor.fitPage('FitOnePage'); }
    } else if (text.match('Fit page width')) {
      if (documenteditor) { documenteditor.fitPage('FitPageWidth'); }
    } else if (documenteditor) {
      documenteditor.zoomFactor = parseInt(text, 0) / 100;
    }
  }
  function updateZoomContent() {
    if (zoomRef.current && documentEditorRef.current) {
      zoomRef.current.content =
        Math.round(documentEditorRef.current.zoomFactor * 100) + '%';
    }
  }
  function updatePageNumber() {
    if (pageNumberLabelRef.current) {
      pageNumberLabelRef.current.textContent = startPage.toString();
    }
  }
  function updatePageCount() {
    const documenteditor = documentEditorRef.current;
    editorPageCount = documenteditor ? documenteditor.pageCount : 0;
    if (pageCountRef.current) {
      pageCountRef.current.textContent = editorPageCount.toString();
    }
  }
  function updateDocumentEditorPageNumber() {
    const editPageNumber = editablePageNumberRef.current;
    if (editPageNumber) {
      editPageNumber.contentEditable = 'true';
      editPageNumber.focus();
      const selection = window.getSelection();
      if (selection) { selection.selectAllChildren(editPageNumber); }
    }
  }
  return (
    <div>
      <DocumentEditorComponent
        id="container"
        height="330px"
        ref={documentEditorRef}
        isReadOnly={false}
        enablePrint={true}
        enableSelection={true}
        enableEditor={true}
        enableEditorHistory={true}
        enableContextMenu={true}
        enableSearch={true}
        enableOptionsPane={true}
        enableBookmarkDialog={true}
        enableBordersAndShadingDialog={true}
        enableFontDialog={true}
        enableTableDialog={true}
        enableParagraphDialog={true}
        enableHyperlinkDialog={true}
        enableImageResizer={true}
        enableListDialog={true}
        enablePageSetupDialog={true}
        enableSfdtExport={true}
        enableStyleDialog={true}
        enableTableOfContentsDialog={true}
        enableTableOptionsDialog={true}
        enableTablePropertiesDialog={true}
        enableTextExport={true}
        enableWordExport={true}
      />
      <div id="page-fit-type-div">
        <label id="page">Page </label>
        <div id="editablePageNumber" ref={editablePageNumberRef}>
          <label id="documenteditor_page_no" ref={pageNumberLabelRef} />
        </div>
        <label id="of">of</label>
        <label id="documenteditor_pagecount" ref={pageCountRef} />
        <DropDownButtonComponent
          ref={zoomRef}
          items={items}
          cssClass="e-de-statusbar-zoom"
          select={onZoom}
        >
          100%
        </DropDownButtonComponent>
      </div>
    </div>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-lists/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/fabric.css" rel="stylesheet" /> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='sample'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>