View in JavaScript DOCX Editor

28 Aug 20264 minutes to read

Web Layout

JavaScript DOCX Editor (Document Editor) allows you to change the view to web layout and print layout using the layoutType property with the supported LayoutType.

let docEdit: DocumentEditor = new DocumentEditor({ layoutType: 'Continuous'});

The default value of layoutType in the DocumentEditor component is Pages.

Online Demo

Explore how to view Word documents in web layout using the JavaScript (ES5) DOCX Editor in this live demo here.

Ruler

Use the ruler to set specific margins, tab stops, or indentations within a document to ensure consistent formatting in DOCX Editor.

The following example illustrates how to enable the ruler in DOCX Editor.

//Initialize Document Editor component.
var documenteditor = new ej.documenteditor.DocumentEditor({
    isReadOnly: false, height: '370px', serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/', documentEditorSettings: { showRuler: true }
});

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

document.getElementById('container_ruler_button').addEventListener('click',
    function () {
        documenteditor.documentEditorSettings.showRuler = !documenteditor.documentEditorSettings.showRuler;
    });

//Render Document Editor component.
documenteditor.appendTo('#DocumentEditor');
<!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">   
        <button id="container_ruler_button">Show/Hide Ruler</button>
        <div id="DocumentEditor" style="height:420px">
            
        </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>

Online Demo

Explore how to use the ruler in the JavaScript (ES5) DOCX Editor for working with Word documents in this live demo here.

Using the heading navigation pane allows users to swiftly navigate documents by heading, enhancing their ability to move through the document efficiently.

The following example illustrates how to enable the heading navigation pane in DOCX Editor.

let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px',
  // Enable the heading navigation pane in Document Editor.
  documentEditorSettings: {
    showNavigationPane: true,
  }
});
ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
container.serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';
container.appendTo('#container');

The Web API hosted link https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/ utilized in the DOCX Editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer to and reuse the GitHub Web Service example or Docker image for hosting your own web service and use for the serviceUrl property.

Online Demo

Explore how to navigate through headings in Word documents using the JavaScript (ES5) DOCX Editor in this live demo here.