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: Image overview in React Document editor component | Syncfusion
description: Learn here all about Word processor server docker image overview in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more.
title: Image overview in React DOCX Editor component | Syncfusion
description: Learn here all about Word processor server docker image overview in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more.
control: Word processor server docker image overview
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---
# Word processor server docker image overview in React Document editor component
# React Document Editor Server Docker Image Overview

The [React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (also known as Document Editor)** is a component with editing capabilities like Microsoft Word. It is used to create, edit, view, and print Word documents. It provides all the common word processing abilities, including editing text; formatting contents; resizing images and tables; finding and replacing text; importing, exporting, and printing Word documents; and using bookmarks and tables of contents.
The [React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (also known as Document Editor) is a component with editing capabilities like Microsoft Word. It is used to create, edit, view, and print Word documents. It provides all the common word processing abilities, including editing text; formatting contents; resizing images and tables; finding and replacing text; importing, exporting, and printing Word documents; and using bookmarks and tables of contents.

This Docker image is the predefined Docker container of Syncfusion’s Word Processor backend. You can deploy it quickly to your infrastructure.
This Docker image is the predefined Docker container of Syncfusion’s Word Processor back-end. You can deploy it quickly to your infrastructure.

Word Processor is a commercial product, and it requires a valid license to use it in a production environment [`(request license or trial key).`](https://help.syncfusion.com/common/essential-studio/licensing/licensing-faq/where-can-i-get-a-license-key)

Expand All @@ -22,7 +22,7 @@ The Word Processor is supported in the JavaScript, Angular, React, Vue, ASP.NET
Have [`Docker`](https://www.docker.com/products/container-runtime#/download) installed in your environment:

* On Windows, install [`Docker for Windows`](https://hub.docker.com/editions/community/docker-ce-desktop-windows).
* On macOS, install [`Docker for Mac`](https://hub.docker.com/editions/community/docker-ce-desktop-windows).
* On macOS, install [`Docker for Mac`](https://hub.docker.com/editions/community/docker-ce-desktop-mac).

## How to deploy Word Processor Docker image

Expand All @@ -38,14 +38,14 @@ Have [`Docker`](https://www.docker.com/products/container-runtime#/download) ins
version: '3.4'

services:
word-processor-server:
image: syncfusion/word-processor-server:latest
environment:
#Provide your license key for activation
SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY
ports:
- "6002:80"
```
word-processor-server:
image: syncfusion/word-processor-server:latest
environment:
#Provide your license key for activation
SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY
ports:
- "6002:80"
```

**Step 3:** In a terminal tab, navigate to the directory where you’ve placed the docker-compose.yml file and execute the following.

Expand All @@ -55,92 +55,92 @@ Have [`Docker`](https://www.docker.com/products/container-runtime#/download) ins

Now the Word Processor server Docker instance runs in the localhost with the provided port number `http://localhost:6002`. Open this link in a browser and navigate to the Word Processor Web API control `http://localhost:6002/api/documenteditor`. It returns the default get method response.

**Step 4:** Append the Docker instance running the URL `(http://localhost:6002/api/documenteditor)` to the service URL in the client-side Word Processor control. For more information about how to get started with the Word Processor control, refer to this [`getting started page.`](../getting-started).
**Step 4:** Append the Docker instance running URL `(http://localhost:6002/api/documenteditor)` to the service URL in the client-side Word Processor control. For more information about how to get started with the Word Processor control, refer to this [`getting started page.`](../getting-started).

## How to configure spell checker dictionaries path in Docker compose file
## How to configure spell checker dictionary path in Docker compose file

**Step 1:** In the Docker compose file, mount the local directory as a container volume using the following code.

```
version: '3.4'
version: '3.4'
services:
word-processor-server:
image: syncfusion/word-processor-server:latest
environment:
#Provide your license key for activation
SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY
volumes:
- ./data:/app/data
ports:
- "6002:80"
```
word-processor-server:
image: syncfusion/word-processor-server:latest
environment:
#Provide your license key for activation
SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY
volumes:
- ./data:/app/data
ports:
- "6002:80"
```

This YAML definition binds the data folder that is available in the Docker compose file directory.

**Step 2:** In the data folder, include the dictionary files (.dic, .aff) and JSON file. The JSON file should contain the language based dictionary file configuration in the following format.
**Step 2:** In the data folder, include the dictionary files (.dic, .aff) and JSON file. The JSON file should contain the language-based dictionary file configuration in the following format.

```
[
{
"LanguadeID": 1036,
"LanguageID": 1036,
"DictionaryPath": "fr_FR.dic",
"AffixPath": "fr_FR.aff",
"PersonalDictPath": "customDict.dic"
},
{
"LanguadeID": 1033,
"LanguageID": 1033,
"DictionaryPath": "en_US.dic",
"AffixPath": "en_US.aff",
"PersonalDictPath": "customDict.dic"
}
]
```
]
```

>Note: By default, the json file name should be "spellcheck.json". You can also use different file name by mounting the file name to 'SPELLCHECK_JSON_FILENAME' attribute in Docker compose file as below,
N> By default, the JSON file name should be "spellcheck.json". You can also use a different file name by mounting the file name to the 'SPELLCHECK_JSON_FILENAME' attribute in the Docker compose file as below.

```
version: '3.4'

services:
word-processor-server:
image: syncfusion/word-processor-server:latest
environment:
#Provide your license key for activation
SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY
SPELLCHECK_DICTIONARY_PATH: data
SPELLCHECK_JSON_FILENAME: spellcheck1.json
volumes:
- ./data:/app/data
ports:
- "6002:80"
```

**Step 3:** For handling the personal dictionary, place an empty .dic file (e.g.,. customDict.dic file) in the data folder.
version: '3.4'

services:
word-processor-server:
image: syncfusion/word-processor-server:latest
environment:
#Provide your license key for activation
SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY
SPELLCHECK_DICTIONARY_PATH: data
SPELLCHECK_JSON_FILENAME: spellcheck1.json
volumes:
- ./data:/app/data
ports:
- "6002:80"
```

**Step 3:** For handling the personal dictionary, place an empty .dic file (e.g., customDictionary.dic file) in the data folder.

**Step 4:** Provide the configured volume path to the environment variable like in the following in the Docker compose file.

```
version: '3.4'
services:
word-processor-server:
image: syncfusion/word-processo -server:latest
environment:
#Provide your license key for activation
SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY
SPELLCHECK_DICTIONARY_PATH: data
volumes:
- ./data:/app/data
ports:
- "6002:80"
```
version: '3.4'
services:
word-processor-server:
image: syncfusion/word-processor-server:latest
environment:
#Provide your license key for activation
SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY
SPELLCHECK_DICTIONARY_PATH: data
volumes:
- ./data:/app/data
ports:
- "6002:80"
```

## How to copy template Word documents to Docker image

You can copy the required template Word documents into docker container while deploying the docker image to server. You can open these Word documents present in the server by passing the document path (name with relative path) to LoadDocument() web API.
You can copy the required template Word documents into the docker container while deploying the docker image to the server. You can open these Word documents present in the server by passing the document path (name with relative path) to the LoadDocument() web API.

>Note: Place the word files in the data folder mentioned in the volumes section(i.e., C:/Docker/Data) of the docker-compose.yml file. All the files present in the folder path (C:/Docker/Data) mentioned in the volumes section of docker-compose.yml file will be copied to the respective folder (/app/Data) of docker container. The Word documents copied to docker container can be processed using the 'LoadDocument' web API.
N> Place the word files in the data folder mentioned in the volumes section (e.g., C:/Docker/Data) of the docker-compose.yml file. All the files present in the folder path (C:/Docker/Data) mentioned in the volumes section of the 'docker-compose.yml' file will be copied to the respective folder (/app/Data) of the docker container. The Word documents copied to the docker container can be processed using the 'LoadDocument' web API.

The following code example shows how to use LoadDocument() API in document editor.
The following code example shows how to use the LoadDocument() API in Document Editor.

```ts
import * as ReactDOM from 'react-dom';
Expand Down
18 changes: 9 additions & 9 deletions Document-Processing/Word/Word-Processor/react/shapes.md
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
---
layout: post
title: Shapes in React Document editor component | Syncfusion
description: Learn here all about Shapes in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more.
title: Shapes in React DOCX Editor component | Syncfusion
description: Learn here all about Shapes in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more.
control: Shapes
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---

# Shapes in React Document editor component
# Shapes in React Document Editor component

Shapes are drawing objects that include a text box, rectangles, lines, curves, circles, etc. It can be preset or custom geometry.
Shapes are drawing objects that include a text box, rectangles, lines, curves, circles, etc. They can have preset or custom geometry.

>Note: At present, [React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) does not have support to insert shapes. however, if the document contains a shape while importing, it will be preserved properly.
N> At present, [React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) does not have support to insert shapes. However, if the document contains a shape while importing, it will be preserved properly.

## Supported shapes

The DocumentEditor has preservation support for Lines, Rectangle, Basic Shapes, Block Arrows, Equation Shapes,Flowchart and Stars and Banners.
The DocumentEditor has preservation support for Lines, Rectangle, Basic Shapes, Block Arrows, Equation Shapes, Flowchart and Stars and Banners.

![List of supported shapes in DocumentEditor](images/Shapes_images/supported_shapes.png)

>Note: When using ASP.NET MVC service, the unsupported shapes will be converted as image and preserved as image.
N> When using ASP.NET MVC service, the unsupported shapes will be converted to an image and preserved as an image.

## Text box Shape

Expand All @@ -40,8 +40,8 @@ Text wrapping refers to how shapes fit with surrounding text in a document. Plea

## Positioning the shape

Document Editor preserves the position properties of the shape and displays the shape based on position properties. It does not support modifying the position properties. Whereas the shape will be automatically moved along with text edited if it is positioned relative to the line or paragraph.
Document Editor preserves the position properties of the shape and displays the shape based on position properties. It does not support modifying the position properties. However, the shape will be automatically moved along with the edited text if it is positioned relative to the line or paragraph.

## Online Demo

Explore how to preserve auto shapes and grouped shapes in Word documents using the React Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/react/#/tailwind3/document-editor/autoshapes).
Explore how to preserve AutoShapes and grouped shapes in Word documents using the React Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/react/#/tailwind3/document-editor/autoshapes).
24 changes: 12 additions & 12 deletions Document-Processing/Word/Word-Processor/react/spell-check.md
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
---
layout: post
title: Spell check in React DOCX Editor | Syncfusion
description: Learn how to use Spell check in the React DOCX Editor to detect and correct errors seamlessly- without relying on Microsoft Word.
description: Learn how to use Spell check in the React Document Editor to detect and correct errors seamlessly, without relying on Microsoft Word.
control: Spell check
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---

# Spell Check in React DOCX Editor
# Spell Check in React Document Editor

[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) supports spell checking for document content. It identifies misspelled words and provides suggestions through a dialog and the context menu. The spell checker is compatible with [Hunspell](https://github.com/wooorm/dictionaries) dictionary files.
[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) supports spell checking for document content. It identifies misspelled words and provides suggestions through a dialog and the context menu. The spell checker is compatible with [Hunspell](https://github.com/wooorm/dictionaries) dictionary files.

## Features

* Supports context menu suggestions for misspelled words.

* Provides options such as Ignore, Ignore All, Change, and Change All in the spell check dialog.

## Configure spell check in React DOCX Editor
## Configure spell check in React Document Editor

Spell checking is enabled using the [enableSpellCheck](https://ej2.syncfusion.com/documentation/api/document-editor-container/index-default#enablespellcheck) property and by configuring the spellChecker settings. A server-side service is required to process text, detect misspelled words, and provide suggestions for display in the editor.

Expand All @@ -41,11 +41,11 @@ function App() {
let container: DocumentEditorContainerComponent = containerRef.current as DocumentEditorContainerComponent;
// Get the SpellChecker instance from DocumentEditorContainer.
let spellChecker: SpellChecker = container.documentEditor.spellChecker;
// set the language ID for spell checker. Here, 1033 is the language ID for English (United States).
// Set the language ID for spell checker. Here, 1033 is the language ID for English (United States).
spellChecker.languageID = 1033;
// remove the underline for misspelled words.
spellChecker.removeUnderline = false;
// Allow suggestion for misspelled word
// Allow suggestions for misspelled words.
spellChecker.allowSpellCheckAndSuggestion = true;
}
}, []);
Expand Down Expand Up @@ -101,7 +101,7 @@ The following code example demonstrates how to configure this behavior.

```ts

container.documentEditor.spellChecker.removeUnderline = false;
container.documentEditor.spellChecker.removeUnderline = true;

```

Expand All @@ -113,7 +113,7 @@ The following code example demonstrates how to configure the languageID.

```ts

container.documentEditor.spellChecker.languageID = 1033; //LCID of "en-us";
container.documentEditor.spellChecker.languageID = 1033; //LCID of "en-us"

```

Expand Down Expand Up @@ -173,21 +173,21 @@ container.documentEditor.spellChecker.enableOptimizedSpellCheck = true;

## Context menu

Right-click on an error word to open the context menu with spell check options. See the screenshot below for reference.
Right-click on a misspelled word to open the context menu with spell check options. See the screenshot below for reference.

### More suggestions

The context menu shows suggestions for misspelled words. By clicking the required word from the suggestions, the error word is replaced automatically.
The context menu shows suggestions for misspelled words. By clicking the required word from the suggestions, the misspelled word is replaced automatically.

### Add to dictionary

This option allows the current word to be added to the dictionary. As a result, the spell checker will not treat the word as an error in the future
This option allows the current word to be added to the dictionary. As a result, the spell checker will not treat the word as an error in the future.

### Ignore Once and Ignore All

If the word should not be added to the dictionary and should not be marked as an error, the Ignore Once or Ignore All options can be used.

**Ignore**: Ignores only the current occurrence of a word.
**Ignore Once:** Ignores only the current occurrence of a word.

**Ignore All:** Ignores all occurrences of a word in the entire document.

Expand Down
Loading