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,18 +1,18 @@
---
layout: post
title: Change document view in Angular Document editor component | Syncfusion
description: Learn here all about Change document view in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Change document view in Angular DOCX Editor component | Syncfusion
description: Learn here all about Change document view in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Change document view
documentation: ug
domainurl: ##DomainURL##
---

# Change document view in Angular Document editor component
# Change document view in Angular Document Editor component

## How to change the document view in DocumentEditor component
## How to change the document view in the DocumentEditor component

[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) allows you to change the view to web layout and print using the [`layoutType`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#layouttype) property with the supported [`LayoutType`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/layoutType/).
[Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) allows you to change the view to web layout or print layout using the [`layoutType`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#layouttype) property with the supported [`LayoutType`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/layoutType/).

```typescript
import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
Expand All @@ -27,12 +27,12 @@ import {

@Component({
selector: 'app-root',
template: `<ejs-documenteditor id="container" #documenteditor_default 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
[enablePageSetupDialog]=true [enableStyleDialog]=true [enableFontDialog]=true [enableTableOptionsDialog]=true
[enableTableDialog]=true [enableImageResizer]=true [enableEditor]=true [enableEditorHistory]=true (created)="onCreate()">
template: `<ejs-documenteditor id="container" #documenteditor_default 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"
[enablePageSetupDialog]="true" [enableStyleDialog]="true" [enableFontDialog]="true" [enableTableOptionsDialog]="true"
[enableTableDialog]="true" [enableImageResizer]="true" [enableEditor]="true" [enableEditorHistory]="true" (created)="onCreate()">
</ejs-documenteditor>`,
encapsulation: ViewEncapsulation.None,
providers: [PrintService, SfdtExportService, WordExportService, TextExportService, SelectionService, SearchService, EditorService,
Expand All @@ -52,21 +52,21 @@ 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.

>Note: Default value of [`layoutType`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#layouttype) in DocumentEditor component is [`Pages`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/layoutType/).
N> Default value of [`layoutType`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#layouttype) in the DocumentEditor component is [`Pages`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/layoutType/).

## How to change the document view in DocumentEditorContainer component
## How to change the document view in the DocumentEditorContainer component

DocumentEditorContainer component allows you to change the view to web layout and print using the [`layoutType`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/#layouttype) property with the supported [`LayoutType`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/layoutType/).
The DocumentEditorContainer component allows you to change the view to web layout or print layout using the [`layoutType`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/#layouttype) property with the supported [`LayoutType`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/layoutType/).

```typescript
/**
* Add below codes in app.component.ts file
*/
@Component({
selector: 'app-root',
templateUrl: '<ejs-documenteditorcontainer #documenteditor_default [enableToolbar]=true (created)="onCreate()" height="600px" style="display:block;"></ejs-documenteditorcontainer>',
template: '<ejs-documenteditorcontainer #documenteditor_default [enableToolbar]=true (created)="onCreate()" height="600px" style="display:block;"></ejs-documenteditorcontainer>',
encapsulation: ViewEncapsulation.None,
providers: [ToolbarService]
})
Expand All @@ -82,6 +82,6 @@ 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.

>Note: Default value of [`layoutType`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#layouttype) in DocumentEditorContainer component is [`Pages`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/layoutType/).
N> Default value of [`layoutType`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#layouttype) in the DocumentEditorContainer component is [`Pages`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/layoutType/).
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
---
layout: post
title: Change the cursor color in document editor in Angular Document editor component | Syncfusion
description: Learn here all about Change the cursor color in document editor in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Change Cursor Color in Angular DOCX Editor | Syncfusion
description: Learn here all about Change the cursor color in Document Editor in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Change the cursor color in document editor
documentation: ug
domainurl: ##DomainURL##
---

# Change the cursor color in document editor in Angular Document editor component
# Change the cursor color in the Angular Document Editor component

[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) default cursor color is black. The user can change the color by overriding the css property using class name. The Document editor cursor css have a class named `e-de-blink-cursor`.
The default cursor color of the [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) is black. The user can change the color by overriding the CSS property using the class name. The Document Editor cursor CSS has a class named `e-de-blink-cursor`.

Please refer the below code snippet to change the cursor color to red.
Please refer to the below code snippet to change the cursor color to red.

```css
.e-de-blink-cursor {
border-left: 1px solid red!important;
border-left: 1px solid red !important;
}
```

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Change Search Highlight Color in Angular Document Editor | Syncfusion
description: Learn here all about Change the default search highlight color in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Change Search Highlight Color in Angular DOCX Editor | Syncfusion
description: Learn here all about Change the default search highlight color in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Change the default search highlight color
documentation: ug
Expand All @@ -10,9 +10,9 @@ domainurl: ##DomainURL##

# Change Search Highlight Color in Angular Document Editor

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

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

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

Expand Down Expand Up @@ -40,14 +40,14 @@ import { DocumentEditorContainerModule } from '@syncfusion/ej2-angular-documente
export class AppComponent implements OnInit {
@ViewChild('documenteditor_default')
public container?: DocumentEditorContainerComponent;
// Add required color to change the default search highlight color
// Specify the desired color to change the default search highlight color
public searchHighlightColor = { searchHighlightColor: 'Grey' };
ngOnInit(): void {}
}
```

> 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 look like the following:

![How to change the default search highlight color](../images/search-color.png)
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Customize color picker in Angular Document editor | Syncfusion
description: Learn here all about Customize color picker in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Customize color picker in Angular DOCX editor | Syncfusion
description: Learn here all about Customize color picker in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Customize color picker
documentation: ug
Expand All @@ -10,11 +10,11 @@ domainurl: ##DomainURL##

# Customize color picker in Angular Document editor component

[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) provides an options to customize the color picker using [`colorPickerSettings`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/documentEditorSettingsModel#colorpickersettings)in the document editor settings. The color picker offers customization options for default appearance, by allowing selection between Picker or Palette mode, for font and border colors.
[Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) provides options to customize the color picker using [`colorPickerSettings`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/documentEditorSettingsModel#colorpickersettings) in Document Editor settings. The color picker allows customization of its default appearance by selecting between Picker and Palette modes for font and border colors.

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

The following example code illustrates how to customize the color picker in the document editor container.
The following example code illustrates how to customize the color picker in the Document Editor container.


```typescript
Expand Down Expand Up @@ -63,7 +63,7 @@ export class AppComponent implements OnInit {
| showButtons | It is used to show / hide the control buttons (apply / cancel) of ColorPicker component. Defaults to true |


>**Note**: According to the Word document specifications, it is not possible to modify the **`Predefined Highlight colors`**. This limitation means that the range of highlight colors provided by default cannot be customized or expanded upon by the user to suit individual preferences. Consequently, users must work within the confines of the existing color palette, as no functionality currently exists to modify or personalize these predefined highlighting options.
N> According to the Word document specifications, it is not possible to modify the **`Predefined Highlight colors`**. This limitation means that the range of highlight colors provided by default cannot be customized or expanded upon by the user to suit individual preferences. Consequently, users must work within the confines of the existing color palette, as no functionality currently exists to modify or personalize these predefined highlighting options.

## Online Demo

Expand Down