React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Scrolling and Zooming in React DocumentEditor component

24 Sep 2021 / 8 minutes to read

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

Source
Preview
index.jsx
index.tsx
index.html
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { DocumentEditorComponent, } from '@syncfusion/ej2-react-documenteditor';
export class Default extends React.Component {
    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',
                },
            ],
        };
        this.documenteditor.open(JSON.stringify(defaultDocument));
        this.documenteditor.focusIn();
    }
    componentDidMount() {
        setTimeout(() => {
            this.onLoadDefault();
            this.documenteditor.scrollToPage(2);
        });
    }
    render() {
        return (<DocumentEditorComponent id="DocumentEditor" ref={(scope) => { this.documenteditor = scope; }} isReadOnly={false}/>);
    }
}
ReactDOM.render(<Default />, document.getElementById('sample'));
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
  DocumentEditorComponent,
  DocumentEditor,
} from '@syncfusion/ej2-react-documenteditor';

export class Default extends React.Component<{}, {}> {
  public documenteditor: DocumentEditorComponent;

  onLoadDefault(): void {
    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',
        },
      ],
    };
    this.documenteditor.open(JSON.stringify(defaultDocument));
    this.documenteditor.focusIn();
  }

  public componentDidMount(): void {
    setTimeout(()=>{
    this.onLoadDefault();
    this.documenteditor.scrollToPage(2);
    });
  }
  render() {
    return (
      <DocumentEditorComponent id="DocumentEditor" ref={(scope) => { this.documenteditor = scope; }} isReadOnly={false} />
    );
  }
}
ReactDOM.render(<Default />, document.getElementById('sample'));
Copied to clipboard
<!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="//cdn.syncfusion.com/ej2/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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>
</head>

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

</html>

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.

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

Source
Preview
index.jsx
index.tsx
index.html
Copied to clipboard
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);
export class Default extends React.Component {
    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',
                },
            ],
        };
        this.documenteditor.open(JSON.stringify(defaultDocument));
        this.documenteditor.focusIn();
    }
    componentDidMount() {
        setTimeout(() => {
            this.onLoadDefaultDocument();
            this.documenteditor.viewer.selection.goToPage(3);
        });
    }
    render() {
        return (<DocumentEditorComponent id="container" ref={(scope) => {
            this.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}/>);
    }
}
ReactDOM.render(<Default />, document.getElementById('sample'));
Copied to clipboard
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
);

export class Default extends React.Component<{}, {}> {
  public documenteditor: DocumentEditorComponent;

  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',
        },
      ],
    };
    this.documenteditor.open(JSON.stringify(defaultDocument));
    this.documenteditor.focusIn();
  }

  public componentDidMount(): void {
    setTimeout(()=>{
    this.onLoadDefaultDocument();
    this.documenteditor.viewer.selection.goToPage(3);
    });
  }
  render() {
    return (
      <DocumentEditorComponent
        id="container"
        ref={(scope) => {
          this.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}
      />
    );
  }
}
ReactDOM.render(<Default />, document.getElementById('sample'));
Copied to clipboard
<!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="//cdn.syncfusion.com/ej2/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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>
</head>

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

</html>

Zooming

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

Copied to clipboard
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);

export class Default extends React.Component<{}, {}> {
  public documenteditor: DocumentEditorComponent;

