From 92a87a726ffd995791d3b224aeab16c8bd60b956 Mon Sep 17 00:00:00 2001 From: Vellaisamy Auvudaiappan Date: Tue, 28 Jul 2026 11:21:30 +0530 Subject: [PATCH] 1043289-changed document-view,cursor-color,highlight,color-picker --- .../angular/how-to/change-document-view.md | 36 +++++++++---------- ...nge-the-cursor-color-in-document-editor.md | 12 +++---- ...ange-the-default-search-highlight-color.md | 12 +++---- .../angular/how-to/customize-color-picker.md | 12 +++---- 4 files changed, 36 insertions(+), 36 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/angular/how-to/change-document-view.md b/Document-Processing/Word/Word-Processor/angular/how-to/change-document-view.md index 4469383e07..b38d76dd5c 100644 --- a/Document-Processing/Word/Word-Processor/angular/how-to/change-document-view.md +++ b/Document-Processing/Word/Word-Processor/angular/how-to/change-document-view.md @@ -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'; @@ -27,12 +27,12 @@ import { @Component({ selector: 'app-root', - template: ` + template: ` `, encapsulation: ViewEncapsulation.None, providers: [PrintService, SfdtExportService, WordExportService, TextExportService, SelectionService, SearchService, EditorService, @@ -52,13 +52,13 @@ 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 /** @@ -66,7 +66,7 @@ DocumentEditorContainer component allows you to change the view to web layout an */ @Component({ selector: 'app-root', - templateUrl: '', + template: '', encapsulation: ViewEncapsulation.None, providers: [ToolbarService] }) @@ -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/). \ No newline at end of file +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/). \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/angular/how-to/change-the-cursor-color-in-document-editor.md b/Document-Processing/Word/Word-Processor/angular/how-to/change-the-cursor-color-in-document-editor.md index 59a856ce19..27d4d5292b 100644 --- a/Document-Processing/Word/Word-Processor/angular/how-to/change-the-cursor-color-in-document-editor.md +++ b/Document-Processing/Word/Word-Processor/angular/how-to/change-the-cursor-color-in-document-editor.md @@ -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; } ``` diff --git a/Document-Processing/Word/Word-Processor/angular/how-to/change-the-default-search-highlight-color.md b/Document-Processing/Word/Word-Processor/angular/how-to/change-the-default-search-highlight-color.md index feda025589..b6ea902ffe 100644 --- a/Document-Processing/Word/Word-Processor/angular/how-to/change-the-default-search-highlight-color.md +++ b/Document-Processing/Word/Word-Processor/angular/how-to/change-the-default-search-highlight-color.md @@ -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 @@ -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. @@ -40,7 +40,7 @@ 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 {} } @@ -48,6 +48,6 @@ 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. -Output will be like below: +The output will look like the following: ![How to change the default search highlight color](../images/search-color.png) \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/angular/how-to/customize-color-picker.md b/Document-Processing/Word/Word-Processor/angular/how-to/customize-color-picker.md index f2fa55ca7a..d1089cd619 100644 --- a/Document-Processing/Word/Word-Processor/angular/how-to/customize-color-picker.md +++ b/Document-Processing/Word/Word-Processor/angular/how-to/customize-color-picker.md @@ -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 @@ -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 @@ -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