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,17 +1,17 @@
---
layout: post
title: how to change the default search highlight color ASP.NET MVC Document Editor Component
title: How to change the search highlight color in DOCX Editor | Syncfusion
description: Learn how to change the default search highlight color in Syncfusion ASP.NET MVC Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Change The Default Search Highlight Color
documentation: ug
---

# How to change the default search highlight color in Document Editor component
# How to change search highlight color in ASP.NET MVC Document 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`.
Document Editor provides an option to change the default search highlight color using `searchHighlightColor` in Document Editor settings. The highlight color specified in [`documentEditorSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.DocumentEditorContainer.html#Syncfusion_EJ2_DocumentEditor_DocumentEditorContainer_DocumentEditorSettings) is applied to 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` property with the DocumentEditor control as well.

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

Expand All @@ -21,7 +21,8 @@ The following example code illustrates how to change the default search highligh
{% include code-snippet/document-editor/asp-net-mvc/document-editor-container/search-highlight-color/razor %}
{% endhighlight %}
{% highlight c# tabtitle="document-editor.cs" %}
{% endhighlight %}{% endtabs %}
{% endhighlight %}
{% endtabs %}


Output will be like below:
Expand Down
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
---
layout: post
title: Customize Color Picker in Syncfusion ASP.NET MVC Document Editor Component
description: Learn here all about how to customize color picker in Syncfusion ASP.NET MVC Document Editor component of Syncfusion Essential JS 2 and more.
title: Customize Color Picker in Syncfusion ASP.NET MVC DOCX Editor Component
description: Learn how to customize the color picker in Syncfusion ASP.NET MVC Document 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 color picker in ASP.NET MVC Document Editor component

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."
Document Editor provides an option to customize the color picker using `colorPickerSettings` in Document Editor settings. The color picker offers customization options for the 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` property with the DocumentEditor control as well.


{% tabs %}
Expand All @@ -24,15 +24,15 @@ Similarly, you can use `documentEditorSettings` property for DocumentEditor also
{% endhighlight %}
{% endtabs %}

The following table illustrates all the possible properties for the color picker.
The following table illustrates the available 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 | Renders the ColorPicker palette with the specified number of columns. Defaults to 10 |
| disabled | Enables or disables the ColorPicker component. If disabled, the ColorPicker popup does not open. Defaults to false |
| mode | Renders the ColorPicker in the specified mode. Defaults to 'Picker' |
| modeSwitcher | Shows or hides the mode switcher button of the ColorPicker component. Defaults to true |
| showButtons | Shows or hides the control buttons (apply / cancel) of the 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.
Expand Down
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
layout: post
title: Customize Context Menu in ASP.NET MVC Document Editor Component
title: Customize Context Menu in ASP.NET MVC DOCX Editor | Syncfusion
description: Learn here all about how to customize context menu in Syncfusion ASP.NET MVC Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Customize Context Menu
documentation: ug
---


# Context menu customization
# Context menu customization in ASP.NET MVC Document Editor Component

## How to customize context menu in Document Editor

Expand All @@ -22,7 +22,8 @@ Document Editor allows to add custom option in context menu. It can be achieved
{% include code-snippet/document-editor/asp-net-mvc/document-editor-container/add-custom-menu/razor %}
{% endhighlight %}
{% highlight c# tabtitle="Add-custom-menu.cs" %}
{% endhighlight %}{% endtabs %}
{% endhighlight %}
{% endtabs %}



Expand All @@ -40,35 +41,38 @@ Using `addCustomMenu()` method, you can hide the default context menu, by settin
{% include code-snippet/document-editor/asp-net-mvc/document-editor-container/hide-context-menu/razor %}
{% endhighlight %}
{% highlight c# tabtitle="Hide-context-menu.cs" %}
{% endhighlight %}{% endtabs %}
{% endhighlight %}
{% endtabs %}



#### Customize added context menu items

The following code shows how to hide or show added custom option in context menu using the `customContextMenuBeforeOpen`.
The following code shows how to hide or show the added custom option in context menu using the `customContextMenuBeforeOpen` event.


{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
{% include code-snippet/document-editor/asp-net-mvc/document-editor-container/customize-context-menu/razor %}
{% endhighlight %}
{% highlight c# tabtitle="Customize-context-menu.cs" %}
{% endhighlight %}{% endtabs %}
{% endhighlight %}
{% endtabs %}

#### Customize Context Menu with sub-menu items

Document Editor allows you to customize the Context Menu with sub-menu items. It can be achieved by using the `addCustomMenu()` method.

The following code shows how to add a sub items in the custom option in context menu in Document Editor Container.
The following code shows how to add submenu items to the custom option in the context menu in the Document Editor Container.


{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
{% include code-snippet/document-editor/asp-net-mvc/document-editor-container/customize-sub-context-menu/razor %}
{% endhighlight %}
{% highlight c# tabtitle="Customize-sub-context-menu" %}
{% endhighlight %}{% endtabs %}
{% endhighlight %}
{% endtabs %}

## Online Demo

Expand Down
Original file line number Diff line number Diff line change
@@ -1,25 +1,26 @@
---
layout: post
title: Customize Font Family Drop Down in ASP.NET MVC Document Editor Component
title: Customize Font Family Dropdown in ASP.NET MVC DOCX Editor | Syncfusion
description: Learn here all about how to customize font family drop down in Syncfusion ASP.NET MVC Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Customize Font Family Drop Down
documentation: ug
---


# How to customize the font family drop down in React Document Editor component
# How to customize font family drop down in ASP.NET MVC Document Editor

Document editor provides options to customize the font family drop down list values using `fontfamilies` in Document editor settings. Fonts which are added in `fontFamilies` of `documentEditorSettings` will be displayed on font drop down list of text properties pane and font dialog.
Document Editor provides options to customize the font family drop-down list values using `fontFamilies` in Document Editor settings. Fonts added in `fontFamilies` of `documentEditorSettings` will be displayed in the font drop-down list of the text properties pane and font dialog.

Similarly, you can use `documentEditorSettings` property for DocumentEditor also.
Similarly, you can use the `documentEditorSettings` property with the DocumentEditor control as well.


{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
{% include code-snippet/document-editor/asp-net-mvc/document-editor-container/font-family/razor %}
{% endhighlight %}
{% highlight c# tabtitle="Font-family.cs" %}
{% endhighlight %}{% endtabs %}
{% endhighlight %}
{% endtabs %}

![Font](../images/font-family.png)
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
---
layout: post
title: Customize Ribbon in ASP.NET MVC Document Editor | Syncfusion
description: Learn how to customize the ribbon in Syncfusion ASP.NET MVC Document Editor - file menu, backstage, tabs, groups, and items.
title: Customize Ribbon in ASP.NET MVC DOCX Editor | Syncfusion
description: Learn how to customize the ribbon in Syncfusion ASP.NET MVC DOCX Editor - file menu, backstage, tabs, groups, and items.
platform: document-processing
control: Ribbon Customization
documentation: ug
domainurl: ##DomainURL##
---

# Customize Ribbon in ASP.NET MVC Document Editor
# Customize Ribbon in ASP.NET MVC DOCX Editor

The Syncfusion Document Editor provides an extensive and flexible API to customize the built-in ribbon UI. You can:
The Syncfusion DOCX Editor provides an extensive and flexible API to customize the built-in ribbon UI. You can:

- Customize the File menu.
- Add the Backstage menu instead of File menu.
Expand All @@ -22,9 +22,9 @@ Below are detailed examples for each ribbon customization scenario.

## File Menu Customization

Document Editor provides APIs to remove existing File menu items and add new custom items based on your requirements. You can modify the File menu using the `fileMenuItems` property.
DOCX Editor provides APIs to remove existing File menu items and add new custom items based on your requirements. You can modify the File menu using the `fileMenuItems` property.

In below code example, In the example below, the "Open" and "Export" items have been removed from the File Menu Items, and new custom items have been added.
In the example below, the "Open" and "Export" items have been removed from the File menu items, and new custom items have been added.


{% tabs %}
Expand All @@ -38,7 +38,7 @@ In below code example, In the example below, the "Open" and "Export" items have

## Backstage Menu Customization

The Document Editor provides an `backStageMenu` API to add a backstage menu. When the backstage menu is enabled, the default File menu items are automatically hidden.
The DOCX Editor provides a `backStageMenu` API to add a backstage menu. When the backstage menu is enabled, the default File menu items are automatically hidden.

The following code example shows how to add the backstage menu items.

Expand All @@ -52,17 +52,17 @@ The following code example shows how to add the backstage menu items.
{% endtabs %}


Refer this documentation know more about [`backstage items`](https://ej2.syncfusion.com/documentation/ribbon/backstage)
Refer to this documentation to know more about [`backstage items`](https://ej2.syncfusion.com/documentation/ribbon/backstage).

## Tab Customization

You can customize the ribbon tabs in the Document Editor by showing, hiding, or adding tabs according to your application's requirements.
You can customize the ribbon tabs in the DOCX Editor by showing, hiding, or adding tabs according to your application's requirements.

### Show/Hide Tab

Document editor provides the `showTab` API to show and hide the existing tab using existing `RibbonTabType` and `tabId`.
DOCX Editor provides the `showTab` API to show and hide the existing tab using existing `RibbonTabType` and `tabId`.

The following code example how to show/hide existing tab using existing tab type and tab id.
The following code example shows how to show or hide an existing tab using the tab type and tab id.

```typescript

Expand All @@ -75,7 +75,7 @@ container.ribbon.showTab('custom_tab', false);

### Add Tab

The Document Editor provides the `addTab` API, which allows you to insert a new custom tab either between existing tabs or at the end of the ribbon tabs.
The DOCX Editor provides the `addTab` API, which allows you to insert a new custom tab either between existing tabs or at the end of the ribbon tabs.

```typescript

Expand Down Expand Up @@ -120,9 +120,9 @@ You can also customize ribbon groups within a tab to better organize commands or

### Show/Hide Group

Document Editor provides an `showGroup` API to show or hide existing groups within a ribbon tab.
DOCX Editor provides a `showGroup` API to show or hide existing groups within a ribbon tab.

The following code example show how to show/hide the group using group Id or `RibbonGroupInfo`.
The following code example shows how to show or hide the group using the group Id or `RibbonGroupInfo`.

```typescript

Expand Down Expand Up @@ -181,9 +181,9 @@ You can customize individual items within ribbon groups. This includes showing,

### Show/Hide Item

Using `showItems` API in Document editor ribbon to enable/disable the existing item. Here, you can specify the item Id or `RibbonItemInfo`.
Using the `showItems` API in the DOCX Editor ribbon, you can show or hide an existing item. Here, you can specify the item Id or `RibbonItemInfo`.

The following code example show how to show/hide the item using item Id or `RibbonItemInfo`.
The following code example shows how to show or hide the item using the item Id or `RibbonItemInfo`.

```typescript
// To hide the Bold and Italic items using ribbon item information
Expand All @@ -198,7 +198,7 @@ container.ribbon.showItems('custom_item', false);

### Enable/Disable Item

Using `enableItems` API in Document editor ribbon to enable/disable the existing item.
Using the `enableItems` API in the DOCX Editor ribbon, you can enable or disable an existing item.

```typescript
// To disable the underline using ribbon item info
Expand All @@ -214,7 +214,7 @@ container.ribbon.enableItems('custom_item', false);

### Add Item

You can use the `addItem` API in the Document Editor ribbon to add a new item. Additionally, you can specify the target tab and group where the new item should be placed.
You can use the `addItem` API in the DOCX Editor ribbon to add a new item. Additionally, you can specify the target tab and group where the new item should be placed.

```typescript

Expand Down Expand Up @@ -248,7 +248,7 @@ You can use the `addItem` API in the Document Editor ribbon to add a new item. A

## Online Demo

Explore how to customize the ribbon in the ASP.NET MVC Document Editor for working with Word documents in this live demo [here](https://document.syncfusion.com/demos/docx-editor/asp-net-mvc/documenteditor/ribboncustomization#/tailwind3).
Explore how to customize the ribbon in the ASP.NET MVC DOCX Editor for working with Word documents in this live demo [here](https://document.syncfusion.com/demos/docx-editor/asp-net-mvc/documenteditor/ribboncustomization#/tailwind3).

## Related Links

Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.