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..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 @@ -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/'; @@ -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..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 @@ -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'; @@ -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..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,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 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 specific position +control: Move Selection to a Specific Position documentation: ug domainurl: ##DomainURL## --- -# Move selection to specific position in JavaScript (ES6) Document editor +# Move to 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..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,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 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 default document +control: Open a Default Document documentation: ug domainurl: ##DomainURL## --- -# Open 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 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..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,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 Document by Address in JavaScript (ES6) DOCX Editor | Syncfusion +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 document by address +control: Open a Document by Address documentation: ug domainurl: ##DomainURL## --- -# Open document by address in JavaScript (ES6) Document editor control +# Open Document by Address in JavaScript (ES6) Document Editor -## 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);