diff --git a/Document-Processing/Word/Word-Processor/vue/how-to/insert-text-or-image-in-table-programmatically.md b/Document-Processing/Word/Word-Processor/vue/how-to/insert-text-or-image-in-table-programmatically.md index ba03618522..45b485dcb9 100644 --- a/Document-Processing/Word/Word-Processor/vue/how-to/insert-text-or-image-in-table-programmatically.md +++ b/Document-Processing/Word/Word-Processor/vue/how-to/insert-text-or-image-in-table-programmatically.md @@ -1,6 +1,6 @@ --- layout: post -title: Insert text or image in table programmatically in Vue Document editor component | Syncfusion +title: How to Insert Text or Image in Table in Vue DOCX Editor | Syncfusion description: Learn here all about Insert text or image in table programmatically in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more. control: Insert text or image in table programmatically platform: document-processing @@ -8,13 +8,13 @@ documentation: ug domainurl: ##DomainURL## --- -# Insert text or image in table programmatically in Vue Document editor component +# How to Insert Text or Image in Table in Vue DOCX Editor -Using [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-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 [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) APIs, you can insert [`text`](../how-to/insert-text-in-current-position#insert-text-in-current-cursor-position) or [`image`](../image#images) in a [`table`](../table#create-a-table) programmatically based on your requirement. -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 [`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 2×2 table and then add text and image programmatically. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -179,7 +179,7 @@ export default { {% endhighlight %} {% endtabs %} -> 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) \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/vue/how-to/move-selection-to-specific-position.md b/Document-Processing/Word/Word-Processor/vue/how-to/move-selection-to-specific-position.md index 1ecfe8c045..8c5781b29a 100644 --- a/Document-Processing/Word/Word-Processor/vue/how-to/move-selection-to-specific-position.md +++ b/Document-Processing/Word/Word-Processor/vue/how-to/move-selection-to-specific-position.md @@ -1,6 +1,6 @@ --- layout: post -title: Move selection to specific position in Vue Document editor component | Syncfusion +title: How to Move Selection to a Position in Vue DOCX Editor | Syncfusion description: Learn here all about Move selection to specific position in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more. control: Move selection to specific position platform: document-processing @@ -8,26 +8,25 @@ documentation: ug domainurl: ##DomainURL## --- -# Move selection to specific position in Vue Document editor component +# How to Move Selection to a Position in Vue DOCX Editor +Using [`select`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/selection#select) API in selection module, you can set the cursor position anywhere in the document. -Using [`select`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/selection#select) API in selection module, You can set cursor position to anywhere in the document. +## Select content based on start and end hierarchical index -## Selects 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 hierarchical index. ``` // Selection will occur between provided start and end offset -this.$refs.container.ej2Instances..documentEditor.editor.insertText("Welcome"); -// The below code will select the letters “We” from inserted text “Welcome” -this.$refs.container.ej2Instances..documentEditor.selection.select("0;0;0", "0;0;2"); +this.$refs.container.ej2Instances.documentEditor.editor.insertText("Welcome"); +// The following code will select the letters "We" from inserted text "Welcome" +this.$refs.container.ej2Instances.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 in detail. | Element |Hierarchical Format | Explanation | |-----------------|-------------|----| @@ -38,11 +37,10 @@ The following table illustrates about Hierarchical index in detail. ## Get the selection start and end hierarchical index -Using [`startOffset`](https://ej2.syncfusion.com/vue/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/vue/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/vue/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/vue/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 document. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -112,17 +110,17 @@ export default { {% endhighlight %} {% endtabs %} -> 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. -Document editor have [`selectionChange`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#selectionchange) event which is triggered whenever the selection changes in Document. +Document Editor has [`selectionChange`](https://ej2.syncfusion.com/vue/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/vue/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/vue/documentation/api/document-editor/selectionSettings) to select the content based on left and top positions. -x denotes the left position and y denotes the top position and extend denotes whether to extend or update selection. +x denotes the left position, y denotes the top position, and extend denotes whether to extend or update the selection. -Please check below code sample for reference. +Please refer to the code sample below for reference. ``` this.$refs.container.ej2Instances.documentEditor.selection.select({ x: 188.4814208984375 , y: 662.00005, extend: true }); diff --git a/Document-Processing/Word/Word-Processor/vue/how-to/open-default-document.md b/Document-Processing/Word/Word-Processor/vue/how-to/open-default-document.md index 3baa120b0c..870a1a4cc1 100644 --- a/Document-Processing/Word/Word-Processor/vue/how-to/open-default-document.md +++ b/Document-Processing/Word/Word-Processor/vue/how-to/open-default-document.md @@ -10,15 +10,15 @@ domainurl: ##DomainURL## # Open default document in Vue Document editor component -In this article, we are going to see how to open a default document when Document Editor & Document Editor Container is initialized. +In this article, we are going to see how to open a default document when Document Editor & Document Editor Container are initialized. ## Opening a default document in DocumentEditor -By default, [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) will open blank document. You can use [`open`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#open) API in Document Editor to open the sfdt content. +By default, [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) will open a blank document. You can use [`open`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#open) API in Document Editor to open the SFDT content. -Document editor have [`created`](https://ej2.syncfusion.com/vue/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/vue/documentation/api/document-editor#open) and [`created`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#created) API. +Document Editor has [`created`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#created) event which gets triggered once Document Editor control is created. So, if you want to open the document by default, you can use the [`open`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#open) and [`created`](https://ej2.syncfusion.com/vue/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 Document Editor control gets created. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -31,7 +31,7 @@ The following example illustrates how to open the default SFDT content once Docu {% previewsample "/document-processing/code-snippet/document-editor/vue/open-default-document-cs1" %} -> 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. ## Opening a default document in DocumentEditorContainer @@ -46,4 +46,4 @@ The following example illustrates how to open the default SFDT content once Docu {% previewsample "/document-processing/code-snippet/document-editor/vue/open-default-document-cs2" %} -> 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. \ No newline at end of file +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. \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/vue/how-to/open-document-by-address.md b/Document-Processing/Word/Word-Processor/vue/how-to/open-document-by-address.md index cf79e15f1b..ef28574e05 100644 --- a/Document-Processing/Word/Word-Processor/vue/how-to/open-document-by-address.md +++ b/Document-Processing/Word/Word-Processor/vue/how-to/open-document-by-address.md @@ -1,6 +1,6 @@ --- layout: post -title: Open Document by Address in Vue Document Editor Component | Syncfusion +title: Open document by address in Vue DOCX Editor | Syncfusion description: Learn here all about open document by address in Syncfusion Essential Vue Document Editor component, it's elements and more. control: Open document by address platform: document-processing @@ -12,9 +12,9 @@ domainurl: ##DomainURL## ## How to open a document from URL in DocumentEditor -In this article, we are going to see how to open a document from URL in [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) +In this article, we are going to see how to open a document from URL in [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor). -please refer below example for client-side code +Please refer to the example below for the client-side code. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -38,7 +38,7 @@ provide('DocumentEditorContainer', [Toolbar]); const onClick = function () { let http = new XMLHttpRequest(); - //add your url in which you want to open document inside the "" + //add your URL from which you want to open the document inside the "" let content = { fileUrl: "" }; let baseurl = "/api/documenteditor/ImportFileURL"; http.open("POST", baseurl, true); @@ -85,7 +85,7 @@ export default { methods: { onClick: function () { let http = new XMLHttpRequest(); - //add your url in which you want to open document inside the "" + //add your URL from which you want to open the document inside the "" let content = { fileUrl: "" }; let baseurl = "/api/documenteditor/ImportFileURL"; http.open("POST", baseurl, true); @@ -107,9 +107,9 @@ export default { {% endhighlight %} {% endtabs %} -> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. +N> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. -please refer below example for server-side code +Please refer to the example below for the server-side code. ```c# [AcceptVerbs("Post")] diff --git a/Document-Processing/Word/Word-Processor/vue/how-to/optimize-sfdt.md b/Document-Processing/Word/Word-Processor/vue/how-to/optimize-sfdt.md index 04c5bfe4db..96baad80ae 100644 --- a/Document-Processing/Word/Word-Processor/vue/how-to/optimize-sfdt.md +++ b/Document-Processing/Word/Word-Processor/vue/how-to/optimize-sfdt.md @@ -10,14 +10,14 @@ domainurl: ##DomainURL## # How to optimize the SFDT file -Starting from version v21.1.x, the SFDT file generated in [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) component is optimized by default to reduce the file size. All static keys are minified, and the final JSON string is compressed. This helps reduce the SFDT file size relative to a DOCX file and provides the following benefits, +Starting from version v21.1.x, the SFDT file generated in [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) component is optimized by default to reduce the file size. All static keys are minified, and the final JSON string is compressed. This helps reduce the SFDT file size relative to a DOCX file and provides the following benefits: * File transfer between client and server through the internet gets faster. * The new optimized SFDT files require less storage space than the old SFDT files. -Hence, the optimized SFDT file can't be directly manipulated as JSON string. +As a result, the optimized SFDT file can't be directly manipulated as a JSON string. -> This feature comes with a public API to switch between the old and new optimized SFDT format, allowing backward compatibility. +N> This feature comes with a public API to switch between the old and new optimized SFDT format, allowing backward compatibility. -As a backward compatibility to create older format SFDT files, refer the following code changes, +As a backward compatibility to create older format SFDT files, refer to the following code changes: @@ -72,16 +72,16 @@ export default {
Server-side C# -{% tabs %} -{% highlight c# tabtitle="Import"%} +{% tabs %} +{% highlight c# tabtitle="Import" %} WordDocument sfdtDocument = WordDocument.Load(stream, formatType); string sfdt = Newtonsoft.Json.JsonConvert.SerializeObject(sfdtDocument); {% endhighlight %} {% endtabs %} -{% tabs %} -{% highlight c# tabtitle="Import"%} +{% tabs %} +{% highlight c# tabtitle="Import" %} WordDocument sfdtDocument = WordDocument.Load(stream, formatType); sfdtDocument.OptimizeSfdt = false; string sfdt = Newtonsoft.Json.JsonConvert.SerializeObject(sfdtDocument); @@ -92,15 +92,15 @@ string sfdt = Newtonsoft.Json.JsonConvert.SerializeObject(sfdtDocument);
Server-side Java -{% tabs %} -{% highlight java tabtitle="Import"%} +{% tabs %} +{% highlight java tabtitle="Import" %} String sfdtDocument = WordProcessorHelper.load(stream, formatType); {% endhighlight %} {% endtabs %} -{% tabs %} -{% highlight java tabtitle="Import"%} +{% tabs %} +{% highlight java tabtitle="Import" %} String sfdtDocument = WordProcessorHelper.load(stream, formatType, false); {% endhighlight %} {% endtabs %} @@ -108,7 +108,7 @@ String sfdtDocument = WordProcessorHelper.load(stream, formatType, false);
-To convert from older format SFDT from a new optimized SFDT file, refer the following code example, +To convert a new optimized SFDT file to the older format, refer to the following code example: @@ -154,8 +154,8 @@ export default {
Server-side C# -{% tabs %} -{% highlight c# tabtitle="Import"%} +{% tabs %} +{% highlight c# tabtitle="Import" %} using(Syncfusion.DocIO.DLS.WordDocument docIODocument = WordDocument.Save(optimizedSfdt)) { sfdtDocument = WordDocument.Load(docIODocument); sfdtDocument.OptimizeSfdt = false; @@ -168,8 +168,8 @@ string oldSfdt = JsonSerializer.Serialize(sfdtDocument);
Server-side Java -{% tabs %} -{% highlight java tabtitle="Import"%} +{% tabs %} +{% highlight java tabtitle="Import" %} WordDocument docIODocument = WordProcessorHelper.save(optimizedSfdt); String oldSfdt = WordProcessorHelper.load(docIODocument, false); {% endhighlight %}