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,18 +1,18 @@
---
layout: post
title: Disable Drag and Drop in Angular Document Editor | Syncfusion
description: Learn here all about Disable drag and drop in document editor in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Disable drag and drop in Angular DOCX Editor | Syncfusion
description: Learn here all about Disable drag and drop in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Disable drag and drop in document editor
control: Disable drag and drop in Document Editor
documentation: ug
domainurl: ##DomainURL##
---

# How to Disable Drag and Drop in Angular Document Editor
# How to disable drag and drop in the Angular Document Editor

[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) provides support to drag and drop contents within the component and it can be customized(enable and disable) using [`allowDragAndDrop`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/documentEditorSettings/#allowDragAndDrop) property in Document editor settings.
[Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) provides support to drag and drop contents within the component and it can be customized (enable and disable) using the [`allowDragAndDrop`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/documentEditorSettings/#allowDragAndDrop) property in Document Editor settings.

The following example illustrates to customize the drag and drop option.
The following example illustrates how to customize the drag and drop option.

```typescript
@Component({
Expand All @@ -23,9 +23,9 @@ export class AppComponent{
}
```

>Note: Default value of [`allowDragAndDrop`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/documentEditorSettings/#allowDragAndDrop) property is `true`.
N> The default value of [`allowDragAndDrop`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/documentEditorSettings/#allowDragAndDrop) property is `true`.

The following example illustrates to disable the drag and drop option in DocumentEditor.
The following example illustrates how to disable the drag and drop option in the Document Editor.

```typescript
@Component({
Expand All @@ -36,6 +36,6 @@ export class AppComponent{
}
```

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

>Note: Default value of [`allowDragAndDrop`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/documenteditorsettings#allowDragAndDrop) property is `true`.
N> The default value of [`allowDragAndDrop`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/documenteditorsettings#allowDragAndDrop) property is `true`.
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
---
layout: post
title: Insert Page Number in Angular Document Editor | Syncfusion
description: Learn here all about Insert page number and navigate to page in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Insert page number and navigate in Angular DOCX Editor | Syncfusion
description: Learn here all about Insert page number and navigate to page in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Insert page number and navigate to page
control: Insert page number and navigate to page
documentation: ug
domainurl: ##DomainURL##
---

# Insert Page Number and Navigate in Angular Document Editor component
# Insert page number and navigate in Angular Document Editor

You can insert page number and navigate to specific page in [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) component by following ways.
You can insert page number and navigate to specific page in [Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) component using the following ways.

## Insert page number

You can use [`insertPageNumber`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor/#insertpagenumber) API in editor module to insert the page number in current cursor position. By default, Page number will insert in Arabic number style. You can change it, by providing the number style in parameter.
You can use [`insertPageNumber`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor/#insertpagenumber) API in editor module to insert the page number in current cursor position. By default, the page number will be inserted in Arabic number style. You can change it by providing the number style in parameter.

>Note: Currently, Document Editor have options to insert page number at current cursor position.
N> Currently, Document Editor has options to insert page number at the current cursor position.

The following example code illustrates how to insert page number in header.

Expand Down Expand Up @@ -47,9 +47,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.

Also, you use [`insertField`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor/#insertfield) API in Editor module to insert the Page number in current position
You can also use [`insertField`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor/#insertfield) API in Editor module to insert the page number in the current position.

```typescript
//Current page number
Expand All @@ -59,9 +59,9 @@ this.container.documentEditor.editor.insertField('PAGE \* MERGEFORMAT', '1');

## Get page count

You can use [`pageCount`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#pagecount) API to gets the total number of pages in Document.
You can use [`pageCount`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#pagecount) API to get the total number of pages in the Document.

The following example code illustrates how to get the number of pages in Document.
The following example code illustrates how to get the number of pages in the Document.

```typescript
import { Component, OnInit, ViewChild } from '@angular/core';
Expand All @@ -88,7 +88,7 @@ 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.

## Navigate to specific page

Expand Down Expand Up @@ -145,4 +145,4 @@ 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.
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
---
layout: post
title: Insert Text in Angular Document Editor | Syncfusion
description: Learn here all about Insert text in current position in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Insert text in current position in Angular DOCX Editor | Syncfusion
description: Learn here all about Insert text in current position in Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Insert text in current position
control: Insert text in current position
documentation: ug
domainurl: ##DomainURL##
---

# Insert Text at Current Position in Angular Document Editor
# Insert text in current position in Angular Document Editor component

You can insert the text, paragraph and rich-text content in [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) component.
You can insert text, paragraphs, and rich-text content in [Angular Document Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) component.

## Insert text in current cursor position

You can use [`insertText`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor/#inserttext) API in editor module to insert the text in current cursor position.

The following example illustrates how to add the text in current selection.
The following example code illustrates how to add the text at the current cursor position.

```typescript
import { Component, OnInit, ViewChild } from '@angular/core';
Expand Down Expand Up @@ -54,13 +54,13 @@ 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.

## Insert paragraph in current cursor position

To insert new paragraph at current selection, you can can use [`insertText`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor/#inserttext) API with parameter as `\r\n` or `\n`.
To insert a new paragraph at the current selection, you can use [`insertText`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor/#inserttext) API with parameter as `\r\n` or `\n`.

The following example code illustrates how to add the new paragraph in current selection.
The following example code illustrates how to add the new paragraph in the current selection.

```typescript
// It will add the new paragraph in current selection
Expand All @@ -69,11 +69,11 @@ this.container.documentEditor.editor.insertText('\n');

## Insert the rich-text content

To insert the HTML content, you have to convert the HTML content to SFDT Format using [`web service`](../web-services-overview). Then use [`paste`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor/#paste) API to insert the sfdt at current cursor position.
To insert the HTML content, you have to convert the HTML content to SFDT format using [`web service`](../web-services-overview). Then use [`paste`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor/#paste) API to insert the SFDT at the current cursor position.

>Note: Html string should be well formatted html. [`DocIO`](https://help.syncfusion.com/file-formats/docio/html) support only well formatted XHTML.
N> The HTML string should be well-formatted HTML. [`DocIO`](https://help.syncfusion.com/file-formats/docio/html) supports only well-formatted XHTML.

The following example illustrates how to insert the HTML content at current cursor position.
The following example illustrates how to insert the HTML content at the current cursor position.

* Send the HTML content to server side for SFDT conversion. Refer to the following example to send the HTML content to server side and inserting it in current cursor position.

Expand Down Expand Up @@ -127,7 +127,7 @@ 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 the following code example for server-side web implementation for HTML conversion using DocumentEditor.

Expand All @@ -152,4 +152,4 @@ public class InputParameter
}
```

>Note: The above example illustrates inserting HTML content. Similarly, you can insert any rich-text content by converting any of the supported file formats (DOCX, DOC, WordML, HTML, RTF) to SFDT.
N> The above example illustrates inserting HTML content. Similarly, you can insert any rich-text content by converting any of the supported file formats (DOCX, DOC, WordML, HTML, RTF) to SFDT.
Loading