Task(1043990): Updated 4 files in Vue DOCX Editor

Document-Processing/Word/Word-Processor/vue/content-control.md

@@ -1,21 +1,21 @@
 ---
 layout: post
-title: Content control in Vue Document editor control | Syncfusion
-description: Learn here all about Content control in Syncfusion Vue Document editor control of Syncfusion Essential JS 2 and more.
+title: Content control in Vue DOCX Editor control | Syncfusion
+description: Learn here all about Content control in Syncfusion Vue DOCX Editor control of Syncfusion Essential JS 2 and more.
 control: Content control 
 platform: document-processing
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Content control in Vue Document editor control
+# Content control in Vue DOCX Editor control
 
 [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) provides support for inserting, editing content controls.
 
-Content controls can be categorized based on its occurrence in a document as follows,
+Content controls can be categorized based on their occurrence in a document as follows:
 
-InlineContentControl: Among inline content inside, as a child of a paragraph.
-BlockContentControl: Among paragraphs and tables, as a child of a Body, HeaderFooter.
+InlineContentControl: Appears among inline content, as a child of a paragraph.
+BlockContentControl: Appears among paragraphs and tables, as a child of a Body or HeaderFooter.
 
 ## Types of Content Controls
 
@@ -33,7 +33,7 @@ Content control can be inserted using [`insertContentControl`](https://ej2.syncf
 {% highlight ts %}
 //Insert Rich Text Content Control
 this.$refs.container.ej2Instances.documentEditor.editor.insertContentControl('RichText');
-//Insert Rich Text Content Control with default sfdt string
+//Insert Rich Text Content Control with default SFDT value
 var sfdt = {"sections":[{"blocks":[{"inlines":[{"text": "Hello"}]}]}]};
 this.$refs.container.ej2Instances.documentEditor.editor.insertContentControl('RichText', sfdt);
 
@@ -44,7 +44,7 @@ this.$refs.container.ej2Instances.documentEditor.editor.insertContentControl('Te
 
 //Insert CheckBox Content Control
 this.$refs.container.ej2Instances.documentEditor.editor.insertContentControl('CheckBox');
-//Insert CheckBox Content Control with mention checked state
+//Insert CheckBox Content Control with checked state
 this.$refs.container.ej2Instances.documentEditor.editor.insertContentControl('CheckBox', true);
 
 //Insert ComboBox Content Control
@@ -54,7 +54,7 @@ this.$refs.container.ej2Instances.documentEditor.editor.insertContentControl('Co
 
 //Insert Date Content Control
 this.$refs.container.ej2Instances.documentEditor.editor.insertContentControl('Date');
-//Insert Date Content Control
+//Insert Date Content Control with default date
 this.$refs.container.ej2Instances.documentEditor.editor.insertContentControl('Date', '01/01/2024');
 
 //Insert DropDownList Content Control
@@ -70,7 +70,7 @@ this.$refs.container.ej2Instances.documentEditor.editor.insertContentControl('Pi
 
 ## Import content control properties
 
-Content control properties can be set using the [`ContentControlInfo`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/contentControlInfo/) and import it using [`importContentControlData`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#importcontentcontroldata)
+Content control properties can be set using the [`ContentControlInfo`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/contentControlInfo) and import it using [`importContentControlData`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#importcontentcontroldata). Use this to apply property values to existing content controls in the document.
 
 {% highlight ts %}
 var data = [];
@@ -80,15 +80,15 @@ this.$refs.container.ej2Instances.documentEditor.importContentControlData(data);
 
 ## Export content control properties
 
-Content control properties can be exported using the [`exportContentControlData`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#exportcontentcontroldata)
+Content control properties can be exported using the [`exportContentControlData`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#exportcontentcontroldata).
 
 {% highlight ts %}
 var contentControlInfos = this.$refs.container.ej2Instances.documentEditor.exportContentControlData();
 {% endhighlight %}
 
 ## Reset content control
 
-Content control properties can be reset using the [`resetContentControlData`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#resetcontentcontroldata)
+Content control properties can be reset using the [`resetContentControlData`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#resetcontentcontroldata). Use this to revert content controls back to their default property values and clear any previously imported or edited values.
 
 {% highlight ts %}
 var data = [];

Document-Processing/Word/Word-Processor/vue/dialog.md

@@ -1,20 +1,20 @@
 ---
 layout: post
-title: Dialog in Vue Document editor component | Syncfusion
-description: Learn here all about Dialog in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more.
+title: Dialog in Vue DOCX Editor component | Syncfusion
+description: Learn here all about Dialog in Syncfusion Vue DOCX Editor component of Syncfusion Essential JS 2 and more.
 control: Dialog 
 platform: document-processing
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Dialog in Vue Document editor component
+# Dialog in Vue DOCX Editor component
 
-[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) provides dialog support to major operations such as insert or edit hyperlink, formatting text, paragraph, style, list and table properties.
+[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) provides dialog support for major operations such as inserting or editing hyperlinks, and formatting text, paragraph, style, list, and table properties.
 
 ## Font Dialog
 
-Font dialog allows you to modify all text properties for selected contents at once such as bold, italic, underline, font size, font color, strikethrough, subscript and superscript.
+The Font dialog allows you to modify all text properties for selected contents at once, such as bold, italic, underline, font size, font color, strikethrough, subscript, and superscript.
 
 Refer to the following example.
 
@@ -31,7 +31,7 @@ Refer to the following example.
 
 ## Paragraph dialog
 
-This dialog allows modifying the paragraph formatting for selection at once such as text alignment, indentation, and spacing.
+This dialog allows modifying the paragraph formatting for a selection at once, such as text alignment, indentation, and spacing.
 
 To open this dialog, refer to the following example.
 
@@ -48,7 +48,7 @@ To open this dialog, refer to the following example.
 
 ## Table dialog
 
-This dialog allows creating and inserting a table at cursor position by specifying the required number of rows and columns.
+This dialog allows creating and inserting a table at the cursor position by specifying the required number of rows and columns.
 
 To open this dialog, refer to the following example.
 
@@ -71,6 +71,7 @@ This dialog allows you to perform the following operations:
 * Navigate to a bookmark.
 * Create a bookmark at current selection.
 * Delete an existing bookmark.
+
 To open this dialog, refer to the following example.
 
 {% tabs %}
@@ -86,7 +87,7 @@ To open this dialog, refer to the following example.
 
 ## Hyperlink dialog
 
-This dialog allows editing or inserting a hyperlink at cursor position.
+This dialog allows editing or inserting a hyperlink at the cursor position.
 
 To open this dialog, refer to the following example.
 
@@ -103,7 +104,7 @@ To open this dialog, refer to the following example.
 
 ## Table of contents dialog
 
-This dialog allows creating and inserting table of contents at cursor position. If the table of contents already exists at cursor position, you can customize its properties.
+This dialog allows creating and inserting a table of contents at the cursor position. If the table of contents already exists at the cursor position, you can customize its properties.
 
 To open this dialog, refer to the following example.
 
@@ -199,7 +200,7 @@ export default {
 
 ## Styles Dialog
 
-This dialog allows managing the styles in a document. It will display all the styles in the document with options to modify the properties of the existing style or create new style with the help of ‘Style dialog’. Refer to the following example.
+This dialog allows managing the styles in a document. It will display all the styles in the document with options to modify the properties of the existing style or create a new style with the help of the 'Style dialog'. Refer to the following example.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -293,7 +294,7 @@ export default {
 
 ## Style dialog
 
-You can directly use this dialog for modifying any existing style or add new style by providing the style name.
+You can directly use this dialog for modifying any existing style or adding a new style by providing the style name.
 
 To open this dialog, refer to the following example.
 
@@ -399,15 +400,15 @@ To open this dialog, refer to the following example.
       <button v-on:click='showListDialog'>Open dialog</button>
     </div>
     <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
-      :enableSfdtExport='true' :enableListDialog='true' height="370px" style="width: 100%;"></ejs-documenteditor>
+      :enableSfdtExport='true' :enableListDialog='true' :enableEditorHistory="true" height="370px" style="width: 100%;"></ejs-documenteditor>
   </div>
 </template>
 <script setup>
-import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, ListDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, ListDialog, EditorHistory, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
 import { provide, ref } from 'vue';
 
 const documenteditor = ref(null);
-provide('DocumentEditor', [Selection, Editor, ListDialog, SfdtExport]);
+provide('DocumentEditor', [Selection, Editor, ListDialog, EditorHistory, SfdtExport]);
 
 const showListDialog = function () {
   //Open list dialog.
@@ -546,7 +547,7 @@ export default {
   },
   provide: {
     //Inject require modules
-    DocumentEditor:  [Selection, Editor, BordersAndShadingDialog, SfdtExport]
+    DocumentEditor: [Selection, Editor, BordersAndShadingDialog, SfdtExport]
   },
   methods: {
     showBordersAndShadingDialog: function () {
@@ -573,7 +574,7 @@ export default {
 
 ## Table options dialog
 
-This dialog allows customizing the default cell margins and spacing between each cells of the selected table.
+This dialog allows customizing the default cell margins and spacing between each cell of the selected table. A table must exist in the document for this dialog to act on; the following sample inserts a table on mount for that reason.
 
 To open this dialog, refer to the following example.
 
@@ -674,7 +675,7 @@ export default {
 
 ## Table properties dialog
 
-This dialog allows customizing the table, row, and cell properties of the selected table.
+This dialog allows customizing the table, row, and cell properties of the selected table. A table must exist in the document for this dialog to act on; the following sample inserts a table on mount for that reason.
 
 To open this dialog, refer to the following example.
 

Document-Processing/Word/Word-Processor/vue/document-editor-toc.html

@@ -83,6 +83,7 @@
 <li><a href="/document-processing/word/word-processor/vue/right-to-left">RTL</a></li>
 <li><a href="/document-processing/word/word-processor/vue/chart">Chart</a></li>
 <li><a href="/document-processing/word/word-processor/vue/content-control">Content Control</a></li>
+<li><a href="/document-processing/word/word-processor/vue/document-management">Document Management</a></li>
 <li><a href="/document-processing/word/word-processor/vue/restrict-editing">Restrict Editing</a></li>
 <li><a href="/document-processing/word/word-processor/vue/spell-check">SpellCheck</a></li>
 <li><a href="/document-processing/word/word-processor/vue/global-local">Globalization</a></li>

Document-Processing/Word/Word-Processor/vue/document-management.md

@@ -1,22 +1,22 @@
 ---
 layout: post
-title: Document management in Vue Document editor component | Syncfusion
-description: Learn here all about Document management in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more.
+title: Document management in Vue DOCX Editor component | Syncfusion
+description: Learn here all about Document management in Syncfusion Vue DOCX Editor component of Syncfusion Essential JS 2 and more.
 control: Document management 
 platform: document-processing
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Document management in Vue Document editor component
+# Document management in Vue DOCX Editor component
 
 [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) provides support to restrict editing. When the protected document includes range permission, then unique user or user group only authorized to edit separate text area.
 
 ## Set current user
 
 You can use the `currentUser` property to authorize the current document user by name, email, or user group name.
 
-The following code shows how to set currentUser
+The following code shows how to set currentUser.
 
 ```javascript
 this.$refs.doceditcontainer.ej2Instances.documentEditor.currentUser = 'engineer@mycompany.com';
@@ -29,12 +29,12 @@ You can highlight the editable region of the current user using the `userColor`
 The following code shows how to set userColor.
 
 ```javascript
-this.$refs.doceditcontainer.ej2Instances.documentEditor..userColor = '#fff000';
+this.$refs.doceditcontainer.ej2Instances.documentEditor.userColor = '#fff000';
 ```
 
 You can toggle the highlight the editable region value using the "highlightEditableRanges" property.
 
-The folowing code shows how to toggle the highlight editable region value.
+The following code shows how to toggle the highlight editable region value.
 
 ```javascript
 this.$refs.doceditcontainer.ej2Instances.documentEditor.documentEditorSettings.highlightEditableRanges = true; 
@@ -43,14 +43,14 @@ this.$refs.doceditcontainer.ej2Instances.documentEditor.documentEditorSettings.h
 ## Restrict Editing Pane
 
 Restrict Editing Pane provides the following options to manage the document:
-* To apply formatting restrictions to the current document, select the allow formatting check box.
-* To apply editing restrictions to the current document, select the read only check box.
-* To add users to the current document, select more users option and add user from the popup dialog.
-* To include range permission to the current document, select parts of the document and choose users who are allowed to freely edit them from the listed check box.
-* To apply the chosen editing restrictions, click the **YES,START ENFORCING PROTECTION** button. A dialog box displays asking for a   password to protect.
+* To apply formatting restrictions to the current document, select the allow formatting checkbox.
+* To apply editing restrictions to the current document, select the read only checkbox.
+* To add users to the current document, select the more users option and add user from the popup dialog.
+* To include range permission to the current document, select the parts of the document and choose users who are allowed to freely edit them from the listed checkbox.
+* To apply the chosen editing restrictions, click the **YES, START ENFORCING PROTECTION** button. A dialog box displays asking for a password to protect.
 * To stop protection, select **STOP PROTECTION** button. A dialog box displays asking for a password to stop protection.
 
-The following code shows Restrict Editing Pane. To unprotect the document, use password '123'.
+The following code shows the base editor setup required to render the Restrict Editing Pane. To unprotect the document, use password '123'.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -63,7 +63,7 @@ The following code shows Restrict Editing Pane. To unprotect the document, use p
 
 {% previewsample "/document-processing/code-snippet/document-editor/vue/getting-started-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.
+> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the DOCX 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.
 
 ## See Also