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
@@ -1,20 +1,20 @@
---
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
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)" %}
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
@@ -1,33 +1,32 @@
---
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
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 |
|-----------------|-------------|----|
Expand All @@ -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)" %}
Expand Down Expand Up @@ -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 });
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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)" %}
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
@@ -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
Expand All @@ -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)" %}
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
Loading