Skip to content

Task(1044410): Addressing Vue DOCX Editor UG documentation issues #4395

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SaranNagaraj wants to merge 1 commit into
base: hotfix/hotfix-v34.2.2
Choose a base branch
from
Open

Task(1044410): Addressing Vue DOCX Editor UG documentation issues #4395

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
18 changes: 9 additions & 9 deletions Document-Processing/Word/Word-Processor/vue/how-to/add-save-button-in-toolbar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
---
layout: post
title: Add save button in Vue Document editor toolbar | Syncfusion
description: Learn here to add save button in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more.
control: Add save button tool bar
title: Add save button in Vue DOCX Editor toolbar | Syncfusion
description: Learn here to add a save button to the Syncfusion Vue Document Editor component of Syncfusion Essential JS 2 and more.
control: Add save button toolbar
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---

# Add save button in Vue Document editor toolbar
# Add a save button in the Vue Document Editor toolbar

## To add a save button to the existing toolbar in DocumentEditorContainer
## Add a save button to the existing toolbar in DocumentEditorContainer

[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) Container allows you to add a new button to the existing items in a toolbar using [`CustomToolbarItemModel`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/customToolbarItemModel/) and with existing items in [`toolbarItems`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container#toolbaritems) property. Newly added item click action can be defined in [`toolbarClick`](https://ej2.syncfusion.com/vue/documentation/api/toolbar/clickEventArgs/).
[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) Container allows you to add a new button to the existing items in a toolbar using [`CustomToolbarItemModel`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/customToolbarItemModel) and include it with the existing items in the [`toolbarItems`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container#toolbaritems) property. The click action for the newly added item can be defined in [`toolbarClick`](https://ej2.syncfusion.com/vue/documentation/api/toolbar/clickEventArgs).

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
Expand Down Expand Up @@ -44,7 +44,7 @@ provide('DocumentEditorContainer', [Toolbar]);
const onToolbarClick = function (args) {
switch (args.item.id) {
case 'save':
//Disable image toolbar item.
//Save the document (Download the document).
container.value.ej2Instances.documentEditor.save('sample', 'Docx');
break;
}
Expand Down Expand Up @@ -88,7 +88,7 @@ export default {
onToolbarClick: function (args) {
switch (args.item.id) {
case 'save':
//Save the document(Download the document)
//Save the document (Download the document).
this.$refs.container.ej2Instances.documentEditor.save('sample', 'Docx');
break;
}
Expand All @@ -100,4 +100,4 @@ export default {
{% endhighlight %}
{% endtabs %}

>Note: Default value of `toolbarItems` is `['New', 'Open', 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl']`.
N> The default value of `toolbarItems` is `['New', 'Open', 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl']`.
46 changes: 23 additions & 23 deletions ...cessing/Word/Word-Processor/vue/how-to/auto-save-document-in-document-editor.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
---
layout: post
title: Auto save document in document editor in Vue Document editor component | Syncfusion
description: Learn here all about Auto save document in document editor in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more.
control: Auto save document in document editor
title: Auto save a document in the Vue DOCX Editor component | Syncfusion
description: Learn here all about how to auto save a document in the Syncfusion Vue Document Editor component of Syncfusion Essential JS 2 and more.
control: Auto save document in Document Editor
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---

# Auto save document in document editor in Vue Document editor component
# Auto save a document in the Vue Document Editor component

In this article, we are going to see how to auto save the document in AWS S3. You can automatically save the edited content in regular intervals of time. It helps reduce the risk of data loss by saving an open document automatically at customized intervals.

The following example illustrates how to auto save the document in AWS S3.

* In the client-side, using content change event, we can automatically save the edited content in regular intervals of time. Based on `contentChanged` boolean, the document send as Docx format to server-side using [`saveAsBlob`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#saveasblob) method.
* In the client-side, using the content change event, we can automatically save the edited content in regular intervals of time. Based on the `contentChanged` boolean value, the document is sent as a DOCX file to the server-side using the [`saveAsBlob`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#saveasblob) method.

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
Expand All @@ -34,7 +34,7 @@ const container = ref(null);
const serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';
const contentChanged = ref(false);

//Inject require modules.
//Inject required modules.
provide('DocumentEditorContainer', [Toolbar]);

const contentChangeEvent = function () {
Expand All @@ -47,9 +47,9 @@ const onCreated = function () {
container.value.ej2Instances.documentEditor
.saveAsBlob('Docx')
.then((blob) => {
console.log('Saved sucessfully');
console.log('Saved successfully');
let exportedDocument = blob;
//Now, save the document where ever you want.
//Now, save the document wherever you want.
let formData = new FormData();
formData.append('fileName', 'sample.docx');
formData.append('data', exportedDocument);
Expand All @@ -64,7 +64,7 @@ const onCreated = function () {
req.onreadystatechange = () => {
if (req.readyState === 4) {
if (req.status === 200 || req.status === 304) {
console.log('Saved sucessfully');
console.log('Saved successfully');
}
}
};
Expand Down Expand Up @@ -100,7 +100,7 @@ export default {
};
},
provide: {
//Inject require modules.
//Inject required modules.
DocumentEditorContainer: [Toolbar]
},
methods: {
Expand All @@ -114,9 +114,9 @@ export default {
this.$refs.container.ej2Instances.documentEditor
.saveAsBlob('Docx')
.then((blob) => {
console.log('Saved sucessfully');
console.log('Saved successfully');
let exportedDocument = blob;
//Now, save the document where ever you want.
//Now, save the document wherever you want.
let formData = new FormData();
formData.append('fileName', 'sample.docx');
formData.append('data', exportedDocument);
Expand All @@ -131,7 +131,7 @@ export default {
req.onreadystatechange = () => {
if (req.readyState === 4) {
if (req.status === 200 || req.status === 304) {
console.log('Saved sucessfully');
console.log('Saved successfully');
}
}
};
Expand All @@ -148,11 +148,11 @@ 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.

* In server-side, configure the access key and secret key in `web.config` file and register profile in `startup.cs`.
* In the server-side, configure the access key and secret key in the `web.config` file and register the profile in `startup.cs`.

In `web.config`, add key like below format:
In `web.config`, add keys in the format below:

```c#
<appSettings>
Expand All @@ -162,13 +162,13 @@ export default {
</appSettings>
```

In `startup.cs`, register profile in below format:
In `startup.cs`, register the profile in the format below:

```c#
Amazon.Util.ProfileManager.RegisterProfile("sync_development","", "");
```

* In server-side, Receives the stream content from client-side and process it to save the document in aws s3. Add Web API in controller file like below to save the document in aws s3.
* In the server-side, receive the stream content from the client-side and process it to save the document in an AWS S3. Add a Web API in the controller file like below to save the document in an AWS S3.

```c#
[AcceptVerbs("Post")]
Expand All @@ -182,7 +182,7 @@ export default {
file.CopyTo(stream);
UploadFileStreamToS3(stream, "documenteditor", "", "GettingStarted.docx");
stream.Close();
return "Sucess";
return "Success";
}

public bool UploadFileStreamToS3(System.IO.Stream localFilePath, string bucketName, string subDirectoryInBucket, string fileNameInS3)
Expand All @@ -194,15 +194,15 @@ export default {

if (subDirectoryInBucket == "" || subDirectoryInBucket == null)
{
request.BucketName = bucketName; //no subdirectory just bucket name
request.BucketName = bucketName; //no subdirectory just bucket name
}
else
{ // subdirectory and bucket name
{ // subdirectory and bucket name
request.BucketName = bucketName + @"/" + subDirectoryInBucket;
}
request.Key = fileNameInS3; //file name up in S3
request.Key = fileNameInS3; //file name up in S3
request.InputStream = localFilePath;
utility.Upload(request); //commensing the transfer
utility.Upload(request); //commencing the transfer

return true; //indicate that the file was sent
}
Expand Down
38 changes: 19 additions & 19 deletions Document-Processing/Word/Word-Processor/vue/how-to/auto-save-document.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
---
layout: post
title: Auto save document in Vue Document editor component | Syncfusion
description: Learn here all about Auto save document in document editor in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more.
control: Auto save document in document editor
title: Auto save a document in the Vue DOCX Editor component | Syncfusion
description: Learn here all about how to auto save a document in the Syncfusion Vue Document Editor component of Syncfusion Essential JS 2 and more.
control: Auto save document in Document Editor
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---

# Auto save document in document editor in Vue Document editor component
# Auto save a document in the Vue Document Editor component

In this article, we are going to see how to auto save the document to server. You can automatically save the edited content in regular intervals of time. It helps reduce the risk of data loss by saving an open document automatically at customized intervals.
In this article, we are going to see how to auto save the document to the server. You can automatically save the edited content in regular intervals of time. It helps reduce the risk of data loss by saving an open document automatically at customized intervals.

The following example illustrates how to auto save the document in server.
The following example illustrates how to auto save the document on the server.

* In the client-side, using content change event, we can automatically save the edited content in regular intervals of time. Based on `contentChanged` boolean, the document send as Docx format to server-side using [`saveAsBlob`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#saveasblob) method.
* In the client-side, using the content change event, we can automatically save the edited content in regular intervals of time. Based on the `contentChanged` boolean value, the document is sent as a DOCX file to the server-side using the [`saveAsBlob`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#saveasblob) method.

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
Expand All @@ -34,7 +34,7 @@ const container = ref(null);
const serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';
const contentChanged = ref(false);

//Inject require modules.
//Inject required modules.
provide('DocumentEditorContainer', [Toolbar]);

const contentChangeEvent = function () {
Expand All @@ -47,9 +47,9 @@ const onCreated = function () {
container.value.ej2Instances.documentEditor
.saveAsBlob('Docx')
.then((blob) => {
console.log('Saved sucessfully');
console.log('Saved successfully');
let exportedDocument = blob;
//Now, save the document where ever you want.
//Now, save the document wherever you want.
let formData = new FormData();
formData.append('fileName', 'sample.docx');
formData.append('data', exportedDocument);
Expand All @@ -64,7 +64,7 @@ const onCreated = function () {
req.onreadystatechange = () => {
if (req.readyState === 4) {
if (req.status === 200 || req.status === 304) {
console.log('Saved sucessfully');
console.log('Saved successfully');
}
}
};
Expand Down Expand Up @@ -100,7 +100,7 @@ export default {
};
},
provide: {
//Inject require modules.
//Inject required modules.
DocumentEditorContainer: [Toolbar]
},
methods: {
Expand All @@ -114,9 +114,9 @@ export default {
this.$refs.container.ej2Instances.documentEditor
.saveAsBlob('Docx')
.then((blob) => {
console.log('Saved sucessfully');
console.log('Saved successfully');
let exportedDocument = blob;
//Now, save the document where ever you want.
//Now, save the document wherever you want.
let formData = new FormData();
formData.append('fileName', 'sample.docx');
formData.append('data', exportedDocument);
Expand All @@ -131,7 +131,7 @@ export default {
req.onreadystatechange = () => {
if (req.readyState === 4) {
if (req.status === 200 || req.status === 304) {
console.log('Saved sucessfully');
console.log('Saved successfully');
}
}
};
Expand All @@ -148,9 +148,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.

* In server-side, Receives the stream content from client-side and process it to save the document in Server or Database from the received stream. Add Web API in controller file like below to save the document.
* In the server-side, receive the stream content from the client-side and process it to save the document in a server or database from the received stream. Add a Web API in the controller file like below to save the document.

```c#
[AcceptVerbs("Post")]
Expand All @@ -164,7 +164,7 @@ export default {
file.CopyTo(stream);
//Save the stream to database or server as per the requirement.
stream.Close();
return "Sucess";
return "Success";
}
```

Expand All @@ -173,4 +173,4 @@ export default {
Explore how to automatically save Word documents using the Vue Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/vue/#/material3/document-editor/auto-save.html).

## See Also
* [Autosave document in DocumentEditor](../how-to/auto-save-document-in-document-editor)
* [Auto save document in DocumentEditor](../how-to/auto-save-document-in-document-editor)
Loading