View in React Document Editor Component

21 Mar 20247 minutes to read

Web Layout

Document Editor Container component allows you to change the view to web layout and print using the layoutType property with the supported LayoutType.

<DocumentEditorContainerComponent id="container" layoutType={'Continuous'} enableToolbar={true}/>

Note: Default value of layoutType in Document Editor Container 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

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { DocumentEditorComponent, Editor, Selection } from '@syncfusion/ej2-react-documenteditor';
DocumentEditorComponent.Inject(Editor, Selection);
function App() {
    let container;
    React.useEffect(() => {
        componentDidMount()
    }, []);
    function created() {
        container.documentEditorSettings.showRuler = true;     
    }
    function componentDidMount() {
        setTimeout(() => {
            created();
        });
    }
    function onClick() {
        container.documentEditorSettings.showRuler = !container.documentEditorSettings.showRuler;
    }
    return (<div>
        <button id='container_ruler_button' onClick={onClick}>Show/Hide Ruler</button>
        <DocumentEditorComponent id="container" height={'590px'} isReadOnly={false} ref={(scope) => {
            container = scope;
            created();
        }} enableEditor={true} enableSelection={true}
            serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/"
        />
    </div>
        
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('root'));
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { DocumentEditorComponent, Editor, Selection } from '@syncfusion/ej2-react-documenteditor';
DocumentEditorComponent.Inject(Editor, Selection);


function App() {
    let container: DocumentEditorComponent;
    React.useEffect(() => {
        componentDidMount()
    }, []);

    function created() {
        container.documentEditorSettings.showRuler = true;  
    }

    function componentDidMount() {
        setTimeout(() => {
            created();
        });
    }

    function onClick() {
        container.documentEditorSettings.showRuler = !container.documentEditorSettings.showRuler;
    }

    return ( <div>
        <button id='container_ruler_button' onClick={onClick}>Show/Hide Ruler</button>
        <DocumentEditorComponent id="container" height={'590px'} isReadOnly={false} ref={(scope) => {
            container = scope;
            created();
        }} enableEditor={true} enableSelection={true}
            serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/"
        />
    </div>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('root'));
<!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="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-lists/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Heading Navigation Pane

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 demonstrates how to enable the heading navigation pane in a document editor.

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
  DocumentEditorContainerComponent,
  Toolbar,
} from '@syncfusion/ej2-react-documenteditor';

DocumentEditorContainerComponent.Inject(Toolbar);
function App() {
  let settings =  {showNavigationPane: true};
  return (
    <DocumentEditorContainerComponent
      id="container"
      height={'590px'}
      serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/"
      enableToolbar={true}
      documentEditorSettings={settings}
    />
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('root'));