Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
---
layout: post
title: Hide tool bar and properties pane in React Document editor component | Syncfusion
description: Learn here all about Hide tool bar and properties pane in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more.
control: Hide tool bar and properties pane
title: Hide toolbar and properties pane in React DOCX Editor | Syncfusion
description: Learn here all about Hide toolbar and properties pane in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more.
control: Hide toolbar and properties pane
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---

# Hide tool bar and properties pane in React Document editor component
# Hide toolbar and properties pane in React Document Editor component

**Document editor container** provides the main document view area along with the built-in toolbar and properties pane.
**Document Editor Container** provides the main document view area along with the built-in toolbar and properties pane.

**Document editor** provides just the main document view area. Here, the user can compose, view, and edit the Word documents. You may prefer to use this component when you want to design your own UI options for your application.
**Document Editor** provides just the main document view area. Here, the user can compose, view, and edit the Word documents. You may prefer to use this component when you want to design your own UI options for your application.

## Hide the properties pane

By default, Document editor container has built-in properties pane which contains options for formatting text, table, image and header and footer. You can use [`showPropertiesPane`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/documentEditorContainerModel#showpropertiespane) API in [`DocumentEditorContainer`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/documentEditorContainerModel/) to hide the properties pane.
By default, Document Editor Container has built-in properties pane which contains options for formatting text, tables, images, headers, and footers. You can use [`showPropertiesPane`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/documentEditorContainerModel#showpropertiespane) API in [`DocumentEditorContainer`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/documentEditorContainerModel) to hide the properties pane.

The following example code illustrates how to hide the properties pane.

Expand Down Expand Up @@ -44,13 +44,13 @@ ReactDOM.render(<App />, document.getElementById('sample'));

```

> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document 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 and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
N> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document 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 and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.

>Note: Positioning and customizing the properties pane in Document editor container is not possible. Instead, you can hide the exiting properties pane and create your own pane using public API's.
N> Positioning and customizing the properties pane in the Document Editor Container is not possible. Instead, you can hide the existing properties pane and create your own pane using public APIs.

## Hide the toolbar

You can use [`enableToolbar`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/documentEditorContainerModel#enabletoolbar) API in [`DocumentEditorContainer`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/documentEditorContainerModel/) to hide the existing toolbar.
You can use [`enableToolbar`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/documentEditorContainerModel#enabletoolbar) API in [`DocumentEditorContainer`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/documentEditorContainerModel) to hide the existing toolbar.

The following example code illustrates how to hide the existing toolbar.

Expand All @@ -70,12 +70,12 @@ function App() {
/>
);
}
export default App
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));

```

> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document 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 and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
N> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document 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 and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.

## See Also

Expand Down
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
---
layout: post
title: Insert page number and navigate in React Document editor | Syncfusion
description: Learn here all about Insert page number and navigate to page in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more.
control: Insert page number and navigate to page
title: Insert page number and navigate in React DOCX Editor | Syncfusion
description: Learn here all about Insert page number and navigate to page in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more.
control: Insert page number and navigate to page
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---

# Insert page number and navigate to page in React Document editor component
# Insert page number and navigate in React Document Editor

You can insert page number and navigate to specific page in [React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) component by following ways.
You can insert page number and navigate to specific page in [React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) component using the following ways.

## Insert page number

You can use [`insertPageNumber`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#insertpagenumber) API in editor module to insert the page number in current cursor position. By default, Page number will insert in Arabic number style. You can change it, by providing the number style in parameter.
You can use [`insertPageNumber`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#insertpagenumber) API in editor module to insert the page number in current cursor position. By default, the page number will be inserted in Arabic number style. You can change it by providing the number style in parameter.

>Note: Currently, Document Editor have options to insert page number at current cursor position.
N> Currently, Document Editor has options to insert page number at the current cursor position.

The following example code illustrates how to insert page number in header.

Expand Down Expand Up @@ -57,9 +57,9 @@ export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
```

> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document 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 and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
N> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document 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 and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.

Also, you use [`insertField`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#insertfield) API in Editor module to insert the Page number in current position
You can also use [`insertField`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#insertfield) API in Editor module to insert the page number in the current position.

```ts
//Current page number
Expand All @@ -68,9 +68,9 @@ this.container.documentEditor.editor.insertField('PAGE \* MERGEFORMAT', '1');

## Get page count

You can use [`pageCount`](https://ej2.syncfusion.com/react/documentation/api/document-editor#pagecount) API to gets the total number of pages in Document.
You can use [`pageCount`](https://ej2.syncfusion.com/react/documentation/api/document-editor#pagecount) API to get the total number of pages in the Document.

The following example code illustrates how to get the number of pages in Document.
The following example code illustrates how to get the number of pages in the Document.

```ts
import * as ReactDOM from 'react-dom';
Expand Down Expand Up @@ -107,7 +107,7 @@ ReactDOM.render(<App />, document.getElementById('sample'));

```

> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document 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 and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
N> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document 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 and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.

## Navigate to specific page

Expand Down Expand Up @@ -149,4 +149,4 @@ export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
```

> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document 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 and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
N> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document 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 and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
Loading