Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ domainurl: ##DomainURL##

# 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)" %}
Expand Down Expand Up @@ -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)
Original file line number Diff line number Diff line change
Expand Up @@ -10,24 +10,22 @@ domainurl: ##DomainURL##

# 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 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 |
|-----------------|-------------|----|
Expand All @@ -38,11 +36,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)" %}
Expand Down Expand Up @@ -112,17 +109,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 });
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@ domainurl: ##DomainURL##

# How to Open a Default Document in Vue DOCX Editor

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)" %}
Expand All @@ -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

Expand All @@ -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.
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.
Original file line number Diff line number Diff line change
Expand Up @@ -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) (Document 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)" %}
Expand All @@ -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);
Expand Down Expand Up @@ -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);
Expand All @@ -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")]
Expand Down
34 changes: 17 additions & 17 deletions Document-Processing/Word/Word-Processor/vue/how-to/optimize-sfdt.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@ domainurl: ##DomainURL##

# How to Optimize SFDT Files in Vue DOCX Editor

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) (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:
* 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:

<table>
<tr>
Expand Down Expand Up @@ -72,16 +72,16 @@ export default {
<tr>
<td>Server-side C#</td>
<td>
{% 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 %}
</td>
<td>
{% 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);
Expand All @@ -92,23 +92,23 @@ string sfdt = Newtonsoft.Json.JsonConvert.SerializeObject(sfdtDocument);
<tr>
<td>Server-side Java</td>
<td>
{% tabs %}
{% highlight java tabtitle="Import"%}
{% tabs %}
{% highlight java tabtitle="Import" %}
String sfdtDocument = WordProcessorHelper.load(stream, formatType);
{% endhighlight %}
{% endtabs %}
</td>
<td>
{% tabs %}
{% highlight java tabtitle="Import"%}
{% tabs %}
{% highlight java tabtitle="Import" %}
String sfdtDocument = WordProcessorHelper.load(stream, formatType, false);
{% endhighlight %}
{% endtabs %}
</td>
</tr>
</table>

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:

<table>
<tr>
Expand Down Expand Up @@ -154,8 +154,8 @@ export default {
<tr>
<td>Server-side C#</td>
<td>
{% 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;
Expand All @@ -168,8 +168,8 @@ string oldSfdt = JsonSerializer.Serialize(sfdtDocument);
<tr>
<td>Server-side Java</td>
<td>
{% tabs %}
{% highlight java tabtitle="Import"%}
{% tabs %}
{% highlight java tabtitle="Import" %}
WordDocument docIODocument = WordProcessorHelper.save(optimizedSfdt);
String oldSfdt = WordProcessorHelper.load(docIODocument, false);
{% endhighlight %}
Expand Down