Skip to content
Merged
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
---
layout: post
title: How to insert text in JavaScript (ES6) Document editor | Syncfusion
description: Learn here all about Insert text in current position in Syncfusion JavaScript (ES6) Document editor control of Syncfusion Essential JS 2 and more.
title: How to Insert Text in JavaScript (ES6) DOCX Editor | Syncfusion
description: Learn here all about inserting text at the current position in Syncfusion JavaScript (ES6) Document Editor control 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 in current position in JavaScript (ES6) Document editor
# Insert Text at Current Position in JavaScript (ES6) Document Editor

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

## Insert text in current cursor position
## Insert text at the current cursor position

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

The following example illustrates how to add the text in current selection.
The following example illustrates how to add text in the current selection.

```ts
let hostUrl: string = 'https://document.syncfusion.com/web-services/word-editor/';
Expand All @@ -26,35 +26,35 @@ The following example illustrates how to add the text in current selection.
container.appendTo('#container');

document.getElementById('insert').addEventListener('click',function(){
// It will insert the provided text in current selection
// It will insert the provided text in the current selection
container.documentEditor.editor.insertText('Syncfusion');
});
```

Please check below gif which illustrates how to insert text in current cursor position on button click:
Please check the gif below which illustrates how to insert text at the current cursor position on button click:

![Insert text in current cursor position in Javascript document editor](../images/insert_text.gif)
![Insert Text at the Current Cursor Position in JavaScript Document Editor](../images/insert_text.gif)

## Insert paragraph in current cursor position
## Insert paragraph at the current cursor position

