From cf590e48698691e44e9b4c651644962c60f71975 Mon Sep 17 00:00:00 2001 From: Kalaivannan-Ganesan <93248069+Kalaivannan-Ganesan@users.noreply.github.com> Date: Mon, 10 Aug 2026 14:42:12 +0530 Subject: [PATCH 1/5] Resolved the error report from insert-text-in-current-position.md to open-document-by-address.md --- .../how-to/insert-text-in-current-position.md | 48 +++++++------- ...text-or-image-in-table-programmatically.md | 60 +++++++++--------- .../move-selection-to-specific-position.md | 62 +++++++++---------- .../how-to/open-default-document.md | 32 +++++----- .../how-to/open-document-by-address.md | 26 ++++---- 5 files changed, 112 insertions(+), 116 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/insert-text-in-current-position.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/insert-text-in-current-position.md index 49f721c983..75015f67eb 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/insert-text-in-current-position.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/insert-text-in-current-position.md @@ -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 the 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/'; @@ -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 { @@ -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.'); } } }; @@ -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. @@ -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. \ No newline at end of file +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. \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/insert-text-or-image-in-table-programmatically.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/insert-text-or-image-in-table-programmatically.md index f08ca9f5a1..850b0963de 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/insert-text-or-image-in-table-programmatically.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/insert-text-or-image-in-table-programmatically.md @@ -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: Insert Text or Image in a Table Programmatically in JavaScript (ES6) DOCX Editor control | Syncfusion +description: Learn here all about Insert Text or Image in a Table Programmatically in Syncfusion JavaScript (ES6) Document Editor control of Syncfusion Essential JS 2 and more. 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 +# Insert Text or Image in a Table Programmatically in JavaScript (ES6) Document Editor control -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'; @@ -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) diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/move-selection-to-specific-position.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/move-selection-to-specific-position.md index e85a815400..c9f338f49c 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/move-selection-to-specific-position.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/move-selection-to-specific-position.md @@ -1,46 +1,46 @@ --- layout: post -title: Move to specific position in JavaScript (ES6) Document editor | Syncfusion -description: Learn here all about Move selection to specific position in Syncfusion JavaScript (ES6) Document editor control of Syncfusion Essential JS 2 and more. +title: Move Selection to a Specific Position in JavaScript (ES6) DOCX Editor | Syncfusion +description: Learn here all about moving the selection to a specific position in Syncfusion JavaScript (ES6) Document Editor control of Syncfusion Essential JS 2 and more. platform: document-processing -control: Move selection to specific position +control: Move Selection to a Specific Position documentation: ug domainurl: ##DomainURL## --- -# Move selection to specific position in JavaScript (ES6) Document editor +# Move Selection to a Specific Position in JavaScript (ES6) Document Editor -Using [`select`](https://ej2.syncfusion.com/documentation/api/document-editor/selection#select) API in selection module, You can set cursor position to anywhere in the document. +Using the [`select`](https://ej2.syncfusion.com/documentation/api/document-editor/selection#select) API in the selection module, you can set the cursor position anywhere in the document. -## Selects content based on start and end hierarchical index +## Select content based on start and end hierarchical index -Hierarchical index will be in below format. +The hierarchical index will be in the format below. `sectionIndex;blockIndex;offset` -The following code snippet illustrate how to select using hierarchical index. +The following code snippet illustrates how to select using a hierarchical index. ```ts -// Selection will occur between provided start and end offset -documentEdContainerIns.documentEditor.editor.insertText("Welcome"); -// The below code will select the letters “We” from inserted text “Welcome” -documentEdContainerIns.documentEditor.selection.select("0;0;0", "0;0;2"); +// Selection will occur between the provided start and end offset +documentEditor.editor.insertText("Welcome"); +// The below code will select the letters "We" from the inserted text "Welcome" +documentEditor.selection.select("0;0;0", "0;0;2"); ``` -The following table illustrates about Hierarchical index in detail. +The following table illustrates the hierarchical index format in detail. -| Element |Hierarchical Format | Explanation | +| Element | Hierarchical Format | Explanation | |-----------------|-------------|----| -|Move selection to Paragraph |sectionIndex;blockIndex;offset
**Ex:** 0;0;0|It moves the cursor to the start of paragraph.| -|Move selection to Table|sectionIndex;tableIndex;rowIndex;cellIndex;blockIndex;offset
**Ex:** 0;0;0;0;1;0|It moves the cursor to the second paragraph which is inside first row and cell of table.| -|Move selection to header|pageIndex;H;sectionIndex;blockIndex;offset
**Ex:** 1;H;0;0;0|It moves cursor to the header in second page.| -|Move selection to Footer|pageIndex;F;sectionIndex;blockIndex;offset
**Ex:** 1;F;0;0;0|It moves cursor to the footer in second page.| +|Move the selection to a Paragraph|sectionIndex;blockIndex;offset
**Ex:** 0;0;0|It moves the cursor to the start of the paragraph.| +|Move the selection to a Table|sectionIndex;tableIndex;rowIndex;cellIndex;blockIndex;offset
**Ex:** 0;0;0;0;1;0|It moves the cursor to the second paragraph which is inside the first row and cell of the table.| +|Move the selection to a Header|pageIndex;H;sectionIndex;blockIndex;offset
**Ex:** 1;H;0;0;0|It moves the cursor to the header on the second page.| +|Move the selection to a Footer|pageIndex;F;sectionIndex;blockIndex;offset
**Ex:** 1;F;0;0;0|It moves the cursor to the footer on the second page.| ## Get the selection start and end hierarchical index -Using [`startOffset`](https://ej2.syncfusion.com/documentation/api/document-editor/selection#startoffset), you can get start hierarchical index which denotes the start index of current selection. Similarly, using [`endOffset`](https://ej2.syncfusion.com/documentation/api/document-editor/selection#endoffset), you can get end hierarchical index which denotes the end index of current selection. +Using [`startOffset`](https://ej2.syncfusion.com/documentation/api/document-editor/selection#startoffset), you can get the start hierarchical index which denotes the start index of the current selection. Similarly, using [`endOffset`](https://ej2.syncfusion.com/documentation/api/document-editor/selection#endoffset), you can get the end hierarchical index which denotes the end index of the current selection. -The following code snippet illustrate how to get the selection start and end offset on selection changes in document. +The following code snippet illustrates how to get the selection start and end offset on selection changes in the document. ```ts import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor'; @@ -51,25 +51,25 @@ let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToo DocumentEditorContainer.Inject(Toolbar); container.serviceUrl = hostUrl + 'api/documenteditor/'; container.appendTo('#container'); -// Event gets triggered on selection change in document +// Event gets triggered on selection change in the document container.selectionChange = (): void => { -//Get the start index of current selection -let startOffset:string = container.documentEditor.selection.startOffset; -//Get the end index of current selection -let endOffset:string = container.documentEditor.selection.endOffset; +//Get the start index of the current selection +let startOffset: string = container.documentEditor.selection.startOffset; +//Get the end index of the current selection +let endOffset: string = container.documentEditor.selection.endOffset; }; ``` -Document editor have [`selectionChange`](https://ej2.syncfusion.com/documentation/api/document-editor#selectionchange) event which is triggered whenever the selection changes in Document. +The Document Editor has a [`selectionChange`](https://ej2.syncfusion.com/documentation/api/document-editor#selectionchange) event which is triggered whenever the selection changes in the document. -## Selects the content based on left and top position +## Select the content based on left and top positions -Here, you can specify the [`selection settings`](https://ej2.syncfusion.com/documentation/api/document-editor/selectionSettings/) to select the content based on left and top position. +Here, you can specify the [`selection settings`](https://ej2.syncfusion.com/documentation/api/document-editor/selectionSettings/) to select the content based on the left and top positions. -x denotes the left position and y denotes the top position and extend denotes whether to extend or update selection. +The `x` value denotes the left position, the `y` value denotes the top position, and the `extend` value denotes whether to extend or update the selection. -Please check below code sample for reference. +Please check the code sample below for reference. ```ts -Container.documentEditor.selection.select({ x: 188.4814208984375 , y: 662.00005, extend: true }); +container.documentEditor.selection.select({ x: 188.4814208984375, y: 662.00005, extend: true }); ``` \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/open-default-document.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/open-default-document.md index 4e60138af4..ba2c5d07cd 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/open-default-document.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/open-default-document.md @@ -1,28 +1,26 @@ --- layout: post -title: Open default document in JavaScript (ES6) Document editor control | Syncfusion -description: Learn here all about Open default document in Syncfusion JavaScript (ES6) Document editor control of Syncfusion Essential JS 2 and more. +title: Open a Default Document in JavaScript (ES6) DOCX Editor control | Syncfusion +description: Learn here all about opening a default document in Syncfusion JavaScript (ES6) Document Editor control of Syncfusion Essential JS 2 and more. platform: document-processing -control: Open default document +control: Open a Default Document documentation: ug domainurl: ##DomainURL## --- -# Open default document in JavaScript (ES6) Document editor control +# Open a Default Document in JavaScript (ES6) Document Editor control -In this article, we are going to see how to open a default document when DocumentEditor & DocumentEditorContainer is initialized. +In this article, we are going to see how to open a default document when the DocumentEditor and DocumentEditorContainer are initialized. ## Opening a default document in DocumentEditor -By default, [TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) will open blank document. You can use [`open`](https://ej2.syncfusion.com/documentation/api/document-editor#open) API in Document Editor to open the sfdt content. +By default, the [TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) will open a blank document. You can use the [`open`](https://ej2.syncfusion.com/documentation/api/document-editor#open) API in the Document Editor to open the SFDT content. -Document editor have [`created`](https://ej2.syncfusion.com/documentation/api/document-editor#created) event which gets triggered once Document editor control created. So, if you want to open the document by default, you can use [`open`](https://ej2.syncfusion.com/documentation/api/document-editor#open) and [`created`](https://ej2.syncfusion.com/documentation/api/document-editor#created) API. +The Document Editor has a [`created`](https://ej2.syncfusion.com/documentation/api/document-editor#created) event which gets triggered once the Document Editor control is created. So, if you want to open the document by default, you can use the [`open`](https://ej2.syncfusion.com/documentation/api/document-editor#open) and [`created`](https://ej2.syncfusion.com/documentation/api/document-editor#created) APIs. -The following example illustrates how to open the default SFDT content once Document editor control gets created. +The following example illustrates how to open the default SFDT content once the Document Editor control is created. - - - {% tabs %} +{% tabs %} {% highlight ts tabtitle="index.ts" %} {% include code-snippet/document-editor/javascript-es6/open-default-document-cs1/index.ts %} {% endhighlight %} @@ -30,20 +28,18 @@ The following example illustrates how to open the default SFDT content once Docu {% include code-snippet/document-editor/javascript-es6/open-default-document-cs1/index.html %} {% endhighlight %} {% endtabs %} - + {% previewsample "/document-processing/code-snippet/document-editor/javascript-es6/open-default-document-cs1" %} ## Opening a default document in DocumentEditorContainer -By default, Document Editor Container will open a blank document. You can use [`open`](https://ej2.syncfusion.com/documentation/api/document-editor#open) API in Document Editor to open the SFDT content. +By default, the Document Editor Container will open a blank document. You can use the [`open`](https://ej2.syncfusion.com/documentation/api/document-editor#open) API in the Document Editor to open the SFDT content. -Document editor Container have [`created`](https://ej2.syncfusion.com/documentation/api/document-editor-container#created) event which gets triggered once Document editor container control created. So, if you want to open the document by default, you can use [`open`](https://ej2.syncfusion.com/documentation/api/document-editor#open) and [`created`](https://ej2.syncfusion.com/documentation/api/document-editor-container#created) API. +The Document Editor Container has a [`created`](https://ej2.syncfusion.com/documentation/api/document-editor-container#created) event which gets triggered once the Document Editor Container control is created. So, if you want to open the document by default, you can use the [`open`](https://ej2.syncfusion.com/documentation/api/document-editor#open) and [`created`](https://ej2.syncfusion.com/documentation/api/document-editor-container#created) APIs. - - - {% tabs %} +{% tabs %} {% highlight ts tabtitle="index.ts" %} {% include code-snippet/document-editor/javascript-es6/open-default-document-cs2/index.ts %} {% endhighlight %} @@ -51,7 +47,7 @@ Document editor Container have [`created`](https://ej2.syncfusion.com/documentat {% include code-snippet/document-editor/javascript-es6/open-default-document-cs2/index.html %} {% endhighlight %} {% endtabs %} - + {% previewsample "/document-processing/code-snippet/document-editor/javascript-es6/open-default-document-cs2" %} diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/open-document-by-address.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/open-document-by-address.md index 2f51760dfe..f6a3baef0b 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/open-document-by-address.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/open-document-by-address.md @@ -1,20 +1,20 @@ --- layout: post -title: Open document by address in JavaScript (ES6) Document editor control | Syncfusion -description: Learn here all about Open document by address in Syncfusion JavaScript (ES6) Document editor control of Syncfusion Essential JS 2 and more. +title: Open a Document by Address in JavaScript (ES6) DOCX Editor control | Syncfusion +description: Learn here all about opening a document by address in Syncfusion JavaScript (ES6) Document Editor control of Syncfusion Essential JS 2 and more. platform: document-processing -control: Open document by address +control: Open a Document by Address documentation: ug domainurl: ##DomainURL## --- -# Open document by address in JavaScript (ES6) Document editor control +# Open a Document by Address in JavaScript (ES6) Document Editor control -## How to open a document from URL in DocumentEditor +## How to open a document from a URL in the DocumentEditor -In this article, we are going to see how to open a document from URL in [TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) +In this article, we are going to see how to open a document from a URL in the [TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor). -please refer below example for client-side code +Please refer to the example below for the client-side code. ```ts //Initialize Document Editor Container component. @@ -24,15 +24,15 @@ container.appendTo('#DocumentEditorContainer'); document.getElementById('import').addEventListener('click', () => { let http: XMLHttpRequest = new XMLHttpRequest(); - //add your url in which you want to open document inside the "" + // Add your URL inside the "" where you want to open the document let content = { fileUrl: "" }; - let baseurl: string = "/api/documenteditor/ImportFileURL"; - http.open("POST", baseurl, true); + let baseUrl: string = "/api/documenteditor/ImportFileURL"; + http.open("POST", baseUrl, true); http.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); http.onreadystatechange = () => { if (http.readyState === 4) { if (http.status === 200 || http.status === 304) { - //open the SFDT text in Document Editor + //open the SFDT text in the Document Editor container.documentEditor.open(http.responseText); } } @@ -41,14 +41,14 @@ document.getElementById('import').addEventListener('click', () => { }); ``` -please refer below example for server-side code +Please refer to the example below for the server-side code. ```c# [AcceptVerbs("Post")] public string ImportFileURL([FromBody]FileUrlInfo param) { try { - using(WebClient client = new WebClient()) + using (WebClient client = new WebClient()) { MemoryStream stream = new MemoryStream(client.DownloadData(param.fileUrl)); WordDocument document = WordDocument.Load(stream, FormatType.Docx); From bc768a46e799578f638f1ed0b90571294f5d283a Mon Sep 17 00:00:00 2001 From: Kalaivannan-Ganesan <93248069+Kalaivannan-Ganesan@users.noreply.github.com> Date: Mon, 10 Aug 2026 17:15:28 +0530 Subject: [PATCH 2/5] Resolved the CI failures --- .../how-to/insert-text-in-current-position.md | 2 +- .../insert-text-or-image-in-table-programmatically.md | 6 +++--- .../how-to/move-selection-to-specific-position.md | 6 +++--- .../javascript-es6/how-to/open-default-document.md | 2 +- .../javascript-es6/how-to/open-document-by-address.md | 2 +- 5 files changed, 9 insertions(+), 9 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/insert-text-in-current-position.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/insert-text-in-current-position.md index 75015f67eb..130f4c17f1 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/insert-text-in-current-position.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/insert-text-in-current-position.md @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Insert Text at the 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 the [TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) component. diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/insert-text-or-image-in-table-programmatically.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/insert-text-or-image-in-table-programmatically.md index 850b0963de..bc79a32fa0 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/insert-text-or-image-in-table-programmatically.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/insert-text-or-image-in-table-programmatically.md @@ -1,14 +1,14 @@ --- layout: post -title: Insert Text or Image in a Table Programmatically in JavaScript (ES6) DOCX Editor control | Syncfusion -description: Learn here all about Insert Text or Image in a Table Programmatically in Syncfusion JavaScript (ES6) Document Editor control of Syncfusion Essential JS 2 and more. +title: Text/Image in Table Programmatically, JS (ES6) DOCX Editor | Syncfusion +description: Learn here all about Insert Text or Image in a Table Programmatically in Syncfusion JS (ES6) DOCX Editor of Syncfusion Essential JS 2 and more. platform: document-processing control: Insert Text or Image in a Table Programmatically documentation: ug domainurl: ##DomainURL## --- -# Insert Text or Image in a Table Programmatically in JavaScript (ES6) Document Editor control +# Add Text/Image in Table Programmatically, JavaScript (ES6) DOCX Editor 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. diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/move-selection-to-specific-position.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/move-selection-to-specific-position.md index c9f338f49c..35f01184b6 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/move-selection-to-specific-position.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/move-selection-to-specific-position.md @@ -1,6 +1,6 @@ --- layout: post -title: Move Selection to a Specific Position in JavaScript (ES6) DOCX Editor | Syncfusion +title: Move Selection to a Specific Position in JS (ES6) DOCX Editor | Syncfusion description: Learn here all about moving the selection to a specific position in Syncfusion JavaScript (ES6) Document Editor control of Syncfusion Essential JS 2 and more. platform: document-processing control: Move Selection to a Specific Position @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Move Selection to a Specific Position in JavaScript (ES6) Document Editor +# Move Selection to Specific Position in JavaScript (ES6) DOCX Editor Using the [`select`](https://ej2.syncfusion.com/documentation/api/document-editor/selection#select) API in the selection module, you can set the cursor position anywhere in the document. @@ -64,7 +64,7 @@ The Document Editor has a [`selectionChange`](https://ej2.syncfusion.com/documen ## Select the content based on left and top positions -Here, you can specify the [`selection settings`](https://ej2.syncfusion.com/documentation/api/document-editor/selectionSettings/) to select the content based on the left and top positions. +Here, you can specify the [`selection settings`](https://ej2.syncfusion.com/documentation/api/document-editor/selectionSettings) to select the content based on the left and top positions. The `x` value denotes the left position, the `y` value denotes the top position, and the `extend` value denotes whether to extend or update the selection. diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/open-default-document.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/open-default-document.md index ba2c5d07cd..d23484a18c 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/open-default-document.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/open-default-document.md @@ -1,6 +1,6 @@ --- layout: post -title: Open a Default Document in JavaScript (ES6) DOCX Editor control | Syncfusion +title: Open a Default Document in JavaScript (ES6) DOCX Editor | Syncfusion description: Learn here all about opening a default document in Syncfusion JavaScript (ES6) Document Editor control of Syncfusion Essential JS 2 and more. platform: document-processing control: Open a Default Document diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/open-document-by-address.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/open-document-by-address.md index f6a3baef0b..950ee0f74b 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/open-document-by-address.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/open-document-by-address.md @@ -1,6 +1,6 @@ --- layout: post -title: Open a Document by Address in JavaScript (ES6) DOCX Editor control | Syncfusion +title: Open a Document by Address in JavaScript (ES6) DOCX Editor | Syncfusion description: Learn here all about opening a document by address in Syncfusion JavaScript (ES6) Document Editor control of Syncfusion Essential JS 2 and more. platform: document-processing control: Open a Document by Address From b0f1a7385ad1916f4eac4e8e1092f8ce8e4d28f4 Mon Sep 17 00:00:00 2001 From: Kalaivannan-Ganesan <93248069+Kalaivannan-Ganesan@users.noreply.github.com> Date: Mon, 10 Aug 2026 21:52:47 +0530 Subject: [PATCH 3/5] Resolved the CI failures --- .../how-to/insert-text-or-image-in-table-programmatically.md | 2 +- .../how-to/move-selection-to-specific-position.md | 2 +- .../javascript-es6/how-to/open-document-by-address.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/insert-text-or-image-in-table-programmatically.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/insert-text-or-image-in-table-programmatically.md index bc79a32fa0..90fe8e8d7d 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/insert-text-or-image-in-table-programmatically.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/insert-text-or-image-in-table-programmatically.md @@ -1,6 +1,6 @@ --- layout: post -title: Text/Image in Table Programmatically, JS (ES6) DOCX Editor | Syncfusion +title: Text/Image in Table, JS (ES6) DOCX Editor | Syncfusion description: Learn here all about Insert Text or Image in a Table Programmatically in Syncfusion JS (ES6) DOCX Editor of Syncfusion Essential JS 2 and more. platform: document-processing control: Insert Text or Image in a Table Programmatically diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/move-selection-to-specific-position.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/move-selection-to-specific-position.md index 35f01184b6..46477af9a4 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/move-selection-to-specific-position.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/move-selection-to-specific-position.md @@ -1,6 +1,6 @@ --- layout: post -title: Move Selection to a Specific Position in JS (ES6) DOCX Editor | Syncfusion +title: Move Selection to Specific Position, JS (ES6) DOCX Editor | Syncfusion description: Learn here all about moving the selection to a specific position in Syncfusion JavaScript (ES6) Document Editor control of Syncfusion Essential JS 2 and more. platform: document-processing control: Move Selection to a Specific Position diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/open-document-by-address.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/open-document-by-address.md index 950ee0f74b..0b5b15d77a 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/open-document-by-address.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/open-document-by-address.md @@ -1,6 +1,6 @@ --- layout: post -title: Open a Document by Address in JavaScript (ES6) DOCX Editor | Syncfusion +title: Open Document by Address in JavaScript (ES6) DOCX Editor | Syncfusion description: Learn here all about opening a document by address in Syncfusion JavaScript (ES6) Document Editor control of Syncfusion Essential JS 2 and more. platform: document-processing control: Open a Document by Address From 63ef03b052670c37863e19005ef49afa0cff4e3f Mon Sep 17 00:00:00 2001 From: Kalaivannan-Ganesan <93248069+Kalaivannan-Ganesan@users.noreply.github.com> Date: Tue, 11 Aug 2026 07:29:54 +0530 Subject: [PATCH 4/5] Addressed the Heading, Title and Description feedbacks --- .../insert-text-or-image-in-table-programmatically.md | 6 +++--- .../how-to/move-selection-to-specific-position.md | 6 +++--- .../javascript-es6/how-to/open-default-document.md | 6 +++--- .../javascript-es6/how-to/open-document-by-address.md | 4 ++-- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/insert-text-or-image-in-table-programmatically.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/insert-text-or-image-in-table-programmatically.md index 90fe8e8d7d..0813d6c94f 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/insert-text-or-image-in-table-programmatically.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/insert-text-or-image-in-table-programmatically.md @@ -1,14 +1,14 @@ --- layout: post -title: Text/Image in Table, JS (ES6) DOCX Editor | Syncfusion -description: Learn here all about Insert Text or Image in a Table Programmatically in Syncfusion JS (ES6) DOCX Editor 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 a Table Programmatically documentation: ug domainurl: ##DomainURL## --- -# Add Text/Image in Table Programmatically, JavaScript (ES6) DOCX Editor +# Add 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) 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. diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/move-selection-to-specific-position.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/move-selection-to-specific-position.md index 46477af9a4..2f3151890a 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/move-selection-to-specific-position.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/move-selection-to-specific-position.md @@ -1,14 +1,14 @@ --- layout: post -title: Move Selection to Specific Position, JS (ES6) DOCX Editor | Syncfusion -description: Learn here all about moving the selection to a specific position in Syncfusion JavaScript (ES6) Document Editor control of Syncfusion Essential JS 2 and more. +title: Move to Specific Position in JavaScript (ES6) DOCX Editor | Syncfusion +description: Learn how to move the selection to a specific position in Syncfusion JavaScript (ES6) DOCX Editor using the select API for precise cursor control. platform: document-processing control: Move Selection to a Specific Position documentation: ug domainurl: ##DomainURL## --- -# Move Selection to Specific Position in JavaScript (ES6) DOCX Editor +# Move to Specific Position in JavaScript (ES6) Document Editor Using the [`select`](https://ej2.syncfusion.com/documentation/api/document-editor/selection#select) API in the selection module, you can set the cursor position anywhere in the document. diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/open-default-document.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/open-default-document.md index d23484a18c..59c810a381 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/open-default-document.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/open-default-document.md @@ -1,14 +1,14 @@ --- layout: post -title: Open a Default Document in JavaScript (ES6) DOCX Editor | Syncfusion -description: Learn here all about opening a default document in Syncfusion JavaScript (ES6) Document Editor control of Syncfusion Essential JS 2 and more. +title: Open Default Document in JavaScript (ES6) DOCX Editor | Syncfusion +description: Learn how to open a default document in Syncfusion JavaScript (ES6) DOCX Editor using the open and created APIs to load SFDT content on startup. platform: document-processing control: Open a Default Document documentation: ug domainurl: ##DomainURL## --- -# Open a Default Document in JavaScript (ES6) Document Editor control +# Open Default Document in JavaScript (ES6) Document Editor In this article, we are going to see how to open a default document when the DocumentEditor and DocumentEditorContainer are initialized. diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/open-document-by-address.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/open-document-by-address.md index 0b5b15d77a..b5ba3c7c5d 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/open-document-by-address.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/open-document-by-address.md @@ -1,14 +1,14 @@ --- layout: post title: Open Document by Address in JavaScript (ES6) DOCX Editor | Syncfusion -description: Learn here all about opening a document by address in Syncfusion JavaScript (ES6) Document Editor control of Syncfusion Essential JS 2 and more. +description: Learn how to open a document by URL address in Syncfusion JavaScript (ES6) DOCX Editor to load external documents directly into the editor. platform: document-processing control: Open a Document by Address documentation: ug domainurl: ##DomainURL## --- -# Open a Document by Address in JavaScript (ES6) Document Editor control +# Open Document by Address in JavaScript (ES6) Document Editor ## How to open a document from a URL in the DocumentEditor From b8ed6409a9ff3ed6bb2d50db73e1069d17cc8c08 Mon Sep 17 00:00:00 2001 From: Kalaivannan-Ganesan <93248069+Kalaivannan-Ganesan@users.noreply.github.com> Date: Tue, 11 Aug 2026 07:50:32 +0530 Subject: [PATCH 5/5] Resolved CI Failures --- .../how-to/insert-text-or-image-in-table-programmatically.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/insert-text-or-image-in-table-programmatically.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/insert-text-or-image-in-table-programmatically.md index 0813d6c94f..cbb54b3006 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/insert-text-or-image-in-table-programmatically.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/insert-text-or-image-in-table-programmatically.md @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Add Text/Image in Table Programmatically, JavaScript (ES6) Document Editor +# 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) 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.