Scrolling zooming in EJ2 JavaScript Document editor control

26 Nov 202323 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.

index.js
index.html
var documenteditor = new ej.documenteditor.DocumentEditor({
    isReadOnly: false
});
documenteditor.appendTo('#DocumentEditor');
onLoadDefault();
documenteditor.scrollToPage(2);

 function onLoadDefault() {
    var 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();
}
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/fabric.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/fabric.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/fabric.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-lists/styles/fabric.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-navigations/styles/fabric.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/fabric.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-splitbuttons/styles/fabric.css" rel="stylesheet"> 

    
    
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="DocumentEditor">
        </div>
        <div id="page-fit-type-div"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</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.

index.js
index.html
var documenteditor = new ej.documenteditor.DocumentEditor({
  isReadOnly: false, serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/'
});
documenteditor.enableAllModules();
documenteditor.appendTo('#DocumentEditor');
onLoadDefaultDocument();
documenteditor.viewer.selection.goToPage(3);

function onLoadDefaultDocument() {
  var 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();
}
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/fabric.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/fabric.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/fabric.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-lists/styles/fabric.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-navigations/styles/fabric.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/fabric.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-splitbuttons/styles/fabric.css" rel="stylesheet"> 

    
    
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="DocumentEditor">
        </div>
        <div id="page-fit-type-div"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</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.

import { DocumentEditor } from '@syncfusion/ej2-documenteditor';

//Initialize the Document Editor module.
let documenteditor: DocumentEditor = new DocumentEditor({
    isReadOnly: false, serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/'
});

// Enable all the built in modules.
documenteditor.enableAllModules();

documenteditor.appendTo('#DocumentEditor');
//set zoom factor.
documenteditor.zoomFactor = 3;

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 { DocumentEditor } from '@syncfusion/ej2-documenteditor';
//Initialize the Document Editor module.
let documenteditor: DocumentEditor = new DocumentEditor({
    isReadOnly: false, serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/'
});

// Enable all the built in modules.
documenteditor.enableAllModules();

documenteditor.appendTo('#DocumentEditor');
//Set zoom factor to fit page width.
documenteditor.fitPage('FitPageWidth');

Zoom option using UI

The following code example shows how to provide zoom options in Document Editor.

index.js
index.html
var documenteditor = new ej.documenteditor.DocumentEditor({
  isReadOnly: false, serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/'
});
documenteditor.enableAllModules();
documenteditor.appendTo('#DocumentEditor');
var statusBarDiv = document.getElementById('page-fit-type-div');
var startPage = 1;
var label = document.createElement('label');
label.styles = 'margin-top: 6px;margin-right: 2px';
label.textContent = 'Page ';
statusBarDiv.appendChild(label);
var pageNumberLabel = document.createElement('label');
pageNumberLabel.id = 'documenteditor_page_no';
pageNumberLabel.style= 'text-transform:capitalize;white-space:pre;overflow:hidden;user-select:none;cursor:text;height:17px;max-width:150px';

var editablePageNumber = document.createElement('div');
pageNumberLabel.id= 'editablePageNumber';
pageNumberLabel.style= 'border: 1px solid #F1F1F1;display: inline-flex;height: 17px;padding: 0px 4px;';
pageNumberLabel.className= 'single-line e-de-pagenumber-text';
editablePageNumber.appendChild(pageNumberLabel);
updatePageNumber();
statusBarDiv.appendChild(editablePageNumber);
editablePageNumber.setAttribute('title', 'The current page number in the document. Click or tap to navigate specific page.');
var label1 = document.createElement('label');
label1.id = 'documenteditor_pagecount';
label1.styles = 'margin-left:2px;varter-spacing: 1.05px;';
label1.textContent = 'of';
statusBarDiv.appendChild(label1);
var pageCount = document.createElement('label');
pageCount.id = 'documenteditor_pagecount'
pageCount.style = 'margin-left:6px;varter-spacing: 1.05px;';
updatePageCount();
statusBarDiv.appendChild(pageCount);
var editorPageCount = undefined;
var zoom;
var zoomBtn = document.createElement('button');
zoomBtn.id= 'documenteditor-zoom';
zoomBtn.className = 'e-de-statusbar-zoom';
statusBarDiv.appendChild(zoomBtn);
zoomBtn.setAttribute('title', 'Zoom level. Click or tap to open the Zoom options.');
var 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',
  },
];
zoom = new ej.splitbuttons.DropDownButton({ content: '100%', items: items, select: onZoom }, zoomBtn);
editablePageNumber.addEventListener('click', updateDocumentEditorPageNumber);
editablePageNumber.addEventListener('keydown', onKeyDown);
editablePageNumber.addEventListener('blur', onBlur);
documenteditor.viewChange = function (e) {
  updatePageNumberOnViewChange(e);
};
documenteditor.contentChange = function () {
  //Set page count
  updatePageCount();
};
function updatePageNumberOnViewChange(args) {
  if (documenteditor.selection
    && documenteditor.selection.startPage >= args.startPage && documenteditor.selection.startPage <= args.endPage) {
    startPage = documenteditor.selection.startPage;
  } else {
    startPage = args.startPage;
  }
  updatePageNumber();
}
function onBlur() {
  if (editablePageNumber.textContent === '' || parseInt(editablePageNumber.textContent, 0) > editorPageCount) {
    updatePageNumber();
  }
  editablePageNumber.contentEditable = 'false';
}
function onKeyDown(e) {
  if (e.which === 13) {
    e.preventDefault();
    var pageNumber = parseInt(editablePageNumber.textContent, 0);
    if (pageNumber > editorPageCount) {
      updatePageNumber();
    } else {
      if (documenteditor.selection) {
        documenteditor.selection.goToPage(parseInt(editablePageNumber.textContent, 0));
      } else {
        documenteditor.scrollToPage(parseInt(editablePageNumber.textContent, 0));
      }
    }
    editablePageNumber.contentEditable = 'false';
    if (editablePageNumber.textContent === '') {
      updatePageNumber();
    }
  }
  if (e.which > 64) {
    e.preventDefault();
  }
}
function onZoom(args) {
  setZoomValue(args.item.text);
  updateZoomContent();
}
function setZoomValue(text) {
  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() {
  zoom.content = Math.round(documenteditor.zoomFactor * 100) + '%';
}
function updatePageNumber() {
  pageNumberLabel.textContent = startPage.toString();
}
function updatePageCount() {
  editorPageCount = documenteditor.pageCount;
  pageCount.textContent = editorPageCount.toString();
}
function updateDocumentEditorPageNumber() {
  var editablePageNumber = document.getElementById('editablePageNumber');
  editablePageNumber.contentEditable = 'true';
  editablePageNumber.focus();
  window.getSelection().selectAllChildren(editablePageNumber);
}
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/fabric.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/fabric.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/fabric.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-lists/styles/fabric.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-navigations/styles/fabric.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/fabric.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-splitbuttons/styles/fabric.css" rel="stylesheet"> 

    
    
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="DocumentEditor">
        </div>
        <div id="page-fit-type-div"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>