To insert new paragraph at current selection, you can can use [`insertText`](https://ej2.syncfusion.com/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 the [`insertText`](https://ej2.syncfusion.com/documentation/api/document-editor/editor#inserttext) API with the 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 a new paragraph in the current selection.

```ts
// It will add the new paragraph in current selection
// It will add a new paragraph in the current selection
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/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 a [`web service`](../web-services-overview). Then use the [`paste`](https://ej2.syncfusion.com/documentation/api/document-editor/editor#paste) API to insert the SFDT at the current cursor position.

>Note: HTML string should be well formatted. [`DocIO`](https://help.syncfusion.com/file-formats/docio/html) support only well formatted XHTML.
N> The HTML string should be well-formatted. [`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.
* Send the HTML content to the server side for SFDT conversion. Refer to the following example to send the HTML content to the server side and insert it at the current cursor position.

```ts
import {
Expand Down Expand Up @@ -83,10 +83,10 @@ document.getElementById('export').addEventListener('click', () => {
http.onreadystatechange = function () {
if (http.readyState === 4) {
if (http.status === 200 || http.status === 304) {
// Insert the sfdt content in cursor position using paste API
// Insert the SFDT content at the cursor position using the paste API
container.documentEditor.editor.paste(http.response);
} else {
alert('failed;');
alert('Failed.');
}
}
};
Expand All @@ -96,7 +96,7 @@ document.getElementById('export').addEventListener('click', () => {
});
```

* Please refer the following code example for server-side web implementation for HTML conversion using DocumentEditor.
* Please refer to the following code example for the server-side web implementation for HTML conversion using DocumentEditor.

```c#
//API controller for the conversion.
Expand All @@ -112,8 +112,8 @@ public string LoadString([FromBody]InputParameter data)

public class InputParameter
{
public string content {get; set; }
public string content { get; set; }
}
```

>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.
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
---
layout: post
title: Insert text or image in table programmatically in JavaScript (ES6) Document editor control | Syncfusion
description: Learn here all about Insert text or image in table programmatically in Syncfusion JavaScript (ES6) Document editor control of Syncfusion Essential JS 2 and more.
title: Add Text/Image in Table in JavaScript (ES6) DOCX Editor | Syncfusion
description: Learn how to insert text or image in a table programmatically in Syncfusion JavaScript (ES6) DOCX Editor for dynamic table content.
platform: document-processing
control: Insert text or image in table programmatically
control: Insert Text or Image in a Table Programmatically
documentation: ug
domainurl: ##DomainURL##
---

# Insert text or image in table programmatically in JavaScript (ES6) Document editor control
# Text/Image in Table Programmatically, JavaScript (ES6) Document Editor

Using [TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) API's, you can insert [`text`](../how-to/insert-text-in-current-position#insert-text-in-current-cursor-position) or [`image`](../image#images) in [`table`](../table#create-a-table) programmatically based on your requirement.
Using [TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) APIs, you can insert [`text`](../how-to/insert-text-in-current-position#insert-text-in-current-cursor-position) or an [`image`](../image#images) in a [`table`](../table#create-a-table) programmatically based on your requirements.

Use [`selection`](../how-to/move-selection-to-specific-position#selects-content-based-on-start-and-end-hierarchical-index) API's to navigate between rows and cells.
Use the [`selection`](../how-to/move-selection-to-specific-position#selects-content-based-on-start-and-end-hierarchical-index) APIs to navigate between rows and cells.

The following example illustrates how to create 2*2 table and then add text and image programmatically.
The following example illustrates how to create a 2x2 table and then add text and an image programmatically.

```ts
import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
Expand All @@ -26,48 +26,48 @@ let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToo
container.serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';

container.appendTo('#container');
// To insert the table in cursor position
// To insert the table at the cursor position
container.documentEditor.editor.insertTable(2,2);
// To insert the image at table first cell
// To insert the image at the table's first cell
container.documentEditor.editor.insertImage("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==");
// To move the cursor to next cell
// To move the cursor to the next cell
moveCursorToNextCell();
// To insert the image at table second cell
// To insert the image at the table's second cell
container.documentEditor.editor.insertImage("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==");
// To move the cursor to next row
// To move the cursor to the next row
moveCursorToNextRow();
// To insert text in cursor position
// To insert text at the cursor position
container.documentEditor.editor.insertText('Text');
// To move the cursor to next cell
// To move the cursor to the next cell
moveCursorToNextCell();
// To insert text in cursor position
// To insert text at the cursor position
container.documentEditor.editor.insertText('Text');

function moveCursorToNextCell() {
// To get current selection start offset
var startOffset=container.documentEditor.selection.startOffset;
// Increasing cell index to consider next cell
var cellIndex= parseInt(startOffset.substring(6, 7)) + 1;
// Changing start offset
// To get the current selection start offset
let startOffset = container.documentEditor.selection.startOffset;
// Increasing the cell index to consider the next cell
let cellIndex = parseInt(startOffset.substring(6, 7)) + 1;
// Changing the start offset
startOffset = startOffset.substring(0, 6) + cellIndex.toString() + startOffset.substring(7, startOffset.length);
// Navigating selection using select method
// Navigating the selection using the select method
container.documentEditor.selection.select(startOffset, startOffset);
}

function moveCursorToNextRow() {
// To get current selection start offset
var startOffset=container.documentEditor.selection.startOffset;
// Increasing row index to consider next row
var rowIndex= parseInt(startOffset.substring(4, 5)) + 1;
var cellIndex= parseInt(startOffset.substring(6,7)) != 0? parseInt(startOffset.substring(6,7)) - 1:0;
// Changing start offset
// To get the current selection start offset
let startOffset = container.documentEditor.selection.startOffset;
// Increasing the row index to consider the next row
let rowIndex = parseInt(startOffset.substring(4, 5)) + 1;
let cellIndex = parseInt(startOffset.substring(6,7)) != 0 ? parseInt(startOffset.substring(6,7)) - 1 : 0;
// Changing the start offset
startOffset = startOffset.substring(0, 4) + rowIndex.toString() + startOffset.substring(5, 6) + cellIndex + startOffset.substring(7, startOffset.length);
// Navigating selection using select method
// Navigating the selection using the select method
container.documentEditor.selection.select(startOffset, startOffset);
}
```

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

The output will be like below.
The output will be as shown below.
![Insert text or image in table programmatically](../images/table-image.png)
Loading