Scrolling and Zooming in JavaScript DOCX Editor
18 Aug 202623 minutes to read
The JavaScript DOCX Editor (Document Editor) renders the document page by page. You can scroll through the pages using the mouse wheel or touch interactions. You can also scroll through the page by using the scrollToPage() method of the Document Editor instance. Refer to the following code example.
var documenteditor = new ej.documenteditor.DocumentEditor({
isReadOnly: false, enableEditor: true, height: '370px'
});
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/34.2.2/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/fabric.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/fabric.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/fabric.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-lists/styles/fabric.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/fabric.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/fabric.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-splitbuttons/styles/fabric.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/34.2.2/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>NOTE
Calling this method brings the specified page into view but does not move the selection. Hence this method will work by default. That is, it works even if the selection is not enabled.
If you wish to move the selection to any page in the Document Editor and bring it into view, you can use the goToPage() method of the selection instance. Refer to the following code example.
var documenteditor = new ej.documenteditor.DocumentEditor({
isReadOnly: false, serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/', height: '370px'
});
documenteditor.enableAllModules();
documenteditor.appendTo('#DocumentEditor');
onLoadDefaultDocument();
documenteditor.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/34.2.2/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/fabric.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/fabric.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/fabric.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-lists/styles/fabric.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/fabric.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/fabric.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-splitbuttons/styles/fabric.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/34.2.2/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 the Document Editor in a range from 10% to 500% of the actual size. You can achieve this using the mouse or touch interactions. You can also use the zoomFactor property of the Document Editor instance. The value can be specified in a range from 0.1 to 5. Refer to the following code example.
var documenteditor = new ej.documenteditor.DocumentEditor({
isReadOnly: false, serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/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 a value, the Document Editor provides the option to specify page fit options such as fit to full page or fit to page width. You can set this option using the fitPage method of the Document Editor instance. Refer to the following code example.
var documenteditor = new ej.documenteditor.DocumentEditor({
isReadOnly: false, serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/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 the Document Editor.
var documenteditor = new ej.documenteditor.DocumentEditor({
isReadOnly: false, serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/', height: '370px'
});
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/34.2.2/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/fabric.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/fabric.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/fabric.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-lists/styles/fabric.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/fabric.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/fabric.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-splitbuttons/styles/fabric.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/34.2.2/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>