diff --git a/Document-Processing/Word/Word-Processor/vue/how-to/add-save-button-in-toolbar.md b/Document-Processing/Word/Word-Processor/vue/how-to/add-save-button-in-toolbar.md index 9de17a5a9a..1d0f1a1b03 100644 --- a/Document-Processing/Word/Word-Processor/vue/how-to/add-save-button-in-toolbar.md +++ b/Document-Processing/Word/Word-Processor/vue/how-to/add-save-button-in-toolbar.md @@ -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)" %} @@ -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; } @@ -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; } @@ -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']`. \ No newline at end of file +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']`. \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/vue/how-to/auto-save-document-in-document-editor.md b/Document-Processing/Word/Word-Processor/vue/how-to/auto-save-document-in-document-editor.md index 1a7a0ba58d..89049318e4 100644 --- a/Document-Processing/Word/Word-Processor/vue/how-to/auto-save-document-in-document-editor.md +++ b/Document-Processing/Word/Word-Processor/vue/how-to/auto-save-document-in-document-editor.md @@ -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)" %} @@ -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 () { @@ -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); @@ -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'); } } }; @@ -100,7 +100,7 @@ export default { }; }, provide: { - //Inject require modules. + //Inject required modules. DocumentEditorContainer: [Toolbar] }, methods: { @@ -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); @@ -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'); } } }; @@ -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# @@ -162,13 +162,13 @@ export default { ``` - 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")] @@ -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) @@ -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 } diff --git a/Document-Processing/Word/Word-Processor/vue/how-to/auto-save-document.md b/Document-Processing/Word/Word-Processor/vue/how-to/auto-save-document.md index a3b7ec5f4a..4f550e3073 100644 --- a/Document-Processing/Word/Word-Processor/vue/how-to/auto-save-document.md +++ b/Document-Processing/Word/Word-Processor/vue/how-to/auto-save-document.md @@ -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)" %} @@ -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 () { @@ -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); @@ -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'); } } }; @@ -100,7 +100,7 @@ export default { }; }, provide: { - //Inject require modules. + //Inject required modules. DocumentEditorContainer: [Toolbar] }, methods: { @@ -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); @@ -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'); } } }; @@ -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")] @@ -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"; } ``` @@ -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) \ No newline at end of file +* [Auto save document in DocumentEditor](../how-to/auto-save-document-in-document-editor) \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/vue/how-to/change-document-view.md b/Document-Processing/Word/Word-Processor/vue/how-to/change-document-view.md index 1ca40badec..4df5ec4db2 100644 --- a/Document-Processing/Word/Word-Processor/vue/how-to/change-document-view.md +++ b/Document-Processing/Word/Word-Processor/vue/how-to/change-document-view.md @@ -1,31 +1,31 @@ --- layout: post -title: Change document view in Vue Document editor component | Syncfusion -description: Learn here all about Change document view in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more. -control: Change document view +title: Change document view in the Vue DOCX Editor component | Syncfusion +description: Learn here all about how to change the document view in the Syncfusion Vue Document Editor component of Syncfusion Essential JS 2 and more. +control: Change document view platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Change document view in Vue Document editor component +# Change document view in the Vue Document Editor component -## How to change the document view in DocumentEditor component +## How to change the document view in the DocumentEditor component -[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) allows you to change the view to web layout and print using the [`layoutType`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#layouttype) property with the supported [`LayoutType`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/layoutType/). +[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) allows you to change the view between web layout and print using the [`layoutType`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#layouttype) property with the supported [`LayoutType`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/layoutType). ``` ``` ->Note: Default value of [`layoutType`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#layouttype) in Document Editor component is [`Pages`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/layoutType/). +N> The default value of [`layoutType`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#layouttype) in the Document Editor component is [`Pages`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/layoutType). -## How to change the document view in DocumentEditorContainer component +## How to change the document view in the DocumentEditorContainer component -Document Editor Container component allows you to change the view to web layout and print using the [`layoutType`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container#layouttype) property with the supported [`LayoutType`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/layoutType/). +The Document Editor Container component allows you to change the view between web layout and print using the [`layoutType`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container#layouttype) property with the supported [`LayoutType`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/layoutType). ``` ``` ->Note: Default value of [`layoutType`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#layouttype) in Document Editor Container component is [`Pages`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/layoutType/). \ No newline at end of file +N> The default value of [`layoutType`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#layouttype) in the Document Editor Container component is [`Pages`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/layoutType). \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/vue/how-to/change-the-cursor-color-in-document-editor.md b/Document-Processing/Word/Word-Processor/vue/how-to/change-the-cursor-color-in-document-editor.md index e99de15c4a..caf9f1366b 100644 --- a/Document-Processing/Word/Word-Processor/vue/how-to/change-the-cursor-color-in-document-editor.md +++ b/Document-Processing/Word/Word-Processor/vue/how-to/change-the-cursor-color-in-document-editor.md @@ -1,25 +1,25 @@ --- layout: post -title: Change the cursor color in document editor in Vue Document editor component | Syncfusion -description: Learn here all about Change the cursor color in document editor in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more. -control: Change the cursor color in document editor +title: Change the cursor color in the Vue DOCX Editor component | Syncfusion +description: Learn here all about how to change the cursor color in the Syncfusion Vue Document Editor component of Syncfusion Essential JS 2 and more. +control: Change the cursor color in DOCX Editor platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Change the cursor color in document editor in Vue Document editor component +# Change the cursor color in the Vue Document Editor component -[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) default cursor color is black. The user can change the color by overriding the css property using class name. The Document editor cursor css have a class named `e-de-blink-cursor`. +[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) default cursor color is black. The user can change the color by overriding the CSS property using the class name. The Document Editor cursor CSS has a class named `e-de-blink-cursor`. -Please refer the below code snippet to change the cursor color to red. +Please refer to the code snippet below to change the cursor color to red. ``` .e-de-blink-cursor { -border-left: 1px solid red!important; +border-left: 1px solid red !important; } ``` -Output will be like below: +The output will be as shown below: -![Change the cursor color in document editor](../images/cursor-css.png) +![Change the cursor color in the Document Editor](../images/cursor-css.png)