Skip to content

1043289-Updated UG Changes in Angular Platform #3959

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
Vellaisamy5301 wants to merge 1 commit into
base: development
Choose a base branch
from
Open

1043289-Updated UG Changes in Angular Platform #3959

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
8 changes: 4 additions & 4 deletions ...cessor/angular/server-deployment/word-processor-server-docker-image-overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
layout: post
title: Image overview in Angular Document editor component | Syncfusion
title: Image overview in Angular DOCX Editor component | Syncfusion
description: Learn here all about Word processor server docker image overview in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Word processor server docker image overview
control: Word processor server docker image overview
documentation: ug
domainurl: ##DomainURL##
---
# Word processor server docker image overview in Angular Document editor component

The **[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-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 **[Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-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.

Expand Down Expand Up @@ -55,7 +55,7 @@ docker-compose up

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 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).

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

Expand Down
20 changes: 10 additions & 10 deletions Document-Processing/Word/Word-Processor/angular/shapes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
---
layout: post
title: Shapes in Angular Document editor component | Syncfusion
description: Learn here all about Shapes in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Shapes in Angular DOCX Editor component | Syncfusion
description: Learn here all about Shapes in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Shapes
control: Shapes
documentation: ug
domainurl: ##DomainURL##
---

# Shapes in Angular Document editor component
# Shapes in Angular 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, [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-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, [Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-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

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 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 autoshapes and grouped shapes in Word documents using the Angular Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/angular/#/tailwind3/document-editor/autoshapes).
Explore how to preserve AutoShapes and grouped shapes in Word documents using the Angular Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/angular/#/tailwind3/document-editor/autoshapes).
22 changes: 11 additions & 11 deletions Document-Processing/Word/Word-Processor/angular/spell-check.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
---
layout: post
title: Spell check in Angular Document editor component | Syncfusion
description: Learn here all about Spell check in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Spell check in Angular DOCX editor component | Syncfusion
description: Learn here all about Spell check in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Spell check
control: Spell check
documentation: ug
domainurl: ##DomainURL##
---

# Spell check in Angular Document editor component
# Spell Check in Angular Document Editor

[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-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).
[Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-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.

```typescript
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
Expand All @@ -36,8 +36,9 @@ export class AppComponent {

## Features

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

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

## Enable SpellCheck

Expand Down Expand Up @@ -121,10 +122,9 @@ Previously on every `SpellChecker.GetSuggestion()` method call, the `.aff` and d

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.

>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 affix file.
N> 2. If you pass null for the parameters `affPath` and `possibleWords`, then it will add a single root word to 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 Down
44 changes: 22 additions & 22 deletions Document-Processing/Word/Word-Processor/angular/styles.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,40 @@
---
layout: post
title: Styles in Angular Document editor component | Syncfusion
description: Learn here all about Styles in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Styles in Angular DOCX Editor component | Syncfusion
description: Learn here all about Styles in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Styles
control: Styles
documentation: ug
domainurl: ##DomainURL##
---

# Styles in Angular Document editor component
# Styles in Angular Document Editor component

Styles are useful for applying a set of formatting consistently throughout the document. In [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor), styles are created and added to a document programmatically or via the built-in Styles dialog.
Styles are useful for applying a set of formatting consistently throughout the document. In the Document Editor, styles are created and added to a document programmatically or via the built-in Styles dialog.

## Styles definition overview

A Style in document editor should have the following properties:
A style in the Document Editor should have the following properties:

* **name**: Name of the style. All styles in a document have a unique name, which is used as an identifier when applying the style.
* **type**: Specifies the document elements that the style will target. For example, paragraph or character.
* **next**: Specifies the style that should be automatically applied to a new paragraph created after the current one.
* **link**: Provides a relation between the paragraph and character style.
* **characterFormat**: Specifies the properties of paragraph and character style.
* **characterFormat**: Specifies the properties of paragraph and character styles.
* **paragraphFormat**: Specifies the properties of paragraph style.
* **basedOn**: Specifies that the current style inherits the style set to this property. This is how hierarchical styles are defined. It can be optional.

> The style type should match the inherited style type. For example, it is not possible to have a character style inherit a paragraph style.
N> The style type should match the inherited style type. For example, it is not possible to have a character style inherit a paragraph style.

## Default style

The default style for span and paragraph properties is normal. It internally inherits the default style of the document loaded or document editor component.
The default style for span and paragraph properties is the Normal style. It internally inherits the default style of the document loaded or Document Editor component.

## Style hierarchy

Each style initially checks its local value for the property that is being evaluated and turns to the style it is based on. If no local value is found, it turns to its default style.
Each style initially checks its local value for the property that is being evaluated and falls back to the style it is based on. If no local value is found, it falls back to its default style.

Style inheritance of different styles are listed as follows:
Style inheritance for different styles is listed as follows:

### Character style

Expand All @@ -55,13 +55,13 @@ When a paragraph style is based on a linked style, the inheritance of the proper

### Linked style

Linked styles are composite styles and their components are paragraph and character styles with link between them. To apply paragraph properties, take the properties from the linked paragraph style. Similarly, to apply character properties, take the properties from linked character style.
Linked styles are composite styles and their components are paragraph and character styles with a link between them. To apply paragraph properties, take the properties from the linked paragraph style. Similarly, to apply character properties, take the properties from the linked character style.
Linked styles are based on other linked styles or on paragraph styles.

When a linked style is based on a paragraph style, the hierarchy of the properties is as follows:

* Paragraph properties are inherited from the ‘basedOn’ paragraph style.
* Character properties are inherited from the ‘basedOn’ paragraph style.
* Paragraph properties are inherited from the 'basedOn' paragraph style.
* Character properties are inherited from the 'basedOn' paragraph style.

When a linked style is based on another linked style, the hierarchy of the properties is as follows:

Expand All @@ -70,7 +70,7 @@ When a linked style is based on another linked style, the hierarchy of the prope

## Defining new styles

New Styles are defined and added to the style collection of the document. In this way, they will be discovered by the default UI and applied to the parts of a document.
New styles are defined and added to the style collection of the document. In this way, they will be discovered by the default UI and applied to the parts of a document.

### Defining a character style

Expand Down Expand Up @@ -127,7 +127,7 @@ The following example shows how to programmatically create a paragraph style.

### Defining a linked style

The following example shows how to programmatically create linked style.
The following example shows how to programmatically create a linked style.

```typescript
let styleJson: any = {
Expand Down Expand Up @@ -158,13 +158,13 @@ The following example shows how to programmatically create linked style.

## Applying a style

The styles are applied using the **applyStyle** method of **Editor**, the parameter should be passed is the **Name** of the Style.
The styles are applied using the **applyStyle** method of **Editor**, the parameter to be passed is the **Name** of the style.

The styles of the **Character** type is applied to the currently selected part of the document. If there is no selection, the values that will be applied to the word at caret position. The styles of **Paragraph** type follow the same logic and are applied to all paragraphs in the selection or the current paragraph.
The styles of the **Character** type are applied to the currently selected part of the document. If there is no selection, the values will be applied to the word at the caret position. The styles of **Paragraph** type follow the same logic and are applied to all paragraphs in the selection or the current paragraph.

When there is no selection, styles of **Linked** type will change the values of the paragraph, and apply both the Paragraph and Character properties. When there is selection, Linked Style changes only the character properties of the selected text.
When there is no selection, styles of **Linked** type will change the values of the paragraph, and apply both the Paragraph and Character properties. When there is a selection, the linked style changes only the character properties of the selected text.

For example, the following line will apply the "New Linked" to the current paragraph.
For example, the following line will apply the "New Linked" style to the current paragraph.

```typescript
this.documentEditor.editor.applyStyle('New Linked');
Expand All @@ -175,13 +175,13 @@ this.documentEditor.editor.applyStyle('New Linked', true);

## Get Styles

You can get the styles in the document using the below code snippet.
You can get the styles in the document using the following code snippet.

```typescript
//Get paragraph styles
let paragraphStyles = this.documentEditor.getStyles('Paragraph');
//Get character styles
let paragraphStyles = this.documentEditor.getStyles('Character');
let characterStyles = this.documentEditor.getStyles('Character');
```

## Modify an existing style
Expand Down