Skip to content

Task(1043990): Updated how to files in Core DOCX Editor #4060

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
VijayalakshmiGSF4561 wants to merge 4 commits into
base: hotfix/hotfix-v34.1.29
Choose a base branch
from
Open

Task(1043990): Updated how to files in Core DOCX Editor #4060

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5836844
1043990: Updated how files in Core DOCX Editor
VijayalakshmiGSF4561 Jul 31, 2026
15b91d8
1043990: Updated how to files in Core
VijayalakshmiGSF4561 Jul 31, 2026
7b2bba1
1043990: Updated headings for Core DOCX Editor
VijayalakshmiGSF4561 Jul 31, 2026
4ca6d78
1043990: Resolved CI issues
VijayalakshmiGSF4561 Jul 31, 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
16 changes: 9 additions & 7 deletions Document-Processing/Word/Word-Processor/asp-net-core/how-to/auto-save-document.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
---
layout: post
title: Auto Save Document in Document Editor Component | Syncfusion
description: Learn here all about Auto save document in document editor in Syncfusion Document Editor component of syncfusion and more.
title: Auto Save Document in DOCX Editor Component | Syncfusion
description: Learn here all about Auto save document in DOCX Editor in Syncfusion DOCX Editor component of syncfusion and more.
platform: document-processing
control: Auto Save Document In Document Editor
control: Auto Save Document In DOCX Editor
documentation: ug
---


# Auto save document in Document editor control
# Auto-Save Document in ASP.NET Core DOCX Editor Component

In this article, we are going to see how to auto save the document to server. You can automatically save the edited content in regular intervals of time. It helps reduce the risk of data loss by saving an open document automatically at customized intervals.
Learn how to auto-save a document to the server using the Syncfusion DOCX Editor component. You can automatically save the edited content at regular intervals, which helps reduce the risk of data loss by saving an open document automatically at customized intervals.

The example below saves the document to the server every 10 seconds by posting the editor's DOCX blob to a server endpoint through the `contentChange` event.

The following example illustrates how to auto save the document in server.

Expand Down Expand Up @@ -42,13 +44,13 @@ public string AutoSave()
file.CopyTo(stream);
//Save the stream to database or server as per the requirement.
stream.Close();
return "Sucess";
return "Success";
}
```

## Online Demo

Explore how to automatically save Word documents using the ASP.NET Core Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/asp-net-core/documenteditor/autosave#/tailwind3).
Explore how to automatically save Word documents using the ASP.NET Core DOCX Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/asp-net-core/documenteditor/autosave#/tailwind3).

## See Also
* [AutoSave document in DocumentEditor](./auto-save-document-in-document-editor)
12 changes: 6 additions & 6 deletions ...ment-Processing/Word/Word-Processor/asp-net-core/how-to/change-document-view.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
---
layout: post
title: Change Document View in Document Editor Component | Syncfusion
description: Learn here all about how to change document view in Syncfusion Document Editor component of Syncfusion Essential JS 2 and more.
title: Change Document View in DOCX Editor Component | Syncfusion
description: Learn here all about how to change document view in Syncfusion DOCX Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Change Document View
documentation: ug
---


# Change document view
# Change document view in ASP.NET Core DOCX Editor Component

## How to change the document view in DocumentEditor component

[ASP.NET Core DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/asp-net-core-docx-editor) (Document Editor) allows to change the view to web layout and print using the [`layoutType`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.DocumentEditor.html#Syncfusion_EJ2_DocumentEditor_DocumentEditor_LayoutType) property with the supported [`LayoutType`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.LayoutType.html)
[ASP.NET Core DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/asp-net-core-docx-editor) (Document Editor) allows you to switch the document view between page layout (`Pages`) and continuous web layout (`Continuous`) using the [`layoutType`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.DocumentEditor.html#Syncfusion_EJ2_DocumentEditor_DocumentEditor_LayoutType) property with the supported [`LayoutType`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.LayoutType.html) values.


{% tabs %}
Expand All @@ -26,11 +26,11 @@ documentation: ug



N> Default value of [`layoutType`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.DocumentEditorContainer.html#Syncfusion_EJ2_DocumentEditor_DocumentEditorContainer_LayoutType) in DocumentEditor component is [`Pages`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.LayoutType.html).
N> Default value of [`layoutType`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.DocumentEditor.html#Syncfusion_EJ2_DocumentEditor_DocumentEditor_LayoutType) in DocumentEditor and DocumentEditorContainer components is [`Pages`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.LayoutType.html).

## How to change the document view in DocumentEditorContainer component

DocumentEditorContainer component allows to change the view to web layout and print using the [`layoutType`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.DocumentEditorContainer.html#Syncfusion_EJ2_DocumentEditor_DocumentEditorContainer_LayoutType) property with the supported [`LayoutType`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.LayoutType.html)
DocumentEditorContainer component allows you to switch the document view between page layout (`Pages`) and continuous web layout (`Continuous`) using the [`layoutType`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.DocumentEditorContainer.html#Syncfusion_EJ2_DocumentEditor_DocumentEditorContainer_LayoutType) property with the supported [`LayoutType`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.LayoutType.html) values.


{% tabs %}
Expand Down
14 changes: 7 additions & 7 deletions ...ord-Processor/asp-net-core/how-to/change-the-cursor-color-in-document-editor.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
---
layout: post
title: How to change cursor color by CSS DocumentEditor | Syncfusion
description: Learn how to change the cursor color using CSS in ASP.NET Core Document Editor component of syncfusion and more.
title: How to Change Cursor Color using CSS in DOCX Editor | Syncfusion
description: Learn how to change the cursor color using CSS in ASP.NET Core DOCX Editor component of syncfusion and more.
platform: document-processing
control: Change The Cursor Color
documentation: ug
---

# How to change the cursor color using CSS in Document Editor component
# How to change the cursor color using CSS in ASP.NET Core DOCX Editor

[ASP.NET Core DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/asp-net-core-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`.
[ASP.NET Core DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/asp-net-core-docx-editor) (Document Editor) default cursor color is black. You can change the color by overriding the CSS property using the class name. The DOCX Editor cursor CSS uses a class named `e-de-blink-cursor`.

