diff --git a/Document-Processing/Word/Word-Processor/vue/how-to/change-the-default-search-highlight-color.md b/Document-Processing/Word/Word-Processor/vue/how-to/change-the-default-search-highlight-color.md
index 73b855a63c..106e86cd1b 100644
--- a/Document-Processing/Word/Word-Processor/vue/how-to/change-the-default-search-highlight-color.md
+++ b/Document-Processing/Word/Word-Processor/vue/how-to/change-the-default-search-highlight-color.md
@@ -1,18 +1,18 @@
 ---
 layout: post
-title: Change the default search highlight color in Vue Document editor component | Syncfusion
-description: Learn here all about Change the default search highlight color in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more.
-control: Change the default search highlight color 
+title: Change search highlight color in Vue DOCX Editor | Syncfusion
+description: Learn here all about how to change the default search highlight color in the Syncfusion Vue Document Editor component of Syncfusion Essential JS 2 and more.
+control: Change the default search highlight color
 platform: document-processing
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Change the default search highlight color in Vue Document editor component
+# Change search highlight color in Vue Document Editor
 
-[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) provides an options to change the default search highlight color using [`searchHighlightColor`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/documentEditorSettingsModel#searchhighlightcolor) in Document editor settings. The highlight color which is given in [`documentEditorSettings`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container#documenteditorsettings) will be highlighted on the searched text. By default, search highlight color is `yellow`.
+[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) provides an option to change the default search highlight color using [`searchHighlightColor`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/documentEditorSettingsModel#searchhighlightcolor) in Document Editor settings. The highlight color specified in [`documentEditorSettings`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container#documenteditorsettings) will be highlighted on the searched text. By default, the search highlight color is `yellow`.
 
-Similarly, you can use [`documentEditorSettings`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#documenteditorsettings) property for DocumentEditor also.
+Similarly, you can use the [`documentEditorSettings`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#documenteditorsettings) property for the DocumentEditor also.
 
 The following example code illustrates how to change the default search highlight color.
 
@@ -33,7 +33,7 @@ const serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api
 // Add required color to change the default search highlight color
 const settings = { searchHighlightColor: 'Grey' }
 
-//Inject require modules.
+//Inject required modules.
 provide('DocumentEditorContainer', [Toolbar])
 
 </script>
@@ -62,7 +62,7 @@ export default {
     }
   },
   provide: {
-    //Inject require modules.
+    //Inject required modules.
     DocumentEditorContainer: [Toolbar]
   }
 }
@@ -71,8 +71,8 @@ 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.
 
-Output will be like below:
+The output will be as shown below:
 
 ![How to change the default search highlight color](../images/search-color.png)
\ No newline at end of file
diff --git a/Document-Processing/Word/Word-Processor/vue/how-to/customize-color-picker.md b/Document-Processing/Word/Word-Processor/vue/how-to/customize-color-picker.md
index 459733f839..1c834778a6 100644
--- a/Document-Processing/Word/Word-Processor/vue/how-to/customize-color-picker.md
+++ b/Document-Processing/Word/Word-Processor/vue/how-to/customize-color-picker.md
@@ -1,20 +1,20 @@
 ---
 layout: post
-title: Customize color picker in Vue Document editor | Syncfusion
-description: Learn here all about Customize color picker in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more.
+title: Customize the color picker in the Vue DOCX Editor | Syncfusion
+description: Learn here all about how to customize the color picker in the Syncfusion Vue Document Editor component of Syncfusion Essential JS 2 and more.
 control: Customize color picker
 platform: document-processing
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Customize color picker in Vue Document editor component
+# Customize the color picker in the Vue Document Editor component
 
-[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) provides an options to customize the color picker using [`colorPickerSettings`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/documentEditorSettingsModel#colorpickersettings)in the document editor settings. The color picker offers customization options for default appearance, by allowing selection between Picker or Palette mode, for font and border colors."
+[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) provides an option to customize the color picker using [`colorPickerSettings`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/documentEditorSettingsModel#colorpickersettings) in the Document Editor settings. The color picker offers customization options for the default appearance by allowing selection between Picker or Palette mode for font and border colors.
 
-Similarly, you can use [`documentEditorSettings`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#documenteditorsettings) property for DocumentEditor also.
+Similarly, you can use the [`documentEditorSettings`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#documenteditorsettings) property for the DocumentEditor also.
 
-The following example code illustrates how to Customize the color picker in Document editor container.
+The following example code illustrates how to customize the color picker in the Document Editor container.
 
 ```
 <template>
@@ -34,25 +34,25 @@ The following example code illustrates how to Customize the color picker in Docu
       settings:{ colorPickerSettings: { mode: 'Palette', modeSwitcher: true, showButtons: true } } };
     },
     provide: {
-      //Inject require modules.
+      //Inject required modules.
       DocumentEditorContainer: [Toolbar]
     }
   }
 </script>
 ```
 
-> 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.
 
 | Property | Behavior |
 |---|---|
 | columns | It is used to render the ColorPicker palette with specified columns. Defaults to 10 |
-| disabled | It is used to enable / disable ColorPicker component. If it is disabled the ColorPicker popup won’t open. Defaults to false |
-| mode | It is used to render the ColorPicker with the specified mode. Defaults to ‘Picker’ |
-| modeSwitcher | It is used to show / hide the mode switcher button of ColorPicker component. Defaults to true |
-| showButtons | It is used to show / hide the control buttons (apply / cancel) of ColorPicker component. Defaults to true |
+| disabled | It is used to enable / disable the ColorPicker component. If it is disabled, the ColorPicker popup will not open. Defaults to false |
+| mode | It is used to render the ColorPicker with the specified mode. Defaults to 'Picker' |
+| modeSwitcher | It is used to show / hide the mode switcher button of the ColorPicker component. Defaults to true |
+| showButtons | It is used to show / hide the control buttons (apply / cancel) of the ColorPicker component. Defaults to true |
 
 
->**Note**: According to the Word document specifications, it is not possible to modify the **`Predefined Highlight colors`**. This limitation means that the range of highlight colors provided by default cannot be customized or expanded upon by the user to suit individual preferences. Consequently, users must work within the confines of the existing color palette, as no functionality currently exists to modify or personalize these predefined highlighting options.
+N> According to the Word document specifications, it is not possible to modify the **`Predefined Highlight colors`**. This limitation means that the range of highlight colors provided by default cannot be customized or expanded upon by the user to suit individual preferences. Consequently, users must work within the confines of the existing color palette, as no functionality currently exists to modify or personalize these predefined highlighting options.
 
 ## Online Demo
 
diff --git a/Document-Processing/Word/Word-Processor/vue/how-to/customize-context-menu.md b/Document-Processing/Word/Word-Processor/vue/how-to/customize-context-menu.md
index 23f4474da5..9dff2cefef 100644
--- a/Document-Processing/Word/Word-Processor/vue/how-to/customize-context-menu.md
+++ b/Document-Processing/Word/Word-Processor/vue/how-to/customize-context-menu.md
@@ -1,22 +1,22 @@
 ---
 layout: post
-title: Customize context menu in Vue Document editor component | Syncfusion
-description: Learn here all about Customize context menu in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more.
-control: Customize context menu 
+title: Customize context menu in Vue DOCX Editor | Syncfusion
+description: Learn here all about how to customize the context menu in the Syncfusion Vue Document Editor component of Syncfusion Essential JS 2 and more.
+control: Customize the context menu
 platform: document-processing
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Customize context menu in Vue Document editor component
+# Customize context menu in Vue Document Editor
 
-## How to customize context menu in Document Editor
+## How to customize the context menu in the Document Editor
 
-[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) allows you to add custom option in context menu. It can be achieved by using the [`addCustomMenu()`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/contextMenu#addcustommenu) method and custom action is defined using the [`customContextMenuSelect`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/customContentMenuEventArgs/)
+[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) allows you to add a custom option to the context menu. It can be achieved by using the [`addCustomMenu()`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/contextMenu#addcustommenu) method, and the custom action is defined using the [`customContextMenuSelect`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/customContentMenuEventArgs).
 
 ### Add Custom Option
 
-The following code shows how to add custom option in context menu.
+The following code shows how to add a custom option to the context menu.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -34,7 +34,7 @@ import { provide, ref } from 'vue';
 const container = ref(null);
 const serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';
 
-//Inject require modules.
+//Inject required modules.
 provide('DocumentEditorContainer', [Toolbar])
 
 const onCreated = function () {
@@ -99,7 +99,7 @@ export default {
     };
   },
   provide: {
-    //Inject require modules.
+    //Inject required modules.
     DocumentEditorContainer: [Toolbar]
   },
   methods: {
@@ -147,17 +147,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.
 
-### Customize custom option in context menu
+### Customize the custom option in the context menu
 
-Document Editor allows you to customize the added custom option and also to hide/show default context menu.
+The Document Editor allows you to customize the added custom option and also to hide/show the default context menu.
 
 #### Hide default context menu items
 
-Using [`addCustomMenu()`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/contextMenu#addcustommenu) method, you can hide the default context menu. By setting second parameter as true.
+Using the [`addCustomMenu()`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/contextMenu#addcustommenu) method, you can hide the default context menu by setting the second parameter to true.
 
-The following code shows how to hide default context menu and add custom option in context menu.
+The following code shows how to hide the default context menu and add a custom option to the context menu.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -175,7 +175,7 @@ import { provide, ref } from 'vue';
 const container = ref(null);
 const serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';
 
-//Inject require modules.
+//Inject required modules.
 provide('DocumentEditorContainer', [Toolbar])
 
 const onCreated = function () {
@@ -215,7 +215,7 @@ export default {
     };
   },
   provide: {
-    //Inject require modules.
+    //Inject required modules.
     DocumentEditorContainer: [Toolbar]
   },
   methods: {
@@ -238,11 +238,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.
 
 #### Customize added context menu items
 
-The following code shows how to hide/show added custom option in context menu using the [`customContextMenuBeforeOpen`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/beforeOpenCloseCustomContentMenuEventArgs/).
+The following code shows how to hide/show the added custom option in the context menu using the [`customContextMenuBeforeOpen`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/beforeOpenCloseCustomContentMenuEventArgs).
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -260,7 +260,7 @@ import { provide, ref } from 'vue';
 const container = ref(null);
 const serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';
 
-//Inject require modules.
+//Inject required modules.
 provide('DocumentEditorContainer', [Toolbar])
 
 const onCreated = function () {
@@ -331,7 +331,7 @@ export default {
     };
   },
   provide: {
-    //Inject require modules.
+    //Inject required modules.
     DocumentEditorContainer: [Toolbar]
   },
   methods: {
@@ -385,9 +385,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.
 
-The following is the output of custom context menu with customization.
+The following is the output of the custom context menu with customization.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -400,13 +400,13 @@ The following is the output of custom context menu with customization.
         
 {% previewsample "/document-processing/code-snippet/document-editor/vue/customize-context-menu-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.
 
-#### Customize Context Menu with sub-menu items
+#### Customize context menu with sub-menu items
 
-Document Editor allows you to customize the Context Menu with sub-menu items. It can be achieved by using the [`addCustomMenu()`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/contextMenu#addcustommenu) method.
+The Document Editor allows you to customize the context menu with sub-menu items. It can be achieved by using the [`addCustomMenu()`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/contextMenu#addcustommenu) method.
 
-The following code shows how to add a sub items in the custom option in context menu in Document Editor Container.
+The following code shows how to add sub-items to the custom option in the context menu in the Document Editor Container.
  
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -424,7 +424,7 @@ import { provide, ref } from 'vue';
 const container = ref(null);
 const serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';
 
-//Inject require modules.
+//Inject required modules.
 provide('DocumentEditorContainer', [Toolbar])
 
 const onCreated = function () {
@@ -495,7 +495,7 @@ export default {
     };
   },
   provide: {
-    //Inject require modules.
+    //Inject required modules.
     DocumentEditorContainer: [Toolbar],
   },
   methods: {
@@ -540,7 +540,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.
 
 ## Online Demo
 
diff --git a/Document-Processing/Word/Word-Processor/vue/how-to/customize-font-family-drop-down.md b/Document-Processing/Word/Word-Processor/vue/how-to/customize-font-family-drop-down.md
index 513e19b103..d0759cfa42 100644
--- a/Document-Processing/Word/Word-Processor/vue/how-to/customize-font-family-drop-down.md
+++ b/Document-Processing/Word/Word-Processor/vue/how-to/customize-font-family-drop-down.md
@@ -1,20 +1,20 @@
 ---
 layout: post
-title: Customize font family drop down in Vue Document editor component | Syncfusion
-description: Learn here all about Customize font family drop down in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more.
-control: Customize font family drop down 
+title: Customize font family drop-down in Vue DOCX Editor | Syncfusion
+description: Learn here all about how to customize the font family drop-down in the Syncfusion Vue Document Editor component of Syncfusion Essential JS 2 and more.
+control: Customize the font family drop-down
 platform: document-processing
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Customize font family drop down in Vue Document editor component
+# Customize font family drop-down in Vue Document Editor
 
-[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) provides an options to customize the font family drop down list values using [`fontfamilies`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/documentEditorSettingsModel#fontfamilies) in Document editor settings. Fonts which are added in fontFamilies of [`documentEditorSettings`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container#documenteditorsettings) will be displayed on font drop down list of text properties pane and font dialog.
+[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) provides an option to customize the font family drop-down list values using [`fontFamilies`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/documentEditorSettingsModel#fontfamilies) in the Document Editor settings. The fonts that are added in the `fontFamilies` of [`documentEditorSettings`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container#documenteditorsettings) will be displayed in the font drop-down list of the text properties pane and the font dialog.
 
-Similarly, you can use [`documentEditorSettings`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#documenteditorsettings) property for DocumentEditor also.
+Similarly, you can use the [`documentEditorSettings`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#documenteditorsettings) property for the DocumentEditor also.
 
-The following example code illustrates how to change the font families in Document editor container.
+The following example code illustrates how to change the font families in the Document Editor container.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -30,10 +30,10 @@ import { DocumentEditorContainerComponent as EjsDocumenteditorcontainer, Toolbar
 import { provide } from 'vue';
 
 const serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';
-// Add required font families to list it in font drop down
+// Add the required font families to list them in the font drop-down
 const settings = { fontFamilies: ['Algerian', 'Arial', 'Calibri', 'Cambria'] }
 
-//Inject require modules.
+//Inject required modules.
 provide('DocumentEditorContainer', [Toolbar])
 
 </script>
@@ -57,12 +57,12 @@ export default {
   data() {
     return {
       serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/',
-      // Add required font families to list it in font drop down
+      // Add the required font families to list them in the font drop-down
       settings: { fontFamilies: ['Algerian', 'Arial', 'Calibri', 'Cambria'] }
     };
   },
   provide: {
-    //Inject require modules.
+    //Inject required modules.
     DocumentEditorContainer: [Toolbar]
   }
 }
@@ -71,8 +71,8 @@ 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.
 
-Output will be like below:
+The output will be as shown below:
 
 ![Font](../images/font-family.png)
\ No newline at end of file
diff --git a/Document-Processing/Word/Word-Processor/vue/how-to/customize-ribbon.md b/Document-Processing/Word/Word-Processor/vue/how-to/customize-ribbon.md
index 5f627a121e..7302cd4329 100644
--- a/Document-Processing/Word/Word-Processor/vue/how-to/customize-ribbon.md
+++ b/Document-Processing/Word/Word-Processor/vue/how-to/customize-ribbon.md
@@ -1,19 +1,19 @@
 ---
 layout: post
-title: Customize Ribbon in Vue Document Editor | Syncfusion
-description: Learn how to customize the ribbon in Syncfusion Vue Document Editor - file menu, backstage, tabs, groups, and items.
+title: Customize Ribbon in the Vue DOCX Editor | Syncfusion
+description: Learn how to customize the ribbon in the Syncfusion Vue Document Editor - file menu, backstage, tabs, groups, and items.
 platform: document-processing
 control: Ribbon Customization
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Customize Ribbon in Vue Document Editor
+# Customize Ribbon in the Vue Document Editor
 
 The [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) provides an extensive and flexible API to customize the built-in ribbon UI. You can:
 
 - Customize the File menu.
-- Add the Backstage menu instead of File menu.
+- Add the Backstage menu instead of the File menu.
 - Show, hide, or add Ribbon tabs.
 - Show, hide, or add groups within tabs.
 - Show, hide, add, enable, or disable items within groups.
@@ -22,16 +22,16 @@ Below are detailed examples for each ribbon customization scenario.
 
 ## File Menu Customization
 
-Document Editor provides APIs to remove existing File menu items and add new custom items based on your requirements. You can modify the File menu using the [`fileMenuItems`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container#filemenuitems) property.
+The Document Editor provides APIs to remove existing File menu items and add new custom items based on your requirements. You can modify the File menu using the [`fileMenuItems`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container#filemenuitems) property.
 
-In below code example, In the example below, the "Open" and "Export" items have been removed from the File Menu Items, and new custom items have been added.
+In the example below, the "Open" and "Export" items have been removed from the File menu items, and new custom items have been added.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
 
 <template>
 <div class="control-section">
-    <ejs-documenteditorcontainer ref="doceditcontainer" :toolbarMode="'Ribbon'" 
+    <ejs-documenteditorcontainer ref="documenteditorcontainer" :toolbarMode="'Ribbon'" 
     :serviceUrl="hostUrl" :enableToolbar='true' height='600px' :fileMenuItems="fileMenuItems"
     @fileMenuItemClick="fileMenuClick"></ejs-documenteditorcontainer>
 </div>
@@ -49,11 +49,11 @@ const fileMenuItems = [
 ];
 function fileMenuClick(args) {
   if (args.item && args.item.id === 'custom_item') {
-    doceditcontainer.value.ej2Instances.documentEditor.save('Sample', 'Docx');
+    documenteditorcontainer.value.ej2Instances.documentEditor.save('Sample', 'Docx');
   }
 }
 onMounted(() => {
-  const editorInstance = doceditcontainer.value?.ej2Instances?.documentEditor;
+  const editorInstance = documenteditorcontainer.value?.ej2Instances?.documentEditor;
 });
 </script>
 
@@ -102,7 +102,7 @@ export default {
 
 ## Backstage Menu Customization
 
-The Document Editor provides an [`backStageMenu`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container#backStageMenu) API to add a backstage menu. When the backstage menu is enabled, the default File menu items are automatically hidden.
+The Document Editor provides a [`backStageMenu`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container#backStageMenu) API to add a backstage menu. When the backstage menu is enabled, the default File menu items are automatically hidden.
 
 The following code example shows how to add the backstage menu items.
 
@@ -111,9 +111,9 @@ The following code example shows how to add the backstage menu items.
 
 <template>
 <div class="control-section">
-    <ejs-documenteditorcontainer ref="doceditcontainer" :toolbarMode="'Ribbon'" 
-    :serviceUrl="hostUrl" :enableToolbar='true' height='600px' :fileMenuItems="fileMenuItems"
-    @fileMenuItemClick="fileMenuClick"></ejs-documenteditorcontainer>
+    <ejs-documenteditorcontainer ref="documenteditorcontainer" :toolbarMode="'Ribbon'" 
+    :serviceUrl="hostUrl" :enableToolbar='true' height='600px' :backstageMenu="backstageMenu"
+    @backstageItemClick="handleBackstageItemClick"></ejs-documenteditorcontainer>
 </div>
 </template>
 <script setup>
@@ -131,11 +131,11 @@ const backstageMenu = {
 };
 function handleBackstageItemClick(args) {
   if (args.item) {
-    doceditcontainer.value.ej2Instances.documentEditor.openBlank();
+    documenteditorcontainer.value.ej2Instances.documentEditor.openBlank();
   }
 }
 onMounted(() => {
-  const editorInstance = doceditcontainer.value?.ej2Instances?.documentEditor;
+  const editorInstance = documenteditorcontainer.value?.ej2Instances?.documentEditor;
 });
 </script>
 
@@ -183,7 +183,7 @@ export default {
 {% endhighlight %}
 {% endtabs %}
 
-Refer this documentation know more about [`backstage items`](https://ej2.syncfusion.com/documentation/ribbon/backstage)
+Refer to this documentation to know more about [`backstage items`](https://ej2.syncfusion.com/documentation/ribbon/backstage).
 
 ## Tab Customization
 
@@ -191,9 +191,9 @@ You can customize the ribbon tabs in the Document Editor by showing, hiding, or
 
 ### Show/Hide Tab
 
-Document editor provides the [`showTab`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container/ribbon#showtab) API to show and hide the existing tab using existing `RibbonTabType` and `tabId`.
+The Document Editor provides the [`showTab`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container/ribbon#showtab) API to show and hide the existing tab using the existing `RibbonTabType` and `tabId`.
 
-The following code example how to show/hide existing tab using existing tab type and tab id.
+The following code example illustrates how to show/hide an existing tab using the existing tab type and tab id.
 
 ```ts
 // To hide the Home tab using the built-in `RibbonTabType`
@@ -212,7 +212,7 @@ The Document Editor provides the [`addTab`](https://ej2.syncfusion.com/vue/docum
 
 <template>
 <div class="control-section">
-    <ejs-documenteditorcontainer ref="doceditcontainer" :toolbarMode="'Ribbon'" 
+    <ejs-documenteditorcontainer ref="documenteditorcontainer" :toolbarMode="'Ribbon'" 
     :serviceUrl="hostUrl" :enableToolbar='true' height='600px'></ejs-documenteditorcontainer>
 </div>
 </template>
@@ -225,8 +225,8 @@ const documenteditorcontainer = ref(null);
 provide('DocumentEditorContainer', [Toolbar, Ribbon]);
 
 onMounted(() => {
-    const container = doceditcontainer.value?.ej2Instances;
-    // To add the tab at end of tab
+    const container = documenteditorcontainer.value?.ej2Instances;
+    // To add the tab at the end of the tabs
     const ribbonTab = {
       header: 'Custom Tab',
       id: 'custom_tab',
@@ -248,7 +248,7 @@ onMounted(() => {
     };
     container.ribbon.addTab(ribbonTab);
 
-    // To add the tab before the Insert tab(exising tab)
+    // To add the tab before the Insert tab (existing tab)
     container.ribbon.addTab(ribbonTab, 'Insert');
 });
 </script>
@@ -276,7 +276,7 @@ export default {
   mounted() {
     const container = this.$refs.doceditcontainer.ej2Instances;
 
-    // To add the tab at end of tab
+    // To add the tab at the end of the tabs
     const ribbonTab = {
       header: 'Custom Tab',
       id: 'custom_tab',
@@ -298,7 +298,7 @@ export default {
     };
     container.ribbon.addTab(ribbonTab);
 
-    // To add the tab before the Insert tab(exising tab)
+    // To add the tab before the Insert tab (existing tab)
     container.ribbon.addTab(ribbonTab, 'Insert');
   }
 };
@@ -314,19 +314,19 @@ You can also customize ribbon groups within a tab to better organize commands or
 
 ### Show/Hide Group 
 
-Document Editor provides an [`showGroup`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container/ribbon#showgroup) API to show or hide existing groups within a ribbon tab.
+The Document Editor provides a [`showGroup`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container/ribbon#showgroup) API to show or hide existing groups within a ribbon tab.
 
-The following code example show how to show/hide the group using group Id or [`RibbonGroupInfo`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container#ribbongroupinfo).
+The following code example shows how to show/hide the group using the group id or [`RibbonGroupInfo`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container#ribbongroupinfo).
 
 ```ts
 
-// To hide the clipboard group using group index
+// To hide the clipboard group using the group index
 this.$refs.doceditcontainer.ej2Instances.ribbon.showGroup({tabId: 'Home', index: 1} , false);
 
-// To show the clipboard group using group index
+// To show the clipboard group using the group index
 this.$refs.doceditcontainer.ej2Instances.ribbon.showGroup({tabId: 'Home', index: 1} , true);
 
-// To hide the group using id
+// To hide the group using its id
 this.$refs.doceditcontainer.ej2Instances.ribbon.showGroup('custom_group', false);
 
 ```
@@ -340,7 +340,7 @@ To extend the ribbon's functionality, you can add custom groups to any tab. This
 
 <template>
 <div class="control-section">
-    <ejs-documenteditorcontainer ref="doceditcontainer" :toolbarMode="'Ribbon'" 
+    <ejs-documenteditorcontainer ref="documenteditorcontainer" :toolbarMode="'Ribbon'" 
     :serviceUrl="hostUrl" :enableToolbar='true' height='600px'></ejs-documenteditorcontainer>
 </div>
 </template>
@@ -352,7 +352,7 @@ const documenteditorcontainer = ref(null);
 provide('DocumentEditorContainer', [Toolbar, Ribbon]);
 
 onMounted(() => {
-    const container = doceditcontainer.value?.ej2Instances;
+    const container = documenteditorcontainer.value?.ej2Instances;
     // Add the new group at the end of the Home tab
     const ribbonGroup = {
       header: 'Custom Group',
@@ -442,33 +442,33 @@ You can customize individual items within ribbon groups. This includes showing,
 
 ### Show/Hide Item
 
-Using [`showItems`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container/ribbon#showitems) API in Document editor ribbon to enable/disable the existing item. Here, you can specify the item Id or [`RibbonItemInfo`].
+Using the [`showItems`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container/ribbon#showitems) API in the Document Editor ribbon to show/hide the existing item. Here, you can specify the item id or [`RibbonItemInfo`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container#ribboniteminfo).
 
-The following code example show how to show/hide the item using item Id or [`RibbonItemInfo`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container#ribboniteminfo).
+The following code example shows how to show/hide the item using the item id or [`RibbonItemInfo`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container#ribboniteminfo).
 
 ```ts
-// To hide the Bold and Italic items using ribbon item information
+// To hide the Bold and Italic items using the ribbon item information
 this.$refs.doceditcontainer.ej2Instances.ribbon.showItems({ tabId: 'Home', groupIndex: 2, itemIndexes: [5, 6] } , false);
 
-// To show the Bold and Italic items using ribbon item information
+// To show the Bold and Italic items using the ribbon item information
 this.$refs.doceditcontainer.ej2Instances.ribbon.showItems({ tabId: 'Home', groupIndex: 2, itemIndexes: [5, 6] } , true);
 
-// To hide the item using item id
+// To hide the item using the item id
 this.$refs.doceditcontainer.ej2Instances.ribbon.showItems('custom_item', false);
 ```
 
 ### Enable/Disable Item
 
-Using [`enableItems`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container/ribbon#enableitems) API in Document editor ribbon to enable/disable the existing item.
+Using the [`enableItems`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container/ribbon#enableitems) API in the Document Editor ribbon to enable/disable the existing item.
 
 ```ts
-// To disable the underline using ribbon item info
+// To disable the underline using the ribbon item info
 this.$refs.doceditcontainer.ej2Instances.ribbon.enableItems({ tabId: 'Home', groupIndex: 2, itemIndexes: [7] },false);
 
-// To enable the underline using ribbon item info
+// To enable the underline using the ribbon item info
 this.$refs.doceditcontainer.ej2Instances.ribbon.enableItems({ tabId: 'Home', groupIndex: 2, itemIndexes: [7] },true);
 
-// To disable the item using id
+// To disable the item using the id
 this.$refs.doceditcontainer.ej2Instances.ribbon.enableItems('custom_item', false);
 
 ```
@@ -482,7 +482,7 @@ You can use the [`addItem`](https://ej2.syncfusion.com/vue/documentation/api/doc
 
 <template>
 <div class="control-section">
-    <ejs-documenteditorcontainer ref="doceditcontainer" :toolbarMode="'Ribbon'" 
+    <ejs-documenteditorcontainer ref="documenteditorcontainer" :toolbarMode="'Ribbon'" 
     :serviceUrl="hostUrl" :enableToolbar='true' height='600px'></ejs-documenteditorcontainer>
 </div>
 </template>
@@ -494,7 +494,7 @@ const documenteditorcontainer = ref(null);
 provide('DocumentEditorContainer', [Toolbar, Ribbon]);
 
 onMounted(() => {
-    const container = doceditcontainer.value?.ej2Instances;
+    const container = documenteditorcontainer.value?.ej2Instances;
     // To add the item at the end of the specified group (the item will be added at the end of the Undo group)
     const ribbonItem = {
       type: 'Button',
diff --git a/Document-Processing/Word/Word-Processor/vue/how-to/customize-tool-bar.md b/Document-Processing/Word/Word-Processor/vue/how-to/customize-tool-bar.md
index 9ce756c93a..eb5036fe55 100644
--- a/Document-Processing/Word/Word-Processor/vue/how-to/customize-tool-bar.md
+++ b/Document-Processing/Word/Word-Processor/vue/how-to/customize-tool-bar.md
@@ -1,22 +1,22 @@
 ---
 layout: post
-title: Customize tool bar in Vue Document editor component | Syncfusion
-description: Learn here all about Customize tool bar in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more.
-control: Customize tool bar 
+title: Customize the toolbar in the Vue DOCX Editor component | Syncfusion
+description: Learn here all about how to customize the toolbar in the Syncfusion Vue Document Editor component of Syncfusion Essential JS 2 and more.
+control: Customize the toolbar
 platform: document-processing
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Customize tool bar in Vue Document editor component
+# Customize the toolbar in the Vue Document Editor component
 
-## How to customize existing toolbar in DocumentEditorContainer
+## How to customize the existing toolbar in DocumentEditorContainer
 
-[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) Container allows you to customize(add, show, hide, enable, and disable) existing items in a toolbar.
+[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) Container allows you to customize (add, show, hide, enable, and disable) the existing items in a toolbar.
 
-* Add - New items can defined by [`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/).
-* Show, Hide - Existing items can be shown or hidden using the [`toolbarItems`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container#toolbaritems) property. Pre-defined toolbar items are available with [`ToolbarItem`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/toolbarItem/).
-* Enable, Disable -  Toolbar items can be enabled or disable using [`enableItems`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container/toolbar#enableItems)
+* Add - New items can be defined by [`CustomToolbarItemModel`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/customToolbarItemModel) and included 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).
+* Show, Hide - Existing items can be shown or hidden using the [`toolbarItems`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container#toolbaritems) property. Pre-defined toolbar items are available with [`ToolbarItem`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/toolbarItem).
+* Enable, Disable - Toolbar items can be enabled or disabled using the [`enableItems`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container/toolbar#enableItems) API.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -37,7 +37,7 @@ const onWrapText = function (text) {
   let content = '';
     const index = text.lastIndexOf(' ');
     if (index !== -1) {
-        content = text.slice(0, index) + "<div class='e-de-text-wrap'>" + text.slice(index + 1) + "<div>";
+        content = text.slice(0, index) + "<div class='e-de-text-wrap'>" + text.slice(index + 1) + "</div>";
     } else {
         content = text;
     }
@@ -58,7 +58,7 @@ provide('DocumentEditorContainer', [Toolbar]);
 const onToolbarClick = function (args) {
   switch (args.item.id) {
     case 'Custom':
-      //Disable image toolbar item.
+      //Disable the image toolbar item.
       container.value.ej2Instances.toolbar.enableItems(4, false);
       break;
   }
@@ -102,7 +102,7 @@ export default {
     onToolbarClick: function (args) {
       switch (args.item.id) {
         case 'Custom':
-          //Disable image toolbar item.
+          //Disable the image toolbar item.
           this.$refs.container.ej2Instances.toolbar.enableItems(4, false);
           break;
       }
@@ -168,7 +168,7 @@ 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']`.
 
 ## Online Demo