React
Demos
Support
Forum
Download
Search results

Scrolling

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
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'));
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'));
<!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="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>
<style>

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
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'));
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'));
<!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="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>
<style>

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.

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'));
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.

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'));
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
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'));
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'));
<!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="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>
<style>
Previous
Next