  public componentDidMount(): void {
this.documenteditor.zoomFactor = 3;
  }
  render() {
return (
    <DocumentEditorComponent id="container" ref={(scope) => { this.documenteditor = scope; }} style={ width: '100%', height: '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} />
);
  }
}
ReactDOM.render(<Default />, document.getElementById('sample'));
Copied to clipboard
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);
export class Default extends React.Component {
    constructor() {
        super(...arguments);
        this.isReadOnly = { false:  };
        this.enablePrint = { true:  };
        this.enableSelection = { true:  };
        this.enableEditor = { true:  };
        this.enableEditorHistory = { true:  };
        this.enableContextMenu = { true:  };
        this.enableSearch = { true:  };
        this.enableOptionsPane = { true:  };
        this.enableBookmarkDialog = { true:  };
        this.enableBordersAndShadingDialog = { true:  };
        this.enableFontDialog = { true:  };
        this.enableTableDialog = { true:  };
        this.enableParagraphDialog = { true:  };
        this.enableHyperlinkDialog = { true:  };
        this.enableImageResizer = { true:  };
        this.enableListDialog = { true:  };
        this.enablePageSetupDialog = { true:  };
        this.enableSfdtExport = { true:  };
        this.enableStyleDialog = { true:  };
        this.enableTableOfContentsDialog = { true:  };
        this.enableTableOptionsDialog = { true:  };
        this.enableTablePropertiesDialog = { true:  };
        this.enableTextExport = { true:  };
        this.enableWordExport = { true:  } /  >
        ;
    }
    componentDidMount() {
        this.documenteditor.zoomFactor = 3;
    }
    render() {
        return (<DocumentEditorComponent id="container" ref={(scope) => { this.documenteditor = scope; }} style={width}/>);
        '100%', height;
        '100%';
    }
    ;
}
ReactDOM.render(<Default />, document.getElementById('sample'));

Page Fit Type

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

Copied to clipboard
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);
export class Default extends React.Component<{}, {}> {
  public documenteditor: DocumentEditorComponent;

  public componentDidMount(): void {
this.documenteditor.fitPage('Fit page width');
  }
  render() {
return (
   <DocumentEditorComponent id="container" ref={(scope) => { this.documenteditor = scope; }} style={ width: '100%', height: '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} />
);
  }
}
ReactDOM.render(<Default />, document.getElementById('sample'));
Copied to clipboard
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);
export class Default extends React.Component {
    constructor() {
        super(...arguments);
        this.isReadOnly = { false:  };
        this.enablePrint = { true:  };
        this.enableSelection = { true:  };
        this.enableEditor = { true:  };
        this.enableEditorHistory = { true:  };
        this.enableContextMenu = { true:  };
        this.enableSearch = { true:  };
        this.enableOptionsPane = { true:  };
        this.enableBookmarkDialog = { true:  };
        this.enableBordersAndShadingDialog = { true:  };
        this.enableFontDialog = { true:  };
        this.enableTableDialog = { true:  };
        this.enableParagraphDialog = { true:  };
        this.enableHyperlinkDialog = { true:  };
        this.enableImageResizer = { true:  };
        this.enableListDialog = { true:  };
        this.enablePageSetupDialog = { true:  };
        this.enableSfdtExport = { true:  };
        this.enableStyleDialog = { true:  };
        this.enableTableOfContentsDialog = { true:  };
        this.enableTableOptionsDialog = { true:  };
        this.enableTablePropertiesDialog = { true:  };
        this.enableTextExport = { true:  };
        this.enableWordExport = { true:  } /  >
        ;
    }
    componentDidMount() {
        this.documenteditor.fitPage('Fit page width');
    }
    render() {
        return (<DocumentEditorComponent id="container" ref={(scope) => { this.documenteditor = scope; }} style={width}/>);
        '100%', height;
        '100%';
    }
    ;
}
ReactDOM.render(<Default />, document.getElementById('sample'));

Zoom option using UI

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

