Skip to content
Merged
Original file line number Diff line number Diff line change
@@ -1,71 +1,71 @@
---
layout: post
title: Header footer in JavaScript (ES6) Document editor control | Syncfusion
description: Learn here all about Header footer in Syncfusion JavaScript (ES6) Document editor control of Syncfusion Essential JS 2 and more.
title: Header and Footer in JavaScript (ES6) DOCX Editor control | Syncfusion
description: Learn here all about Header and Footer in Syncfusion JavaScript (ES6) Document Editor control of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Header footer
control: Header and Footer
documentation: ug
domainurl: ##DomainURL##
---

# Header footer in JavaScript (ES6) Document editor control
# Header and Footer in JavaScript (ES6) Document Editor control

[TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) supports headers and footers in its document. Each section in the document can have the following types of headers and footers:
[TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) supports headers and footers in a document. Each section in the document can have the following types of headers and footers:

* First page: Used only on the first page of the section.
* Even pages: Used on all even numbered pages in the section.
* Even pages: Used on all even-numbered pages in the section.
* Default: Used on all pages of the section, where first or even pages are not applicable or not specified.

You can define this by setting format properties of the corresponding section using the following sample code.
You can define this by setting the format properties of the corresponding section using the following sample code.

```ts
//Defines whether different header footer is required for first page of the section
documenteditor.selection.sectionFormat.differentFirstPage = true;
//Defines whether different header footer is required for odd and even pages in the section
documenteditor.selection.sectionFormat.differentOddAndEvenPages = true;
//Defines whether a different header and footer is required for the first page of the section
documentEditor.selection.sectionFormat.differentFirstPage = true;
//Defines whether a different header and footer is required for odd and even pages in the section
documentEditor.selection.sectionFormat.differentOddAndEvenPages = true;
```

## Go to header footer region
## Go to header or footer region

Double click in header or footer region to move the selection into it. You can also do this by using the following code.
Double-click in the header or footer region to move the selection into it. You can also do this by using the following code.

```ts
documenteditor.selection.goToHeader();
documentEditor.selection.goToHeader();
```

```ts
documenteditor.selection.goToFooter();
documentEditor.selection.goToFooter();
```

## Header and footer distance

You can define the distance of header region content from the top of the page. Refer to the following sample code.
You can define the distance of the header region content from the top of the page. Refer to the following sample code.

```ts
documenteditor.selection.sectionFormat.headerDistance= 36;
documentEditor.selection.sectionFormat.headerDistance = 36;
```

Same way, you can define the distance of footer region content from the bottom of the page. Refer to the following sample code.
Similarly, you can define the distance of the footer region content from the bottom of the page. Refer to the following sample code.

```ts
documenteditor.selection.sectionFormat.footerDistace=36;
documentEditor.selection.sectionFormat.footerDistance = 36;
```

## Close header footer region
## Close header and footer region

Move the selection to the document body from header or footer region by double clicking or tapping the document area. You can also perform this by using the following sample code.
Move the selection to the document body from the header or footer region by double-clicking or tapping the document area. You can also perform this by using the following sample code.

```ts
documenteditor.selection.closeHeaderFooter()
documentEditor.selection.closeHeaderFooter();
```

## Link to previous

Link to previous is enabled by default when document has more than one section. If you're using different headers and footers such as different first page or different odd and even pages, they can't be linked together because they're all separate.
Link to Previous is enabled by default when a document has more than one section. If you're using different headers and footers, such as a different first page or different odd and even pages, they can't be linked together because they're all separate.

