How to Insert Text or Image in Table in TypeScript DOCX Editor

28 Aug 20263 minutes to read

Using TypeScript DOCX Editor (Document Editor) APIs, you can insert text or an image in a table programmatically based on your requirements.

Use the selection APIs to navigate between rows and cells.

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

import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';

DocumentEditorContainer.Inject(Toolbar);

let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' });

container.serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';

container.appendTo('#container');
// To insert the table at the cursor position
container.documentEditor.editor.insertTable(2,2);
// 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 the next cell
moveCursorToNextCell();
// 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 the next row
moveCursorToNextRow();
// To insert text at the cursor position
container.documentEditor.editor.insertText('Text');
// To move the cursor to the next cell
moveCursorToNextCell();
// To insert text at the cursor position
container.documentEditor.editor.insertText('Text');

function moveCursorToNextCell() {
// 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 the selection using the select method
container.documentEditor.selection.select(startOffset, startOffset);
}

function moveCursorToNextRow() {
// 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 the selection using the select method
container.documentEditor.selection.select(startOffset, startOffset);
}

NOTE

The Web API hosted link https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/ utilized in the DOCX 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 or Docker image for hosting your own web service and use for the serviceUrl property.

The output will be as shown below.