Source
Preview
index.jsx
index.tsx
index.html
Copied to clipboard
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, } 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);
export class Default extends React.Component {
    constructor() {
        super(...arguments);
        this.startPage = 1;
        this.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',
            },
        ];
    }
    componentDidMount() {
        let instance = this;
        instance.pageCount = document.getElementById('documenteditor_pagecount');
        instance.editablePageNumber = document.getElementById('editablePageNumber');
        instance.pageNumberLabel = document.getElementById('documenteditor_page_no');
        instance.updatePageCount();
        instance.updatePageNumber();
        instance.documenteditor.viewChange = function (e) {
            instance.updatePageNumberOnViewChange(e);
        };
        instance.documenteditor.contentChange = function () {
            instance.updatePageCount();
        };
        instance.editablePageNumber.onclick = function () {
            instance.updateDocumentEditorPageNumber();
        };
        instance.editablePageNumber.onkeydown = function (e) {
            instance.onKeyDown(e);
        };
        instance.editablePageNumber.onblur = function () {
            instance.onBlur();
        };
    }
    updatePageNumberOnViewChange(args) {
        if (this.documenteditor.selection &&
            this.documenteditor.selection.startPage >= args.startPage &&
            this.documenteditor.selection.startPage <= args.endPage) {
            this.startPage = this.documenteditor.selection.startPage;
        }
        else {
            this.startPage = args.startPage;
        }
        this.updatePageNumber();
    }
    onBlur() {
        if (this.editablePageNumber.textContent === '' ||
            parseInt(this.editablePageNumber.textContent, 0) > this.editorPageCount) {
            this.updatePageNumber();
        }
        this.editablePageNumber.contentEditable = 'false';
    }
    onKeyDown(e) {
        if (e.which === 13) {
            e.preventDefault();
            var pageNumber = parseInt(this.editablePageNumber.textContent, 0);
            if (pageNumber > this.editorPageCount) {
                this.updatePageNumber();
            }
            else {
                if (this.documenteditor.selection) {
                    this.documenteditor.selection.goToPage(parseInt(this.editablePageNumber.textContent, 0));
                }
                else {
                    this.documenteditor.scrollToPage(parseInt(this.editablePageNumber.textContent, 0));
                }
            }
            this.editablePageNumber.contentEditable = 'false';
            if (this.editablePageNumber.textContent === '') {
                this.updatePageNumber();
            }
        }
        if (e.which > 64) {
            e.preventDefault();
        }
    }
    onZoom(args) {
        this.setZoomValue(args.item.text);
        this.updateZoomContent();
    }
    setZoomValue(text) {
        if (text.match('Fit one page')) {
            this.documenteditor.fitPage('FitOnePage');
        }
        else if (text.match('Fit page width')) {
            this.documenteditor.fitPage('FitPageWidth');
        }
        else {
            this.documenteditor.zoomFactor = parseInt(text, 0) / 100;
        }
    }
    updateZoomContent() {
        this.zoom.content = Math.round(this.documenteditor.zoomFactor * 100) + '%';
    }
    updatePageNumber() {
        this.pageNumberLabel.textContent = this.startPage.toString();
    }
    updatePageCount() {
        this.editorPageCount = this.documenteditor.pageCount;
        this.pageCount.textContent = this.editorPageCount.toString();
    }
    updateDocumentEditorPageNumber() {
        let editPageNumber = document.getElementById('editablePageNumber');
        editPageNumber.contentEditable = 'true';
        editPageNumber.focus();
        window.getSelection().selectAllChildren(editPageNumber);
    }
    render() {
        let label = {};
        return (<div>
            <DocumentEditorComponent id="container" ref={(scope) => {
            this.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}/>
            <div id="page-fit-type-div">
                <label id='page'> Page </label>
                <div id="editablePageNumber">
                    <label id="documenteditor_page_no"/>
                </div>
                <label id="of">of</label>
                <label id="documenteditor_pagecount"/>
                <DropDownButtonComponent ref={scope => { this.zoom = scope; }} items={this.items} cssClass="e-de-statusbar-zoom" select={this.onZoom.bind(this)}>                        100%          </DropDownButtonComponent>
            </div>
        </div>);
    }
}
ReactDOM.render(<Default />, document.getElementById('sample'));
Copied to clipboard
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';
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
);
export class Default extends React.Component<{}, {}> {
public documenteditor: DocumentEditorComponent;
public pageCount;
public editablePageNumber;
public editorPageCount;
public pageNumberLabel;
public startPage = 1;
public zoom;
public 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',
    },
];
public componentDidMount(): void {
    let instance: any = this;
    instance.pageCount = document.getElementById('documenteditor_pagecount');
    instance.editablePageNumber = document.getElementById('editablePageNumber');
    instance.pageNumberLabel = document.getElementById(
        'documenteditor_page_no'
    );

    instance.updatePageCount();
    instance.updatePageNumber();
    instance.documenteditor.viewChange = function (e) {
        instance.updatePageNumberOnViewChange(e);
    };
    instance.documenteditor.contentChange = function () {
        instance.updatePageCount();
    };
    instance.editablePageNumber.onclick = function () {
        instance.updateDocumentEditorPageNumber();
    };
    instance.editablePageNumber.onkeydown = function (e) {
        instance.onKeyDown(e);
    };
    instance.editablePageNumber.onblur = function () {
        instance.onBlur();
    };
}