Refer the below code snippet to change the cursor color to red.
Refer to the following 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;
}
```

Output will be like below:

![Change the cursor color in document editor](../images/cursor-css.png)
![Change the cursor color in DOCX Editor](../images/cursor-css.png)
10 changes: 5 additions & 5 deletions ...Word-Processor/asp-net-core/how-to/change-the-default-search-highlight-color.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
---
layout: post
title: how to change the default search highlight color | Syncfusion
description: Learn how to change the default search highlight color in ASP.NET Core Syncfusion Document Editor component.
title: How to Change the Default Search Highlight Color | Syncfusion
description: Learn how to change the default search highlight color in ASP.NET Core Syncfusion DOCX Editor component.
platform: document-processing
control: Change The Default Search Highlight Color
documentation: ug
---

# How to change the default search highlight color in Document Editor
# How to change the default search highlight color in DOCX Editor

[ASP.NET Core DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/asp-net-core-docx-editor) (Document Editor) provides an options to change the default search highlight color using [`searchHighlightColor`] in Document editor settings. The highlight color which is given in [`documentEditorSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.DocumentEditorContainer.html#Syncfusion_EJ2_DocumentEditor_DocumentEditorContainer_DocumentEditorSettings) will be highlighted on the searched text. By default, search highlight color is `yellow`.
[ASP.NET Core DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/asp-net-core-docx-editor) (Document Editor) provides an option to change the default search highlight color using [`searchHighlightColor`] in Document Editor settings. The highlight color which is given in [`documentEditorSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.DocumentEditorContainer.html#Syncfusion_EJ2_DocumentEditor_DocumentEditorContainer_DocumentEditorSettings) will be highlighted on the searched text. By default, the search highlight color is `yellow`.

Similarly, you can use [`documentEditorSettings`] property for DocumentEditor also.
Similarly, you can use the [`documentEditorSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.DocumentEditor.html#Syncfusion_EJ2_DocumentEditor_DocumentEditor_DocumentEditorSettings) property for the DocumentEditor component also.

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

Expand Down
24 changes: 12 additions & 12 deletions ...nt-Processing/Word/Word-Processor/asp-net-core/how-to/customize-color-picker.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
---
layout: post
title: Customize Color Picker in Syncfusion Document Editor Component
description: Learn here all about how to customize color picker in Syncfusion Document Editor component of Syncfusion Essential JS 2 and more.
title: Customize Color Picker in Syncfusion DOCX Editor Component
description: Learn here all about how to customize color picker in Syncfusion DOCX Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Customize Color Picker
documentation: ug
---


# How to customize the color picker in Document Editor component
# How to customize the color picker in ASP.NET Core DOCX Editor

[ASP.NET Core DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/asp-net-core-docx-editor) (Document Editor) provides an options to customize the color picker using `colorPickerSettings` in 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."
[ASP.NET Core DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/asp-net-core-docx-editor) (Document Editor) provides options to customize the color picker using `colorPickerSettings` nested in 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.

Similarly, you can use `documentEditorSettings` property for DocumentEditor also.
Similarly, you can use the [`documentEditorSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.DocumentEditor.html#Syncfusion_EJ2_DocumentEditor_DocumentEditor_DocumentEditorSettings) property for the DocumentEditor also.


{% tabs %}
Expand All @@ -29,15 +29,15 @@ The following table illustrates all the possible properties for the color picker

| Property | Behavior |
|---|---|
| columns | It is used to render the ColorPicker palette with specified columns. Defaults to 10 |
| disabled | It is used to enable / disable ColorPicker component. If it is disabled the ColorPicker popup won’t open. Defaults to false |
| mode | It is used to render the ColorPicker with the specified mode. Defaults to ‘Picker’ |
| modeSwitcher | It is used to show / hide the mode switcher button of ColorPicker component. Defaults to true |
| showButtons | It is used to show / hide the control buttons (apply / cancel) of ColorPicker component. Defaults to true |
| columns | It is used to render the ColorPicker palette with specified columns. Defaults to 10. |
| disabled | It is used to enable / disable ColorPicker component. If it is disabled the ColorPicker popup won't open. Defaults to false. |
| mode | It is used to render the ColorPicker with the specified mode. Defaults to 'Picker'. |
| modeSwitcher | It is used to show / hide the mode switcher button of ColorPicker component. Defaults to true. |
| 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.
>**Note**: According to the Word document specifications, it is not possible to modify the **`Predefined Highlight colors`**. Users must work within the confines of the existing color palette, as no functionality currently exists to customize these predefined highlighting options.

## Online Demo

Explore how to customize the color picker in the ASP.NET Core Document Editor for formatting Word documents in this live demo [here](https://document.syncfusion.com/demos/docx-editor/asp-net-core/documenteditor/colorpickercustomization#/tailwind3).
Explore how to customize the color picker in the ASP.NET Core DOCX Editor for formatting Word documents in this live demo [here](https://document.syncfusion.com/demos/docx-editor/asp-net-core/documenteditor/colorpickercustomization#/tailwind3).