View in EJ2 JavaScript Document editor control

22 Mar 20243 minutes to read

Web layout

DocumentEditor allows you to change the view to web layout and print using the layoutType property with the supported LayoutType.

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

Note: Default value of layoutType in DocumentEditor component is Pages.

Ruler

Using ruler we can refer to setting specific margins, tab stops, or indentations within a document to ensure consistent formatting in Document Editor.

The following example illustrates how to enable ruler in Document Editor

//Initialize Document Editor component.
var documenteditor = new ej.documenteditor.DocumentEditor({
    isReadOnly: false, height: '370px', serviceUrl: 'https://services.syncfusion.com/js/production/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/28.2.3/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/fabric.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/fabric.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-inputs/styles/fabric.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-lists/styles/fabric.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/styles/fabric.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-splitbuttons/styles/fabric.css" rel="stylesheet"> 
    
    
<script src="https://cdn.syncfusion.com/ej2/28.2.3/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>

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 heading navigation pane in Document Editor

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