updatePageNumberOnViewChange(args) {
    if (
        this.documenteditor.selection &&
        this.documenteditor.selection.startPage >= args.startPage &&
        this.documenteditor.selection.startPage <= args.endPage
    ) {
        this.startPage = this.documenteditor.selection.startPage;
    } else {
        this.startPage = args.startPage;
    }
    this.updatePageNumber();
}
onBlur() {
    if (
        this.editablePageNumber.textContent === '' ||
        parseInt(this.editablePageNumber.textContent, 0) > this.editorPageCount
    ) {
        this.updatePageNumber();
    }
    this.editablePageNumber.contentEditable = 'false';
}
onKeyDown(e) {
    if (e.which === 13) {
        e.preventDefault();
        var pageNumber = parseInt(this.editablePageNumber.textContent, 0);
        if (pageNumber > this.editorPageCount) {
            this.updatePageNumber();
        } else {
            if (this.documenteditor.selection) {
                this.documenteditor.selection.goToPage(
                    parseInt(this.editablePageNumber.textContent, 0)
                );
            } else {
                this.documenteditor.scrollToPage(
                    parseInt(this.editablePageNumber.textContent, 0)
                );
            }
        }
        this.editablePageNumber.contentEditable = 'false';
        if (this.editablePageNumber.textContent === '') {
            this.updatePageNumber();
        }
    }
    if (e.which > 64) {
        e.preventDefault();
    }
}
onZoom(args) {
    this.setZoomValue(args.item.text);
    this.updateZoomContent();
}
setZoomValue(text) {
    if (text.match('Fit one page')) {
        this.documenteditor.fitPage('FitOnePage');
    } else if (text.match('Fit page width')) {
        this.documenteditor.fitPage('FitPageWidth');
    } else {
        this.documenteditor.zoomFactor = parseInt(text, 0) / 100;
    }
}
updateZoomContent() {
    this.zoom.content = Math.round(this.documenteditor.zoomFactor * 100) + '%';
}
updatePageNumber() {
    this.pageNumberLabel.textContent = this.startPage.toString();
}
updatePageCount() {
    this.editorPageCount = this.documenteditor.pageCount;
    this.pageCount.textContent = this.editorPageCount.toString();
}
updateDocumentEditorPageNumber() {
    let editPageNumber = document.getElementById('editablePageNumber');
    editPageNumber.contentEditable = 'true';
    editPageNumber.focus();
    window.getSelection().selectAllChildren(editPageNumber);
}
render() {
    let label = {};
    return (
        <div>
            <DocumentEditorComponent
                id="container"
                ref={(scope) => {
                    this.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}
            />
            <div id="page-fit-type-div">
                <label id='page' > Page </label>
                <div id="editablePageNumber">
                    <label id="documenteditor_page_no" />
                </div>
                <label id="of">of</label>
                <label id="documenteditor_pagecount" />
                <DropDownButtonComponent ref={scope => { this.zoom = scope; }} items={this.items} cssClass="e-de-statusbar-zoom" select={this.onZoom.bind(this)}                    >                        100%          </DropDownButtonComponent>
            </div>
        </div>
    );
}
}
ReactDOM.render(<Default />, document.getElementById('sample'));
Copied to clipboard
<!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="//cdn.syncfusion.com/ej2/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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>
</head>

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

</html>
Previous
Next