Skip to content
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
---
layout: post
title: Show hide spinner in Angular Document editor component | Syncfusion
description: Learn here all about Show hide spinner in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Show hide spinner in Angular DOCX Editor component | Syncfusion
description: Learn here all about Show hide spinner in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Show hide spinner
documentation: ug
domainurl: ##DomainURL##
---

# Show hide spinner in Angular Document editor component
# Show hide spinner in Angular Document Editor component

Using [`spinner`](https://ej2.syncfusion.com/documentation/spinner/getting-started#create-the-spinner-globally) component, you can show/hide spinner while opening document in [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor).
Using the [`spinner`](https://ej2.syncfusion.com/documentation/spinner/getting-started#create-the-spinner-globally) component, you can show or hide a spinner while opening a document in the [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor).

Example code snippet to show/hide spinner
Example code snippet to show or hide a spinner:

```typescript
// showSpinner() will make the spinner visible
showSpinner(document.getElementById('container'));

// hideSpinner() method used hide spinner
// hideSpinner() method is used to hide the spinner
hideSpinner(document.getElementById('container'));
```

Expand All @@ -39,4 +39,4 @@ Refer to the following example.
> 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.


>Note: In above example, we have used setInterval to hide spinner, just for demo purpose.
N> In the above example, we have used setInterval to hide the spinner, just for demo purposes.
20 changes: 10 additions & 10 deletions Document-Processing/Word/Word-Processor/angular/image.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
---
layout: post
title: Image in Angular Document editor component | Syncfusion
description: Learn here all about Image in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Image in Angular DOCX Editor component | Syncfusion
description: Learn here all about Image in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Image
documentation: ug
domainurl: ##DomainURL##
---

# Image in Angular Document editor component
# Image in Angular Document Editor component

[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) supports common raster format images like PNG, BMP, JPEG, SVG and GIF. You can insert an image file or online image in the document using the [`insertImage()`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor/#insertimage/) method. Refer to the following sample code.
[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) supports common raster image formats such as PNG, BMP, JPEG, SVG, and GIF. You can insert an image file or an online image in the document using the [`insertImage()`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor#insertimage) method. Refer to the following sample code.

{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
Expand All @@ -24,34 +24,34 @@ domainurl: ##DomainURL##

{% previewsample "/document-processing/samples/document-editor/angular/link-cs1" %}

Image files will be internally converted to base64 string. Whereas, online images are preserved as URL.
Image files are internally converted to base64 strings, whereas online images are preserved as URLs.

>Note: EMF and WMF images can't be inserted, but these types of images will be preserved in Document Editor when using ASP.NET MVC Web API.
N>: EMF and WMF images can't be inserted, but these types of images will be preserved in Document Editor when using ASP.NET MVC Web API.

## Image resizing

Document Editor provides built-in image resizer that can be injected into your application based on the requirements. This allows you to resize the image by dragging the resizing points using mouse or touch interactions. This resizer appears as follows.
Document Editor provides a built-in image resizer that can be injected into your application based on the requirements. This allows you to resize the image by dragging the resizing points using a mouse or touch interactions. This resizer appears as follows.

![Image](images/image.png)

## Changing size

Document Editor expose API to get or set the size of the selected image. Refer to the following sample code.
Document Editor exposes an API to get or set the size of the selected image. Refer to the following sample code.

```typescript
this.documentEditor.selection.imageFormat.width = 800;
this.documentEditor.selection.imageFormat.height = 800;
```

>Note: Images are stored and processed(read/write) as base64 string in DocumentEditor. The online image URL is preserved as a URL in Document Editor upon saving.
N>: Images are stored and processed (read/write) as base64 string in DocumentEditor. The online image URL is preserved as a URL in DocumentEditor upon saving.

## Text wrapping style

Text wrapping refers to how images 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 image

DocumentEditor preserves the position properties of the image and displays the image based on position properties. It does not support modifying the position properties. Whereas the image will be automatically moved along with text edited if it is positioned relative to the line or paragraph.
DocumentEditor preserves the position properties of the image and displays the image based on these position properties. It does not support modifying the position properties. The image will be automatically moved along with the edited text if it is positioned relative to the line or paragraph.

## See Also

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

# Import in Angular Document editor component
# Import in Angular Document Editor component

In [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor), the documents are stored in its own format called **Syncfusion Document Text (SFDT)**.
In [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor), the documents are stored in Document Editor's own format called **Syncfusion Document Text (SFDT)**.

The following example shows how to open SFDT data in Document Editor.

Expand All @@ -28,7 +28,7 @@ The following example shows how to open SFDT data in Document Editor.

## Import document from local machine

The following example shows how to import document from local machine.
The following example shows how to import a document from the local machine.

{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
Expand All @@ -42,13 +42,13 @@ The following example shows how to import document from local machine.

{% previewsample "/document-processing/samples/document-editor/angular/import-cs3" %}

## Convert word documents into SFDT
## Convert Word documents into SFDT

You can convert word documents into SFDT format using the .NET Standard library [`Syncfusion.EJ2.WordEditor.AspNet.Core`](<https://www.nuget.org/packages/Syncfusion.EJ2.WordEditor.AspNet.Core/>) by the web API service implementation. This library helps you to convert word documents (.dotx,.docx,.docm,.dot,.doc), rich text format documents (.rtf), and text documents (.txt) into SFDT format.
You can convert Word documents into SFDT format using the .NET Standard library [`Syncfusion.EJ2.WordEditor.AspNet.Core`](<https://www.nuget.org/packages/Syncfusion.EJ2.WordEditor.AspNet.Core/>) by the web API service implementation. This library helps you to convert Word documents (.dotx,.docx,.docm,.dot,.doc), rich text format documents (.rtf), and text documents (.txt) into SFDT format.

>Note: The Syncfusion<sup style="font-size:70%">&reg;</sup> Document Editor component's document pagination (page-by-page display) can't be guaranteed for all the Word documents to match the pagination of Microsoft Word application. For more information about [why the document pagination (page-by-page display) differs from Microsoft Word](./import#why-the-document-pagination-differs-from-microsoft-word)
N>: The Syncfusion<sup style="font-size:70%">&reg;</sup> Document Editor component's document pagination (page-by-page display) can't be guaranteed for all the Word documents to match the pagination of Microsoft Word application. For more information about [why the document pagination (page-by-page display) differs from Microsoft Word](./import#why-the-document-pagination-differs-from-microsoft-word).

Please refer the following example for converting word documents into SFDT.
Please refer to the following example for converting Word documents into SFDT.

```typescript
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
Expand Down Expand Up @@ -90,7 +90,7 @@ export class AppComponent {
ajax.onreadystatechange = () => {
if (ajax.readyState === 4) {
if (ajax.status === 200 || ajax.status === 304) {
// open SFDT text in document editor
// open SFDT text in Document Editor
this.documentEditor.open(ajax.responseText);
}
}
Expand All @@ -102,7 +102,7 @@ export class AppComponent {
}
```

Heres how to handle the server-side action for converting word document in to SFDT.
Here's how to handle the server-side action for converting a Word document into SFDT.

```csharp
[AcceptVerbs("Post")]
Expand Down Expand Up @@ -149,36 +149,36 @@ Here’s how to handle the server-side action for converting word document in to
}
```

To know about server-side action, please refer this [page](./web-services-overview).
To know about server-side action, please refer to this [page](./web-services-overview).

## Compatibility with Microsoft Word

Syncfusion<sup style="font-size:70%">&reg;</sup> Document Editor is a minimal viable Word document viewer/editor product for web applications. As most compatible Word editor, the product vision is adding valuable feature sets of Microsoft Word, and not to cover 100% feature sets of Microsoft Word desktop application. You can even see the feature sets difference between Microsoft Word desktop and their Word online application. So kindly don't misunderstand this component as a complete replacement for Microsoft Word desktop application and expect 100% feature sets of it.
Syncfusion<sup style="font-size:70%">&reg;</sup> Document Editor is a minimal viable Word document viewer/editor product for web applications. As the most compatible Word editor, the product vision is adding valuable feature sets of Microsoft Word, and not to cover 100% feature sets of Microsoft Word desktop application. You can even see the feature sets difference between Microsoft Word desktop and their Word online application. So kindly don't misunderstand this component as a complete replacement for Microsoft Word desktop application and expect 100% feature sets of it.

### How Syncfusion<sup style="font-size:70%">&reg;</sup> accepts the feature request for Document Editor
### How Syncfusion<sup style="font-size:70%">&reg;</sup> accepts the feature requests for Document Editor

Syncfusion accepts new feature request as valid based on feature value and technological feasibility, then plan to implement unsupported features incrementally in future releases in a phase-by-phase manner.
Syncfusion accepts new feature requests as valid based on feature value and technological feasibility, then plans to implement unsupported features incrementally in future releases in a phase-by-phase manner.

### How to report the problems in Document Editor
### How to report problems in Document Editor

You can report the problems with displaying, or editing Word documents in Document Editor component through [`feedback portal`](https://www.syncfusion.com/feedback). Kindly share the Word document for replicating the problem easily in minimal time. If you have confidential data, you can replace it and attach the document.
You can report problems with displaying or editing Word documents in Document Editor component through [`feedback portal`](https://www.syncfusion.com/feedback). Kindly share the Word document for replicating the problem easily in minimal time. If you have confidential data, you can replace it and attach the document.

### Why the document pagination differs from Microsoft Word

For your understanding about the Word document structure and the workflow of Word viewer/editor components, the Word document is a flow document in which content will not be preserved page by page; instead, the content will be preserved sequentially like a HTML file. Only the Word viewer/editor paginates the content of the Word document page by page dynamically, when opened for viewing or editing and this page-wise position information will not be preserved in the document level (it is Word file format specification standard). Syncfusion<sup style="font-size:70%">&reg;</sup> Document Editor component also does the same.
For your understanding about the Word document structure and the workflow of Word viewer/editor components, the Word document is a flow document in which content will not be preserved page by page; instead, the content will be preserved sequentially like an HTML file. Only the Word viewer/editor paginates the content of the Word document page by page dynamically, when opened for viewing or editing and this page-wise position information will not be preserved at the document level (it is Word file format specification standard). Syncfusion<sup style="font-size:70%">&reg;</sup> Document Editor component also does the same.

At present there is a known technical limitation related to slight difference in text size calculated using HTML element based text measuring approach. Even though the text size is calculated with correct font and font size values, the difference lies; it is as low as 0.00XX to 0. XXXX values compared to that of Microsoft Word application’s display. Hence the document pagination (page-by-page display) can't be guaranteed for all the Word documents to match the pagination of Microsoft Word application.
At present there is a known technical limitation related to slight difference in text size calculated using HTML element based text measuring approach. Even though the text size is calculated with correct font and font size values, the difference lies; it is as low as 0.00XX to 0.XXXX values compared to that of Microsoft Word application’s display. Hence the document pagination (page-by-page display) can't be guaranteed for all the Word documents to match the pagination of Microsoft Word application.

### How Syncfusion<sup style="font-size:70%">&reg;</sup> address the document pagination difference compared to Microsoft Word
### How Syncfusion<sup style="font-size:70%">&reg;</sup> addresses the document pagination difference compared to Microsoft Word

The following table illustrates the reasons for pagination (page-by-page display) difference compared to Microsoft Word in your documents and how Syncfusion<sup style="font-size:70%">&reg;</sup> address it.
The following table illustrates the reasons for pagination (page-by-page display) difference compared to Microsoft Word in your documents and how Syncfusion<sup style="font-size:70%">&reg;</sup> addresses it.

| Root causes | How is it solved? |
|-----------------|-------------|
|Any mistake (wrong behavior handled) in lay outing the supported elements and formatting  |Customer can report to Syncfusion<sup style="font-size:70%">&reg;</sup> support and track the status through bug report link.  Syncfusion<sup style="font-size:70%">&reg;</sup> fixes the bugs in next possible weekly patch release and service pack or main releases. |
|Font missing in deployment environment|Customer can either report to Syncfusion<sup style="font-size:70%">&reg;</sup> support and get suggestion or solve it on their own by installing the missing fonts in their deployment environment.|
|Any unsupported elements or formatting present in your document |Customer can report to Syncfusion<sup style="font-size:70%">&reg;</sup> support and track the status through feature request link.   Syncfusion<sup style="font-size:70%">&reg;</sup> implements unsupported features incrementally in future releases based on feature importance, customer interest, efforts involved, and technological feasibility. Also, suggests alternate approach for possible cases.|
|Technical limitation related to framework   For example, there is a known case with slight fractional difference in text size measured using HTML and Microsoft Words display.|Customer can report to Syncfusion<sup style="font-size:70%">&reg;</sup> support and track the status through feature request link.  Syncfusion<sup style="font-size:70%">&reg;</sup> does research about alternate approaches to overcome the technical limitation/behaviors and process it same as a feature. >Note: Here the challenge is, time schedule for implementation varies based on the alternate solution and its reliability.|
|Any mistake (wrong behavior handled) in laying out the supported elements and formatting  |Customer can report to Syncfusion<sup style="font-size:70%">&reg;</sup> support and track the status through bug report link.  Syncfusion<sup style="font-size:70%">&reg;</sup> fixes the bugs in the next possible weekly patch release and service pack or main releases. |
|Font missing in deployment environment|Customer can either report to Syncfusion<sup style="font-size:70%">&reg;</sup> support and get a suggestion or solve it on their own by installing the missing fonts in their deployment environment.|
|Any unsupported elements or formatting present in your document |Customer can report to Syncfusion<sup style="font-size:70%">&reg;</sup> support and track the status through feature request link.   Syncfusion<sup style="font-size:70%">&reg;</sup> implements unsupported features incrementally in future releases based on feature importance, customer interest, efforts involved, and technological feasibility. Also, suggests an alternate approach for possible cases.|
|Technical limitation related to framework   For example, there is a known case with a slight fractional difference in text size measured using HTML and Microsoft Word's display.|Customer can report to Syncfusion<sup style="font-size:70%">&reg;</sup> support and track the status through feature request link.  Syncfusion<sup style="font-size:70%">&reg;</sup> does research about alternate approaches to overcome the technical limitation/behaviors and process it same as a feature. N>: Here the challenge is, time schedule for implementation varies based on the alternate solution and its reliability.|

## See Also

Expand Down
Loading