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: Get the selected content in Angular Document editor | Syncfusion
description: Learn here all about Get the selected content in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Get the selected content in Angular DOCX Editor | Syncfusion
description: Learn here all about Get the selected content in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Get the selected content
control: Get the selected content
documentation: ug
domainurl: ##DomainURL##
---

# Get the selected content in Angular Document editor component
# Get the selected content in Angular Document Editor component

You can get the selected content from the [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) component as plain text and SFDT (rich text).
You can get the selected content from the [Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) component as plain text and SFDT (rich text).

## Get the selected content as plain text

You can use [`text`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection/#text-code-classlanguage-textstringcode) API to get the selected content as plain text from Angular Document Editor component.

The following example code illustrates how to add search in google option in context menu for the selected text.
The following example code illustrates how to add Search in Google option in context menu for the selected text.

```typescript
import { Component, OnInit, ViewChild } from '@angular/core';
Expand Down Expand Up @@ -61,9 +61,9 @@ export class AppComponent implements OnInit {
}
```

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

You can add the following custom options using this API,
You can add the following custom options using this API:

* Save or export the selected text as text file.
* Search the selected text in Google or other search engines.
Expand Down Expand Up @@ -108,10 +108,10 @@ export class AppComponent implements OnInit {
}
```

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

You can add the following custom options using this API,
You can add the following custom options using this API:

* Save or export the selected content as SFDT file.
* Get the content of a bookmark in Word document as SFDT by selecting a bookmark using [`selectbookmark`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection/#selectbookmark) API.
* Get the content of a bookmark in Word document as SFDT by selecting a bookmark using [`selectBookmark`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection/#selectbookmark) API.
* Create template content that can be inserted to multiple documents in cursor position using [`paste`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor/#paste) API.
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
---
layout: post
title: Open default document in Angular DocumentEditor component | Syncfusion
description: Learn here all about Open default document in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Open default document in Angular DOCX Editor | Syncfusion
description: Learn here all about Open default document in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Open default document
control: Open default document
documentation: ug
domainurl: ##DomainURL##
---

# Open default document in Angular Document editor component
# Open default document in Angular Document Editor component

In this article, we are going to see how to open a default document when [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) & Document Editor Container is initialized.
In this article, we are going to see how to open a default document when the [Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) & Document Editor Container are initialized.

## Opening a default document in DocumentEditor

Expand Down
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
---
layout: post
title: Open Document by Address in Angular Document Editor | Syncfusion
description: Learn here all about Open document by address in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Open document by address in Angular DOCX Editor | Syncfusion
description: Learn here all about Open document by address in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Open document by address
control: Open document by address
documentation: ug
domainurl: ##DomainURL##
---

# Open document by address in Angular Document editor component
# Open document by address in Angular Document Editor component

## How to open a document from URL in Angular Document Editor
## How to open a document from URL in DocumentEditor

In this article, we are going to see how to open a document from URL in [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor).
In this article, we are going to see how to open a document from URL in [Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor).

please refer below example for client-side code
Please refer to the example below for the client-side code.

```typescript
import { Component, OnInit, ViewChild } from '@angular/core';
Expand All @@ -25,7 +25,7 @@ import {
@Component({
selector: 'app-root',
// specifies the template string for the DocumentEditorContainer component
template: `<button id='export'(click)="onClick(this)">Export</button><ejs-documenteditorcontainer #documenteditor_default serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" height="600px" style="display:block" [enableToolbar]=true> </ejs-documenteditorcontainer>`,
template: `<button id='export'(click)="onClick()">Export</button><ejs-documenteditorcontainer #documenteditor_default serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" height="600px" style="display:block" [enableToolbar]=true> </ejs-documenteditorcontainer>`,
providers: [ToolbarService],
})
export class AppComponent implements OnInit {
Expand All @@ -34,7 +34,7 @@ export class AppComponent implements OnInit {
ngOnInit(): void {}
onClick(): void {
let http: XMLHttpRequest = new XMLHttpRequest();
//add your url in which you want to open document inside the ""
//add your URL from which you want to open the document inside the ""
let content = { fileUrl: '' };
let baseurl: string = '/api/documenteditor/ImportFileURL';
http.open('POST', baseurl, true);
Expand All @@ -52,9 +52,9 @@ export class AppComponent implements OnInit {
}
```

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

please refer below example for server-side code
Please refer to the example below for the server-side code.

```csharp
[AcceptVerbs("Post")]
Expand Down
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
---
layout: post
title: Optimize the SFDT file in Angular Document editor component | Syncfusion
description: Learn here all about optimize the SFDT file in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Optimize the SFDT file in Angular DOCX Editor | Syncfusion
description: Learn here all about Optimize the SFDT file in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
control: Optimize the SFDT file
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---

# How to optimize the SFDT file
# How to optimize the SFDT file in Angular Document Editor component

Starting from version v21.1.x, the SFDT file generated in [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) component is optimized by default to reduce the file size. All static keys are minified, and the final JSON string is compressed. This helps reduce the SFDT file size relative to a DOCX file and provides the following benefits,
Starting from version v21.1.x, the SFDT file generated in [Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) component is optimized by default to reduce the file size. All static keys are minified, and the final JSON string is compressed. This helps reduce the SFDT file size relative to a DOCX file and provides the following benefits:
* File transfer between client and server through the internet gets faster.
* The new optimized SFDT files require less storage space than the old SFDT files.
Hence, the optimized SFDT file can't be directly manipulated as JSON string.
As a result, the optimized SFDT file can't be directly manipulated as a JSON string.

> This feature comes with a public API to switch between the old and new optimized SFDT format, allowing backward compatibility.
N> This feature comes with a public API to switch between the old and new optimized SFDT format, allowing backward compatibility.

As a backward compatibility to create older format SFDT files, refer the following code changes,
As a backward compatibility to create older format SFDT files, refer to the following code changes:

<table>
<tr>
Expand Down Expand Up @@ -88,7 +88,7 @@ String sfdtDocument = WordProcessorHelper.load(stream, formatType, false);
</tr>
</table>

To convert from older format SFDT from a new optimized SFDT file, refer the following code example,
To convert a new optimized SFDT file to the older format, refer to the following code example:

<table>
<tr>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
---
layout: post
title: Override the keyboard shortcuts in Angular Document editor| Syncfusion
description: Learn here all about Override the keyboard shortcuts in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Override the keyboard shortcuts in Angular DOCX Editor | Syncfusion
description: Learn here all about Override the keyboard shortcuts in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Override the keyboard shortcuts
control: Override the keyboard shortcuts
documentation: ug
domainurl: ##DomainURL##
---

# Override the keyboard shortcuts in Angular Document editor component
# Override the keyboard shortcuts in Angular Document Editor component

[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) triggers the [`keyDown`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#keydown/) event every time when any key is entered and provides an instance of [`DocumentEditorKeyDownEventArgs`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/documentEditorKeyDownEventArgs/). You can use the [`isHandled`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/documentEditorKeyDownEventArgs#ishandled/) property to override the keyboard shortcut behavior.
[Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) triggers the [`keyDown`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#keydown/) event every time any key is entered and provides an instance of [`DocumentEditorKeyDownEventArgs`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/documentEditorKeyDownEventArgs/). You can use the [`isHandled`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/documentEditorKeyDownEventArgs#ishandled/) property to override the keyboard shortcut behavior.

## Preventing default keyboard shortcut
## Prevent the default keyboard shortcut

The following code shows how to prevent the `CTRL + C` keyboard shortcut for copying selected content in document editor.
The following code shows how to prevent the `CTRL + C` keyboard shortcut for copying selected content in the Document Editor.

{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
Expand All @@ -28,9 +28,9 @@ The following code shows how to prevent the `CTRL + C` keyboard shortcut for cop

{% previewsample "/document-processing/samples/document-editor/angular/prevent-keyboard-cs2" %}

## Override or define the keyboard shortcut
## Override or define a keyboard shortcut

Override or define a new keyboard shortcut behavior instead of preventing the keyboard shortcut.
You can override or define a new keyboard shortcut behavior instead of preventing the default behavior.

For example, `Ctrl + S` keyboard shortcut saves the document in SFDT format by default, and there is no behavior for `Ctrl + Alt + S`. The following code demonstrates how to override the `Ctrl + S` shortcut to save a document in DOCX format and define `Ctrl + Alt + S` to save the document in SFDT format.

Expand Down