Before setting or getting the link to previous value, use the ['goToHeader'](https://ej2.syncfusion.com/documentation/api/document-editor/selection#gotoheader) or ['goToFooter'](https://ej2.syncfusion.com/documentation/api/document-editor/selection#gotofooter) API to move the current selection to the header or footer region.
Before setting or getting the `linkToPrevious` value, use the [`goToHeader`](https://ej2.syncfusion.com/documentation/api/document-editor/selection#gotoheader) or [`goToFooter`](https://ej2.syncfusion.com/documentation/api/document-editor/selection#gotofooter) API to move the current selection to the header or footer region.

You can get or set the default header footer link to previous value of a section at cursor position by using the following sample code.
You can get or set the default header and footer link to previous value of a section at the cursor position by using the following sample code.

```typescript
container.documentEditor.selection.sectionFormat.oddPageHeader.linkToPrevious = false;
Expand All @@ -84,11 +84,11 @@ container.documentEditor.selection.sectionFormat.evenPageHeader.linkToPrevious =
container.documentEditor.selection.sectionFormat.evenPageFooter.linkToPrevious = false;
```

>Note: When there is more than one section in the document, the Link to Previous option becomes available. By default, this feature is disabled state in UI and set to return false for the first section.
N> When there is more than one section in the document, the Link to Previous option becomes available. By default, this feature is disabled in the UI and set to return false for the first section.

## Online Demo

Explore how to add and customize headers and footers in Word documents using the JavaScript Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/javascript/#/material3/document-editor/headers-and-footers.html).
Explore how to add and customize headers and footers in Word documents using the JavaScript DOCX Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/javascript/#/material3/document-editor/headers-and-footers.html).

## See Also

Expand Down
22 changes: 11 additions & 11 deletions Document-Processing/Word/Word-Processor/javascript-es6/history.md
Original file line number Diff line number Diff line change
@@ -1,40 +1,40 @@
---
layout: post
title: History in JavaScript (ES6) Document editor control | Syncfusion
description: Learn here all about History in Syncfusion JavaScript (ES6) Document editor control of Syncfusion Essential JS 2 and more.
title: History in JavaScript (ES6) DOCX Editor control | Syncfusion
description: Learn here all about History in Syncfusion JavaScript (ES6) Document Editor control of Syncfusion Essential JS 2 and more.
platform: document-processing
control: History
control: History
documentation: ug
domainurl: ##DomainURL##
---

# History in JavaScript (ES6) Document editor control
# History in JavaScript (ES6) Document Editor control

[TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) tracks the history of all editing actions done in the document, which allows undo and redo functionality.
[TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) tracks the history of all editing actions performed in the document, enabling undo and redo functionality.

## Enable or disable history

Inject the EditorHistory module in your application to provide history preservation functionality for DocumentEditor. Refer to the following code example.
Inject the `EditorHistory` module in your application to provide history preservation functionality for the `DocumentEditor`. Refer to the following code example.

```ts
//Inject require modules.
//Inject required modules.
DocumentEditor.Inject(Editor, Selection, EditorHistory);
let editor: DocumentEditor = new DocumentEditor({ enableEditor: true, isReadOnly: false });
//Enable editor history module.
editor.enableEditorHistory = true;
```

You can enable or disable history preservation for a Document Editor instance any time using the enableEditorHistory property. Refer to the following sample code.
You can enable or disable history preservation for a Document Editor instance at any time using the `enableEditorHistory` property. Refer to the following sample code.

```ts
editor.enableEditorHistory = false;
```

## Undo and redo

You can perform undo and redo by ‘CTRL+Z’ and ‘CTRL+Y’ keyboard shortcuts. Document Editor exposes API to do it programmatically.
You can perform undo and redo using the `Ctrl + Z` and `Ctrl + Y` keyboard shortcuts. The Document Editor exposes an API to do it programmatically.

To undo the last editing operation in Document Editor, refer to the following sample code.
To undo the last editing operation in the Document Editor, refer to the following sample code.

```ts
editor.editorHistory.undo();
Expand All @@ -48,7 +48,7 @@ editor.editorHistory.redo();

## Stack size

History of editing actions will be maintained in stack, so that the last item will be reverted first. By default, Document Editor limits the size of undo and redo stacks to 500 each respectively. However, you can customize this limit. Refer to the following sample code.
History of editing actions will be maintained in a stack, so that the last item will be reverted first. By default, the Document Editor limits the size of undo and redo stacks to 500 each, respectively. However, you can customize this limit. Refer to the following sample code.

```ts
//Set undo limit.
Expand Down
16 changes: 8 additions & 8 deletions Document-Processing/Word/Word-Processor/javascript-es6/how-to.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
---
layout: post
title: How to in JavaScript (ES6) Document editor control | Syncfusion
description: Learn here all about How to in Syncfusion JavaScript (ES6) Document editor control of Syncfusion Essential JS 2 and more.
title: How to in JavaScript (ES6) DOCX Editor control | Syncfusion
description: Learn here all about How to in Syncfusion JavaScript (ES6) Document Editor control of Syncfusion Essential JS 2 and more.
platform: document-processing
control: How to
control: How to
documentation: ug
domainurl: ##DomainURL##
---

# How to in JavaScript (ES6) Document editor control
# How to in JavaScript (ES6) Document Editor control

[TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) triggers the [`keyDown`](https://ej2.syncfusion.com/documentation/api/document-editor/documentEditorKeyDownEventArgs/) event every time when any key is entered and provides an instance of `DocumentEditorKeyDownEventArgs`. You can use the `isHandled` property to override the keyboard shortcut behavior.
[TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) triggers the [`keyDown`](https://ej2.syncfusion.com/documentation/api/document-editor/documentEditorKeyDownEventArgs) event every time a key is pressed and provides an instance of `DocumentEditorKeyDownEventArgs`. You can use the `isHandled` property to override the keyboard shortcut behavior.

## Preventing default keyboard shortcut

The following code shows how to prevent the `CTRL + C` keyboard shortcut for copying selected content in Document Editor.
The following code shows how to prevent the `Ctrl + C` keyboard shortcut for copying selected content in the Document Editor.



Expand All @@ -31,9 +31,9 @@ The following code shows how to prevent the `CTRL + C` keyboard shortcut for cop

## Override or define the keyboard shortcut

Override or define a new keyboard shortcut behavior instead of preventing the keyboard shortcut.
You can override or define a new keyboard shortcut behavior instead of preventing the keyboard shortcut.

For example, `Ctrl + S` keyboard shortcut saves the document in SFDT format by default, and there is no behavior for `Ctrl + Alt + S`. The following code demonstrates how to override the `Ctrl + S` shortcut to save a document in DOCX format and define `Ctrl + Alt + S` to save the document in SFDT format.
For example, `Ctrl + S` keyboard shortcut saves the document in SFDT format by default, and there is no behavior for `Ctrl + Alt + S`. The following code demonstrates how to override the `Ctrl + S` shortcut to save the document in DOCX format and define `Ctrl + Alt + S` to save the document in SFDT format.



Expand Down
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
---
layout: post
title: Change the default search highlight color in JavaScript (ES6) Document editor control | Syncfusion
description: Learn here all about Change the default search highlight color in Syncfusion JavaScript (ES6) Document editor control of Syncfusion Essential JS 2 and more.
title: Search Highlight Color in JavaScript (ES6) DOCX Editor | Syncfusion
description: Learn how to change the default search highlight color in Syncfusion JavaScript (ES6) Document Editor using the searchHighlightColor setting.
platform: document-processing
control: Change the default search highlight color
control: Change the Default Search Highlight Color
documentation: ug
domainurl: ##DomainURL##
---

# Change the default search highlight color in JavaScript (ES6) Document editor control
# Change Search Highlight Color in JavaScript (ES6) Document Editor

[TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) provides an options to change the default search highlight color using [`searchHighlightColor`](https://ej2.syncfusion.com/documentation/api/document-editor/documentEditorSettingsModel#searchhighlightcolor) in Document editor settings. The highlight color which is given in [`documentEditorSettings`](https://ej2.syncfusion.com/documentation/api/document-editor-container#documenteditorsettings) will be highlighted on the searched text. By default, search highlight color is `yellow`.
[TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) provides an option to change the default search highlight color using [`searchHighlightColor`](https://ej2.syncfusion.com/documentation/api/document-editor/documentEditorSettingsModel#searchhighlightcolor) in the Document Editor settings. The highlight color specified in [`documentEditorSettings`](https://ej2.syncfusion.com/documentation/api/document-editor-container#documenteditorsettings) will be applied to the searched text. By default, the search highlight color is `yellow`.

Similarly, you can use [`documentEditorSettings`](https://ej2.syncfusion.com/documentation/api/document-editor#documenteditorsettings) property for DocumentEditor also.
Similarly, you can use the [`documentEditorSettings`](https://ej2.syncfusion.com/documentation/api/document-editor#documenteditorsettings) property for the DocumentEditor as well.

The following example code illustrates how to change the default search highlight color.

```ts
let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true,height: '590px',
let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px',
// Add required search highlight color
documentEditorSettings: {
searchHighlightColor: 'Grey',
Expand All @@ -26,11 +26,10 @@ let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToo
DocumentEditorContainer.Inject(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 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.

Output will be like below:
The output will be as shown below:

![How to change the default search highlight color](../images/search-color.png)
Loading