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,22 +1,22 @@
---
layout: post
title: Customize context menu in React Document editor component | Syncfusion
description: Learn here all about Customize context menu in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more.
control: Customize context menu
title: Customize context menu in React DOCX Editor component | Syncfusion
description: Learn how to customize the context menu in the Syncfusion React Document Editor component by adding custom menu items and handling selection events.
control: Customize Context Menu
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---

# Customize context menu in React Document editor component
# Customize Context Menu in React Document Editor component

## How to customize context menu in Document Editor
## How to Customize Context Menu in the Document Editor

[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) allows you to add custom option in context menu. It can be achieved by using the [`addCustomMenu()`](https://ej2.syncfusion.com/react/documentation/api/document-editor/contextmenu#addcustommenu) method and custom action is defined using the [`customContextMenuSelect`](https://ej2.syncfusion.com/react/documentation/api/document-editor/customContentMenuEventArgs/)
[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) allows you to add custom options to the context menu. Use the [`addCustomMenu()`](https://ej2.syncfusion.com/react/documentation/api/document-editor/contextmenu#addcustommenu) method to add a custom option, and handle the selection with the [`customContextMenuSelect`](https://ej2.syncfusion.com/react/documentation/api/document-editor/customContentMenuEventArgs) event.

### Add Custom Option

The following code shows how to add custom option in context menu.
The following code shows how to add a custom option to the context menu.

```ts
import { createRoot } from 'react-dom/client';
Expand All @@ -25,7 +25,6 @@ import * as React from 'react';
import { MenuItemModel } from '@syncfusion/ej2-navigations';
import {
DocumentEditorContainerComponent,
CustomToolbarItemModel,
Toolbar,
} from '@syncfusion/ej2-react-documenteditor';
DocumentEditorContainerComponent.Inject(Toolbar);
Expand Down Expand Up @@ -80,17 +79,19 @@ createRoot(document.getElementById('sample')).render(<App />);

```

> 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> 1. The Web Service link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` used in the `serviceUrl` property is intended solely for demonstration and evaluation purposes.
N> 2. For production deployment, please host your own Web Service with your required server configurations.
N> 3. 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 it for the `serviceUrl` property.

### Customize custom option in context menu
### Customize Custom Option in Context Menu

Document Editor allows you to customize the added custom option and also to hide/show default context menu.
The Document Editor allows you to customize an added custom option and also to hide or show default context menu items.

#### Hide default context menu items
#### Hide Default Context Menu Items

Using [`addCustomMenu()`](https://ej2.syncfusion.com/react/documentation/api/document-editor/contextmenu#addcustommenu) method, you can hide the default context menu. By setting second parameter as true.
Using the [`addCustomMenu()`](https://ej2.syncfusion.com/react/documentation/api/document-editor/contextmenu#addcustommenu) method, you can replace the default context menu by setting the second parameter to `true`.

The following code shows how to hide default context menu and add custom option in context menu.
The following code shows how to replace the default context menu and add a custom option in the context menu.

```ts
import { createRoot } from 'react-dom/client';
Expand All @@ -99,7 +100,6 @@ import * as React from 'react';
import { MenuItemModel } from '@syncfusion/ej2-navigations';
import {
DocumentEditorContainerComponent,
CustomToolbarItemModel,
Toolbar,
} from '@syncfusion/ej2-react-documenteditor';
DocumentEditorContainerComponent.Inject(Toolbar);
Expand Down Expand Up @@ -140,11 +140,13 @@ createRoot(document.getElementById('sample')).render(<App />);

```

> 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> 1. The Web Service link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` used in the `serviceUrl` property is intended solely for demonstration and evaluation purposes.
N> 2. For production deployment, please host your own Web Service with your required server configurations.
N> 3. 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 it for the `serviceUrl` property.

#### Customize added context menu items
#### Customize Added Context Menu Items

The following code shows how to hide/show added custom option in context menu using the [`customContextMenuBeforeOpen`](https://ej2.syncfusion.com/react/documentation/api/document-editor/beforeOpenCloseCustomContentMenuEventArgs/).
The following code shows how to show or hide an added custom option in the context menu using the [`customContextMenuBeforeOpen`](https://ej2.syncfusion.com/react/documentation/api/document-editor/beforeOpenCloseCustomContentMenuEventArgs) event.

```ts
import { createRoot } from 'react-dom/client';
Expand All @@ -153,7 +155,6 @@ import * as React from 'react';
import { MenuItemModel } from '@syncfusion/ej2-navigations';
import {
DocumentEditorContainerComponent,
CustomToolbarItemModel,
Toolbar,
} from '@syncfusion/ej2-react-documenteditor';
DocumentEditorContainerComponent.Inject(Toolbar);
Expand Down Expand Up @@ -216,9 +217,11 @@ createRoot(document.getElementById('sample')).render(<App />);

```

> 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> 1. The Web Service link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` used in the `serviceUrl` property is intended solely for demonstration and evaluation purposes.
N> 2. For production deployment, please host your own Web Service with your required server configurations.
N> 3. 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 it for the `serviceUrl` property.

The following is the output of custom context menu with customization.
The following is the output of the custom context menu with customization.

{% tabs %}
{% highlight js tabtitle="index.jsx" %}
Expand All @@ -234,13 +237,15 @@ The following is the output of custom context menu with customization.

{% previewsample "/document-processing/code-snippet/document-editor/react/customize-context-menu-cs1" %}

> 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> 1. The Web Service link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` used in the `serviceUrl` property is intended solely for demonstration and evaluation purposes.
N> 2. For production deployment, please host your own Web Service with your required server configurations.
N> 3. 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 it for the `serviceUrl` property.

#### 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()`](https://ej2.syncfusion.com/react/documentation/api/document-editor/contextmenu#addcustommenu) method.
#### Customize Context Menu with Sub-Menu Items

The Document Editor allows you to customize the context menu with sub-menu items. It can be achieved by using the [`addCustomMenu()`](https://ej2.syncfusion.com/react/documentation/api/document-editor/contextmenu#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 sub-items inside a custom context menu option in the Document Editor container.

```ts
import * as ReactDOM from 'react-dom';
Expand Down Expand Up @@ -299,7 +304,9 @@ ReactDOM.render(<App />, document.getElementById('sample'));

```

> 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> 1. The Web Service link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` used in the `serviceUrl` property is intended solely for demonstration and evaluation purposes.
N> 2. For production deployment, please host your own Web Service with your required server configurations.
N> 3. 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 it for the `serviceUrl` property.

## Online Demo

Expand Down
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
---
layout: post
title: Supported File Formats in React DOCX Editor | Syncfusion
description: Learn more about the supported file formats in Syncfusion® React DOCX Editor (Document Editor) for opening and exporting documents.
description: Learn more about the supported file formats in Syncfusion® React Document Editor (Document Editor) for opening and exporting documents.
control: Supported File Formats
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---

# Supported File Formats in React DOCX Editor
# Supported File Formats in React Document Editor

[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) supports a wide range of Microsoft Word and other document formats for opening and exporting, with both client-side and server-side capabilities.
[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) supports a wide range of Microsoft Word and other document formats. Some operations are handled client-side, while others require server-side processing.

## Supported File Formats

Expand All @@ -34,10 +34,10 @@ N> * Requires server-side interactions for the operations.

## Supported platforms for server-side dependencies

You can deploy web APIs for the server-side dependencies of the Document Editor component on the following platforms.
You can deploy Web Services for the server-side dependencies of the Document Editor component on the following platforms.

- [ASP.NET Core](./web-services/core)
- [ASP.NET MVC](./web-services/mvc)
- [Java](./web-services/java)
- [ASP.NET Core](./web-services/core)
- [ASP.NET MVC](./web-services/mvc)
- [Java](./web-services/java)

To know more about server-side dependencies, refer to this [page](./web-services-overview).
For more information about server-side dependencies, refer to this [page](./web-services-overview).
Loading