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
22 changes: 11 additions & 11 deletions Document-Processing/Word/Word-Processor/javascript-es5/shapes.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,42 +3,42 @@ layout: post
title: Shapes in JavaScript (ES5) Document editor control | Syncfusion
description: Learn here all about Shapes in Syncfusion JavaScript (ES5) Document editor control of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Shapes
control: Shapes
documentation: ug
domainurl: ##DomainURL##
---

# Shapes in JavaScript (ES5) Document editor control

Shapes are drawing objects that include a text box, rectangles, lines, curves, circles, etc. It can be preset or custom geometry. At present, [JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-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.
Shapes are drawing objects that include a text box, rectangles, lines, curves, circles, etc. They can be preset or custom geometry. At present, [JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) does not have support to insert shapes. However, if the imported document contains shapes, they are preserved within the editor.

## Supported shapes

The DocumentEditor has preservation support for Lines, Rectangle, Basic Shapes, Block Arrows, Equation Shapes,Flowchart and Stars and Banners.
The Document Editor 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)
![List of supported shapes in Document Editor](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 are converted to images and preserved as images.

## Text box Shape
## Text Box Shape

A text box is a rectangular area on the document where you can enter text. When you click in a text box, a flashing cursor will display indicating that you can begin typing. It allows you to enter multiple lines of text with all text formatting.
A text box is a rectangular area on the document where you can enter text. When you click in a text box, a flashing cursor appears, indicating that you can begin typing. It allows you to enter multiple lines of text with all text formatting.

![Text box shape view in DocumentEditor](images/Shapes_images/textbox_shape.png)
![Text box shape view in Document Editor](images/Shapes_images/textbox_shape.png)

## Shape Resizer

The DocumentEditor also supports a built-in shape resizer to resize the shapes present in the document. The shape resizer accepts both touch and mouse interactions.
The Document Editor also supports a built-in shape resizer to resize the shapes present in the document. The shape resizer accepts both touch and mouse interactions.

![Shape resizer view in DocumentEditor](images/Shapes_images/shape_resizer.png)
![Shape resizer view in Document Editor](images/Shapes_images/shape_resizer.png)

## Text wrapping style

Text wrapping refers to how shapes fit with surrounding text in a document. Please [refer to this page](./text-wrapping-style) for more information about text wrapping styles available in Word documents.

## Positioning the shape

DocumentEditor 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 moves automatically with the surrounding text if it is positioned relative to the line or paragraph.

## Online Demo

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ domainurl: ##DomainURL##

# Spell check in JavaScript (ES5) Document editor control

[JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) supports performing spell checking for any input text. You can perform spell checking for the text in Document Editor and it will provide suggestions for the mis-spelled words through dialog and in context menu. Document editor's spell checker is compatible with [hunspell dictionary files](https://github.com/wooorm/dictionaries).
[JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) supports performing spell checking for any input text. You can perform spell checking for the text in Document Editor. It provides suggestions for misspelled words through a dialog and the context menu. Document Editor's spell checker is compatible with [hunspell dictionary files](https://github.com/wooorm/dictionaries).

```ts
import { DocumentEditorContainer, Toolbar, SpellChecker } from '@syncfusion/ej2-documenteditor';
Expand All @@ -20,60 +20,59 @@ let container: DocumentEditorContainer = new DocumentEditorContainer({
enableToolbar: true, enableSpellCheck: true
});
container.appendTo('#container');
//Accessing spell checker.
// Accessing spell checker.
let spellChecker: SpellChecker = container.documentEditor.spellChecker;
//Set language id to map dictionary in server side.;
// Set language ID to map the dictionary on the server side.
spellChecker.languageID = 1033;
spellChecker.removeUnderline = false;
//Allow suggetion for miss spelled word/
// Allow suggestion for misspelled words.
spellChecker.allowSpellCheckAndSuggestion = true;
```

>Note: Document Editor requires server-side dependencies for spell check configuration.
Refer to the [Document Editor Web API service projects](https://help.syncfusion.com/document-processing/word/word-processor/javascript-es5/web-services/core) link for configuring spell checker in server-side.To know about server-side dependencies, please refer this [page](./web-services-overview).
N> Document Editor requires server-side dependencies for spell check configuration. Refer to the [Document Editor Web API service projects](https://help.syncfusion.com/document-processing/word/word-processor/javascript-es5/web-services/core) link for configuring spell checker on the server side. To know about server-side dependencies, please refer to this [page](./web-services-overview).

## Features

* Supports context menu suggestions.
* Provides built-in options to Ignore, Ignore All, Change, Change All for error words in spell checker dialog.
* Provides built-in options to Ignore, Ignore All, Change, Change All for error words in the spell checker dialog.

## Enable SpellCheck

To enable spell check in DocumentEditor, set [`enableSpellCheck`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#enablespellcheck) property as `true` and then configure SpellCheckSettings.
To enable spell check in Document Editor, set [`enableSpellCheck`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#enablespellcheck) property as `true` and then configure SpellCheckSettings.

## Disable SpellCheck

To disable spell check in DocumentEditor, set [`enableSpellCheck`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#enablespellcheck) property as `false` or remove [`enableSpellCheck`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#enablespellcheck) property initialization code. The default value of this property is false.
To disable spell check in Document Editor, set [`enableSpellCheck`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#enablespellcheck) property as `false` or remove [`enableSpellCheck`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#enablespellcheck) property initialization code. The default value of this property is false.

## Spell check settings

### Remove Underline

By default, mis-spelled words are marked with squiggly line. You can also disable this behavior by enabling the [`removeUnderline`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/spellChecker#removeunderline) API and now, the squiggly lines will never be rendered for mis-spelled words.
By default, misspelled words are marked with a squiggly line. You can also disable this behavior by enabling the [`removeUnderline`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/spellChecker#removeunderline) API, and the squiggly lines will no longer be rendered for misspelled words.

```ts
documentEditor.spellChecker.removeUnderline = false;
```

### AllowSpellCheckAndSuggestion

By default, on performing spell check in Document Editor, both spelling and suggestions of the mis-spelled words will be retrieved, and this mis-spelled words can be corrected through context menu suggestions. You can modify this behavior using the [`allowSpellCheckAndSuggestion`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/spellChecker#allowspellcheckandsuggestion) API, which will perform only spell check.
By default, on performing spell check in Document Editor, both spelling and suggestions of the misspelled words are retrieved, and these misspelled words can be corrected through context menu suggestions. You can modify this behavior using the [`allowSpellCheckAndSuggestion`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/spellChecker#allowspellcheckandsuggestion) API, which performs only spell check.

```ts
documentEditor.spellChecker.allowSpellCheckAndSuggestion = false;
```

### LanguageID

Document Editor provides multi-language spell check support. You can add as many languages (dictionaries) in the server-side and to use that language for spell checking in Document Editor, it must be matched with [`languageID`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/spellChecker#languageid) you pass in the Document Editor.
Document Editor provides multi-language spell check support. You can add as many languages (dictionaries) on the server side. To use that language for spell checking in Document Editor, it must match the [`languageID`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/spellChecker#languageid) you set in the Document Editor.

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

### EnableOptimizedSpellCheck

Document Editor provides option to spellcheck page by page when loading the documents. The default value of this property is false, so when opening the document spellcheck web API will be called for each word in the document. To optimize the frequency of spellcheck web API calls, you can enable this property.
Document Editor provides an option to spell check page by page when loading documents. The default value of this property is false, so when opening the document, the spell check web API is called for each word in the document. To optimize the frequency of spell check web API calls, you can enable this property.

The following code example illustrates how to enable optimized spell checking.

Expand All @@ -83,26 +82,27 @@ documentEditor.spellChecker.enableOptimizedSpellCheck = true;

### Spell check dictionary cache

Starting from `v20.1.0.xx`, we have optimized the performance and memory usage of spell checker by adding a static method to initialize the dictionaries with specified cache count.
Starting from `v20.1.0.xx`, the performance and memory usage of the spell checker have been optimized by adding a static method to initialize the dictionaries with a specified cache count.

By default, the spell checker holds only one language dictionary in memory. If you want to hold multiple dictionaries in memory, you need to set the cache limit by using `InitializeDictionaries` method as in the below example.
By default, the spell checker holds only one language dictionary in memory. If you want to hold multiple dictionaries in memory, you need to set the cache limit using the `InitializeDictionaries` method as in the below example.

```c#
List<DictionaryData> spellDictCollection = new List<DictionaryData>();
string personalDictPath = string.Empty;
int cacheCount = 2;
List<DictionaryData> spellDictCollection = new List<DictionaryData>();
string personalDictPath = string.Empty;
int cacheCount = 2;

// Initialize dictionaries
SpellChecker.InitializeDictionaries(spellDictCollection, personalDictPath, cacheCount);
// Initialize dictionaries
SpellChecker.InitializeDictionaries(spellDictCollection, personalDictPath, cacheCount);
```

If dictionaries are initialized using `InitializeDictionaries` method, then we should use default constructor of the `SpellChecker`to check spelling and get suggestion as in the below example code, it will prevent reinitialization of already loaded dictionaries.
If dictionaries are initialized using the `InitializeDictionaries` method, you should use the default constructor of the `SpellChecker` to check spelling and get suggestions, as in the code example below; this prevents reinitialization of already loaded dictionaries.

```c#
public string SpellCheck([FromBody] SpellCheckJsonData spellChecker)
{
try {
SpellChecker spellCheck = new SpellChecker();
try
{
SpellChecker spellCheck = new SpellChecker();
spellCheck.GetSuggestions(spellChecker.LanguageID, spellChecker.TexttoCheck, spellChecker.CheckSpelling, spellChecker.CheckSuggestion, spellChecker.AddWord);
return Newtonsoft.Json.JsonConvert.SerializeObject(spellCheck);
}
Expand All @@ -113,16 +113,15 @@ public string SpellCheck([FromBody] SpellCheckJsonData spellChecker)
}
```

Previously on every `SpellChecker.GetSuggestion()` method call, the `.aff` and dictionary data will be parsed to generate suggestion for miss spelled word. But, starting from `v20.1.0.xx`, the `.aff` and dictionary data will be parsed only for the first time alone while calling `SpellChecker.GetSuggestion()` method.
Previously, on every `SpellChecker.GetSuggestion()` method call, the `.aff` and dictionary data were parsed to generate suggestions for misspelled words. Starting from `v20.1.0.xx`, the `.aff` and dictionary data are parsed only on the first call to the `SpellChecker.GetSuggestion()` method.

### Add new root word and possible words to dictionary

If you find any root word is missing in the dictionary file, then you can add that new root word and the rule to form the possible words to dictionary file using `AddNewWord` API in the server-side Spell check library.
If you find that a root word is missing in the dictionary file, you can add that new root word and the rule to form the possible words to the dictionary file using the `AddNewWord` API in the server-side Spell check library.

>Note:
>1. The rules are framed automatically using the root word, the possible words and affix file.
>2. If you pass null for the parameters `affPath` and `possibleWords`, then it will add a single root word to dictionary.
>3. This API is included starting from `v20.2.0.xx`.
N> 1. The rules are framed automatically using the root word, the possible words, and the affix file.
N> 2. If you pass null for the parameters `affPath` and `possibleWords`, only a single root word is added to the dictionary.
N> 3. This API is included starting from `v20.2.0.xx`.

The following code example demonstrates how to add a new root word to the dictionary along with the rule to form the possible words.

Expand All @@ -134,30 +133,30 @@ spellChecker.AddNewWord("en.dic","en.aff", "construct", new string[] { "construc

## Context menu

Right click on error word to open the context menu with spell check options. Please see below screenshot for your reference.
Right-click on an incorrect word to open the context menu with spell check options. Please see the screenshot below for your reference.

![Spell check option in JavaScript document editor context menu](images/spell-check-menu.png)
![Spell check option in JavaScript Document Editor context menu](images/spell-check-menu.png)

### Suggestions

Context menu shows the suggestions for mis-spelled words. By clicking on the required word from suggestion, the error word gets replaced automatically.
The context menu shows suggestions for misspelled words. Click a suggestion to replace the word automatically.

### Add To Dictionary

Using this option, you can add the current word to the dictionary. So that the spell checker does not consider that word as error in future.
Using this option, you can add the current word to the dictionary so that the spell checker no longer flags it as an error.

### Ignore Once and Ignore All

If you do not wish to add the word to dictionary and do not want to show error, use Ignore Once or Ignore All options.
If you do not want to add the word to the dictionary and do not want to show the error, use the Ignore Once or Ignore All options.

Ignore: ignore only the current occurrence of a word from error.
Ignore: ignores only the current occurrence of the word.

Ignore All: ignore all occurrence of a word from error in the entire document.
Ignore All: ignores all occurrences of the word in the entire document.

### Spelling

Using this option, you can open spell check dialog. Please see below screenshot for your reference.
Using this option, you can open the spell check dialog. Please see the screenshot below for your reference.

![Spell check dialog in JavaScript document editor](images/spell-check-dialog.png)
![Spell check dialog in JavaScript Document Editor](images/spell-check-dialog.png)

* Refer to the [Spell checker](https://help.syncfusion.com/document-processing/word/word-processor/javascript-es5/web-services/core#spell-check) link for configuring spell checker in server-side.
N> Refer to the [Spell checker](https://help.syncfusion.com/document-processing/word/word-processor/javascript-es5/web-services/core#spell-check) link for configuring spell checker on the server side.
Loading