Skip to content

1043283: UG Correction for Angular platform #3923

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MoushmiDhanislas wants to merge 2 commits into
base: development
Choose a base branch
from
Open

1043283: UG Correction for Angular platform #3923

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f54cb80
1043283: UG Correction for Angular platform
MoushmiDhanislas Jul 28, 2026
ea259a3
Merge branch 'development' into 1043283-Angular1_UGCorrection
MoushmiDhanislas Jul 28, 2026
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
30 changes: 15 additions & 15 deletions ...d-Processor/angular/how-to/disable-header-and-footer-edit-in-document-editor.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
---
layout: post
title: Disable Header and Footer Edit in Angular Document Editor | Syncfusion
description: Learn here all about Disable header and footer edit in document editor in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Disable header and footer in Angular DOCX Editor | Syncfusion
description: Learn here all about Disable header and footer edit in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Disable header and footer edit in document editor
control: Disable header and footer edit in Document Editor
documentation: ug
domainurl: ##DomainURL##
---

# Disable header and footer edit in Angular Document editor component
# Disable header and footer editing in Angular Document Editor

## Disable header and footer edit in DocumentEditorContainer instance

You can use [`restrictEditing`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/#restrictediting) property to disable header and footer editing based on selection context type.

RestrictEditing allows you to restrict the document modification and makes the Document read only mode. So, by using this property, and if selection inside header or footer, you can set this property as true.
RestrictEditing allows you to restrict the document modification and puts the document in read-only mode. So, by using this property, and if the selection is inside header or footer, you can set this property as true.

The following example code illustrates how to header and footer edit in `DocumentEditorContainer` instance.
The following example code illustrates how to disable header and footer edit in `DocumentEditorContainer` instance.

```typescript
import { Component, OnInit, ViewChild } from '@angular/core';
Expand Down Expand Up @@ -58,7 +58,7 @@ export class AppComponent implements OnInit {
this.container as DocumentEditorContainerComponent
).documentEditor.selection.contextType.indexOf('Footer') > -1
) {
// Change the document to read only mode
// Change the document to read-only mode
(
this.container as DocumentEditorContainerComponent
).restrictEditing = true;
Expand All @@ -72,11 +72,11 @@ export class AppComponent implements OnInit {
}
```

> 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.

Otherwise, you can disable clicking inside Header or Footer by using [`closeHeaderFooter`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection/#closeheaderfooter) API in selection module.
As an alternative to `restrictEditing`, you can disable clicking inside header or footer by using [`closeHeaderFooter`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection/#closeheaderfooter) API in selection module.

The following example code illustrates how to close header and footer when selection is inside header or footer in `DocumentEditorContainer` instance.
The following example code illustrates how to disable header and footer edit in `DocumentEditorContainer` instance using `closeHeaderFooter` API.

```typescript
import { Component, OnInit, ViewChild } from '@angular/core';
Expand Down Expand Up @@ -124,13 +124,13 @@ export class AppComponent implements OnInit {
}
}
```
> 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.

## Disable header and footer edit in DocumentEditor instance

Like restrictEditing, you can use [`isReadOnly`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#isreadonly) property in Document editor to disable header and footer edit.
Like restrictEditing, you can use [`isReadOnly`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#isreadonly) property in Document Editor to disable header and footer edit.

The following example code illustrates how to header and footer edit in `DocumentEditor` instance.
The following example code illustrates how to disable header and footer edit in `DocumentEditor` instance.

```typescript
// import { Component, OnInit, ViewChild } from '@angular/core';
Expand Down Expand Up @@ -184,7 +184,7 @@ export class AppComponent {
if (this.documentEditor.selection.contextType.indexOf('Header') > -1 ||
// Check whether selection is in Footer
this.documentEditor.selection.contextType.indexOf('Footer') > -1) {
// Change the document to read only mode
// Change the document to read-only mode
this.documentEditor.isReadOnly = true;
} else {
// Change the document to editable mode
Expand All @@ -194,4 +194,4 @@ export class AppComponent {
}
```

> 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.
21 changes: 10 additions & 11 deletions ...ocessing/Word/Word-Processor/angular/how-to/disable-optimized-text-measuring.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
---
layout: post
title: Optimized Text Measuring in Angular Document Editor | Syncfusion
description: Learn here all about Disable optimized text measuring in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Disable optimized text measuring in Angular DOCX Editor | Syncfusion
description: Learn here all about Disable optimized text measuring in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Disable optimized text measuring
control: Disable optimized text measuring
documentation: ug
domainurl: ##DomainURL##
---

# Disable optimized text measuring in Angular Document editor component
# Disable optimized text measuring in Angular Document Editor component

Starting from v19.3.0.x, the accuracy of text size measurements in Document editor is improved such as to match Microsoft Word pagination for most Word documents. This improvement is included as default behavior along with an optional API [`enableOptimizedTextMeasuring`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/documentEditorSettingsModel/#enableoptimizedtextmeasuring) in Document editor settings.
Starting from v19.3.0.x, the accuracy of text size measurements in [Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) is improved to match Microsoft Word pagination for most Word documents. This improvement is included as the default behavior along with an optional API [`enableOptimizedTextMeasuring`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/documentEditorSettingsModel/#enableoptimizedtextmeasuring) in Document Editor settings.

If you want the [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) component to retain the document pagination (display page-by-page) behavior like v19.2.0.x and older versions. Then you can disable this optimized text measuring improvement, by setting `false` to [`enableOptimizedTextMeasuring`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/documentEditorSettingsModel/#enableoptimizedtextmeasuring) property of Angular Document Editor component.
If you want the Document Editor component to retain the document pagination (display page-by-page) behavior like v19.2.0.x and older versions, then you can disable this optimized text measuring improvement, by setting `false` to [`enableOptimizedTextMeasuring`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/documentEditorSettingsModel/#enableoptimizedtextmeasuring) property of Angular Document Editor component.

## Disable optimized text measuring in `DocumentEditorContainer` instance

Expand All @@ -31,7 +31,7 @@ import {

@Component({
selector: 'app-container',
template: `<ejs-documenteditor id="container" [documentEditorSettings]= "settings" serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" height="330px" style="display:block" [isReadOnly]=false [enableSelection]=true
template: `<ejs-documenteditor id="container" [documentEditorSettings]="settings" serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" height="330px" style="display:block" [isReadOnly]=false [enableSelection]=true
[enablePrint]=true [enableSfdtExport]=true [enableWordExport]=true [enableOptionsPane]=true [enableContextMenu]=true
[enableHyperlinkDialog]=true [enableBookmarkDialog]=true [enableTableOfContentsDialog]=true [enableSearch]=true
[enableParagraphDialog]=true [enableListDialog]=true [enableTablePropertiesDialog]=true [enableBordersAndShadingDialog]=true
Expand All @@ -48,11 +48,10 @@ import {

export class AppComponent {
public settings = { enableOptimizedTextMeasuring: false };

}
```

> 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.

## Disable optimized text measuring in `DocumentEditor` instance

Expand All @@ -64,7 +63,7 @@ import { ToolbarService } from '@syncfusion/ej2-angular-documenteditor';
@Component({
selector: 'app-container',
// specifies the template string for the DocumentEditorContainer component
template: `<ejs-documenteditorcontainer [documentEditorSettings]= "settings" serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" height="600px" style="display:block" [enableToolbar]=true> </ejs-documenteditorcontainer>`,
template: `<ejs-documenteditorcontainer [documentEditorSettings]="settings" serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" height="600px" style="display:block" [enableToolbar]=true> </ejs-documenteditorcontainer>`,
providers: [ToolbarService]
})
export class AppComponent {
Expand All @@ -74,4 +73,4 @@ export class AppComponent {
}
```

> 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.
10 changes: 5 additions & 5 deletions ...Word/Word-Processor/angular/how-to/enable-ruler-in-document-editor-component.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
---
title: "how to enable ruler in document edior | Syncfusion"
title: "How to enable ruler in Angular DOCX Editor | Syncfusion"
component: "DocumentEditor"
description: "Learn how to enable ruler in Angular Document Editor component."
platform: document-processing
control: Enable ruler
control: Enable Ruler
documentation: ug
domainurl: ##DomainURL##
---

## How to enable ruler in Angular Document Editor component

Using ruler we can refer to setting specific margins, tab stops, or indentations within a document to ensure consistent formatting in [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor).
The ruler helps you set specific margins, tab stops, or indentations within a document to ensure consistent formatting in [Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor).

The following example illustrates how to enable ruler in Document Editor

Expand All @@ -26,9 +26,9 @@ The following example illustrates how to enable ruler in Document Editor

{% previewsample "/document-processing/samples/document-editor/angular/ruler-cs1" %}

## How to enable ruler in Document Editor Container component
## How to enable ruler in Angular Document Editor Container component

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

The following example illustrates how to enable ruler in Document Editor Container.

Expand Down
Loading