From f4331ae6db5d49bfa2d03cabf47c4c459e6996fd Mon Sep 17 00:00:00 2001
From: VijayalakshmiGSF4561 <vijayalakshmi.govindan@syncfusion.com>
Date: Fri, 31 Jul 2026 11:52:48 +0530
Subject: [PATCH 1/2] 1043990: Updated 5 files in Vue DOCX editor

---
 .../Word/Word-Processor/vue/feature-module.md |  70 ++--
 .../Word/Word-Processor/vue/fields.md         |  36 +-
 .../Word-Processor/vue/find-and-replace.md    | 364 ++++++++++--------
 .../Word/Word-Processor/vue/form-fields.md    | 173 ++++-----
 .../Word/Word-Processor/vue/global-local.md   |  14 +-
 5 files changed, 335 insertions(+), 322 deletions(-)

diff --git a/Document-Processing/Word/Word-Processor/vue/feature-module.md b/Document-Processing/Word/Word-Processor/vue/feature-module.md
index 9301c04bda..d5ac5f2fda 100644
--- a/Document-Processing/Word/Word-Processor/vue/feature-module.md
+++ b/Document-Processing/Word/Word-Processor/vue/feature-module.md
@@ -1,23 +1,23 @@
 ---
 layout: post
-title: Feature module in Vue Document editor component | Syncfusion
-description: Learn here all about Feature module in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more.
+title: Feature module in React DOCX Editor component | Syncfusion
+description: Learn here all about Feature module in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more.
 control: Feature module 
 platform: document-processing
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Feature module in Vue Document editor component
+# Feature module in React Document Editor component
 
-[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) features are segregated into individual feature-wise modules to enable selective referencing. By default, the Document Editor displays the document in read-only mode. The required modules should be injected to extend its functionality. The following are the selective modules of Document Editor that can be included as required:
+[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) features are segregated into individual feature-wise modules to enable selective referencing. By default, the Document Editor displays the document in read-only mode. The required modules should be injected to extend its functionality. The following are the selective modules of Document Editor that can be included as required:
 * **Print** - Prints the document.
-* **SfdtExport** - Exports the document as Vue Document Text (.SFDT) file.
-* **Selection** - Selects a portion of the document and copy it to the clipboard.
-* **Search** - Searches specific text and navigate between the results.
+* **SfdtExport** - Exports the document as Syncfusion Document Text (.SFDT) file.
+* **Selection** - Selects a portion of the document and copies it to the clipboard.
+* **Search** - Searches specific text and navigates between the results.
 * **WordExport** - Exports the document as Word Document (.DOCX) file.
 * **TextExport** - Exports the document as Text Document (.TXT) file.
-* **Editor** - Performs all kind of editing operations.
+* **Editor** - Performs all kinds of editing operations.
 * **EditorHistory** - Maintains the history of editing operations so that you can perform undo and redo at any time.
 * User interface options such as context menu, options pane, image resizer, and dialog are available as individual modules.
 
@@ -26,32 +26,30 @@ Refer to the following table.
 
 | Module | Dependent modules to be injected for extending the functionality of Document Editor in your application | Property to enable the functionality for a Document Editor instance |
 |---|---|---|
-|Print|`Print`|`<ejs-documenteditor :enablePrint='true'></ejs-documenteditor>`|
-|SfdtExport|`SfdtExport`|`<ejs-documenteditor :enableSfdtExport='true'></ejs-documenteditor>`|
-|Selection|`Selection`|`<ejs-documenteditor :enableSelection='true'></ejs-documenteditor>`|
-|Search|`Selection, Search`|`<ejs-documenteditor :enableSearch='true'></ejs-documenteditor>`|
-|WordExport|`SfdtExport, WordExport`|`<ejs-documenteditor :enableWordExport='true'></ejs-documenteditor>`|
-|TextExport|`SfdtExport, TextExport`|`<ejs-documenteditor :enableTextExport='true'></ejs-documenteditor>`|
-|Editor|`Selection, Editor`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true'></ejs-documenteditor>`|
-|EditorHistory|`Selection, Editor, EditorHistory`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableEditorHistory='true'></ejs-documenteditor>`|
-|OptionsPane(Find)|`Selection, Search, OptionsPane`|`<ejs-documenteditor :enableSearch='true' :enableOptionsPane='true'></ejs-documenteditor>`|
-|OptionsPane(Find and Replace)|`Selection, Search, Editor, OptionsPane`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableSearch='true' :enableOptionsPane='true'></ejs-documenteditor>`|
-|ContextMenu|`Selection, ContextMenu`|`<ejs-documenteditor :enableSelection='true' :enableContextMenu='true'></ejs-documenteditor>`|
-|ImageResizer|`Selection, Editor, ImageResizer`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableImageResizer='true'></ejs-documenteditor>`|
-|HyperlinkDialog|`Selection, Editor, HyperlinkDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableHyperlinkDialog='true'></ejs-documenteditor>`|
-|TableDialog|`Selection, Editor, TableDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableTableDialog='true'></ejs-documenteditor>`|
-|FontDialog|`Selection, Editor, FontDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableFontDialog='true'></ejs-documenteditor>`|
-|ParagraphDialog|`Selection, Editor, ParagraphDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableParagraphDialog='true'></ejs-documenteditor>`|
-|BookmarkDialog|`Selection, Editor, BookmarkDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableBookmarkDialog='true'></ejs-documenteditor>`|
-|PageSetupDialog|`Selection, Editor, PageSetupDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enablePageSetupDialog='true'></ejs-documenteditor>`|
-|TableOfContentsDialog|`Selection, Editor, TableOfContentsDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableTableOfContentsDialog='true'></ejs-documenteditor>`|
-|ListDialog|`Selection, Editor, ListDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableListDialog='true'></ejs-documenteditor>`|
-|TablePropertiesDialog|`Selection, Editor, TablePropertiesDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableTablePropertiesDialog='true'></ejs-documenteditor>`|
-|CellOptionsDialog|`Selection, Editor, CellOptionsDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableTablePropertiesDialog='true'></ejs-documenteditor>`|
-|BordersAndShadingDialog|`Selection, Editor, BordersAndShadingDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableBordersAndShadingDialog='true'></ejs-documenteditor>`|
-|TableOptionsDialog|`Selection, Editor, TableOptionsDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableTableOptionsDialog='true'></ejs-documenteditor>`|
-|StylesDialog|`Selection, Editor, StylesDialog,StyleDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableStyleDialog='true' :enableStylesDialog='true'></ejs-documenteditor>`|
-|StyleDialog|`Selection, Editor, StyleDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableStyleDialog='true'></ejs-documenteditor>`|
-|BulletsAndNumberingDialog|`Selection, Editor, BulletsAndNumberingDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableStyleDialog='true'></ejs-documenteditor>`|
+|Print|`DocumentEditor.Inject(Print)`|`<DocumentEditorComponent enablePrint= {true} />`|
+|SfdtExport|`DocumentEditor.Inject(SfdtExport)`|`<DocumentEditorComponent enableSfdtExport= {true} />`|
+|Selection|`DocumentEditor.Inject(Selection)`|`<DocumentEditorComponent enableSelection= {true} />`|
+|Search|`DocumentEditor.Inject(Selection, Search)`|`<DocumentEditorComponent enableSearch= {true} />`|
+|WordExport|`DocumentEditor.Inject(SfdtExport, WordExport)`|`<DocumentEditorComponent enableWordExport= {true} />`|
+|TextExport|`DocumentEditor.Inject(SfdtExport, TextExport)`|`<DocumentEditorComponent enableTextExport= {true} />`|
+|Editor|`DocumentEditor.Inject(Selection, Editor)`|`<DocumentEditorComponent isReadOnly= {false} enableEditor= {true} />`|
+|EditorHistory|`DocumentEditor.Inject(Selection, Editor, EditorHistory)`|`<DocumentEditorComponent isReadOnly= {false} enableEditor= {true} enableEditorHistory= {true} />`|
+|OptionsPane(Find)|`DocumentEditor.Inject(Selection, Search, OptionsPane)`|`<DocumentEditorComponent enableSearch= {true} enableOptionsPane= {true} />`|
+|OptionsPane(Find and Replace)|`DocumentEditor.Inject(Selection, Search, Editor, OptionsPane)`|`<DocumentEditorComponent isReadOnly= {false} enableEditor= {true} enableSearch= {true} enableOptionsPane= {true} />`|
+|ContextMenu|`DocumentEditor.Inject(Selection, ContextMenu)`|`<DocumentEditorComponent enableSelection= {true} enableContextMenu= {true} />`|
+|ImageResizer|`DocumentEditor.Inject(Selection, Editor, ImageResizer)`|`<DocumentEditorComponent isReadOnly= {false} enableEditor= {true} enableImageResizer= {true} />`|
+|HyperlinkDialog|`DocumentEditor.Inject(Selection, Editor, HyperlinkDialog)`|`<DocumentEditorComponent isReadOnly= {false} enableEditor= {true} enableHyperlinkDialog= {true} />`|
+|TableDialog|`DocumentEditor.Inject(Selection, Editor, TableDialog)`|`<DocumentEditorComponent isReadOnly= {false} enableEditor= {true} enableTableDialog= {true} />`|
+|FontDialog|`DocumentEditor.Inject(Selection, Editor, FontDialog)`|`<DocumentEditorComponent isReadOnly= {false} enableEditor= {true} enableFontDialog= {true} />`|
+|ParagraphDialog|`DocumentEditor.Inject(Selection, Editor, ParagraphDialog)`|`<DocumentEditorComponent isReadOnly= {false} enableEditor= {true} enableParagraphDialog= {true} />`|
+|BookmarkDialog|`DocumentEditor.Inject(Selection, Editor, BookmarkDialog)`|`<DocumentEditorComponent isReadOnly= {false} enableEditor= {true} enableBookmarkDialog= {true} />`|
+|PageSetupDialog|`DocumentEditor.Inject(Selection, Editor, PageSetupDialog)`|`<DocumentEditorComponent isReadOnly= {false} enableEditor= {true} enablePageSetupDialog= {true} />`|
+|TableOfContentsDialog|`DocumentEditor.Inject(Selection, Editor, TableOfContentsDialog)`|`<DocumentEditorComponent isReadOnly= {false} enableEditor= {true} enableTableOfContentsDialog= {true} />`|
+|ListDialog|`DocumentEditor.Inject(Selection, Editor, ListDialog)`|`<DocumentEditorComponent isReadOnly= {false} enableEditor= {true} enableListDialog= {true} />`|
+|TablePropertiesDialog|`DocumentEditor.Inject(Selection, Editor, TablePropertiesDialog)`|`<DocumentEditorComponent isReadOnly= {false} enableEditor= {true} enableTablePropertiesDialog= {true} />`|
+|BordersAndShadingDialog|`DocumentEditor.Inject(Selection, Editor, BordersAndShadingDialog)`|`<DocumentEditorComponent isReadOnly= {false} enableEditor= {true} enableBordersAndShadingDialog= {true} />`|
+|TableOptionsDialog|`DocumentEditor.Inject(Selection, Editor, TableOptionsDialog)`|`<DocumentEditorComponent isReadOnly= {false} enableEditor= {true} enableTableOptionsDialog= {true} />`|
+|StylesDialog|`DocumentEditor.Inject(Selection, Editor, StylesDialog,StyleDialog)`|`<DocumentEditorComponent isReadOnly= {false} enableEditor= {true} enableStyleDialog= {true} enableStylesDialog= {true} />`|
+|StyleDialog|`DocumentEditor.Inject(Selection, Editor, StyleDialog)`|`<DocumentEditorComponent isReadOnly= {false} enableEditor= {true} enableStyleDialog= {true} />`|
 
-These modules should be injected into the `provide` section and use `DocumentEditor` as a key of the object.
\ No newline at end of file
+These modules should be injected into the documenteditor using the `Inject` directive.
\ No newline at end of file
diff --git a/Document-Processing/Word/Word-Processor/vue/fields.md b/Document-Processing/Word/Word-Processor/vue/fields.md
index cdfd4e9095..d95c5eb444 100644
--- a/Document-Processing/Word/Word-Processor/vue/fields.md
+++ b/Document-Processing/Word/Word-Processor/vue/fields.md
@@ -1,38 +1,38 @@
 ---
 layout: post
-title: Fields in Vue Document editor component | Syncfusion
-description: Learn here all about Fields in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more.
+title: Fields in React DOCX Editor component | Syncfusion
+description: Learn here all about Fields in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more.
 control: Fields 
 platform: document-processing
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Fields in Vue Document editor component
+# Fields in React Document Editor component
 
-[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) has preservation support for all types of fields in an existing word document without any data loss.
+[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) has preservation support for all types of fields in an existing word document without any data loss.
 
 ## Adding Fields
 
-You can add a field to the document by using [`insertField`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor#insertfield) method in [`Editor`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor/) module.
+You can add a field to the document by using [`insertField`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#insertfield) method in [`Editor`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor) module.
 
 The following example code illustrates how to insert merge field programmatically by providing the field code and field result.
 
 ```ts
 let fieldCode: string = 'MERGEFIELD  First Name  \\* MERGEFORMAT ';
 let fieldResult: string = '«First Name»';
-this.$refs.documenteditor.ej2Instances.editor.insertField(fieldCode, fieldResult);
+documenteditor.editor.insertField(fieldCode, fieldResult);
 ```
 
->Note: Document editor does not validate/process the field code/field result. it simply inserts the field with specified field information.
+N> Document Editor does not validate/process the field code/field result. It simply inserts the field with specified field information.
 
 ## Update fields
 
-Document Editor provides support for updating bookmark cross reference field. The following example code illustrates how to update bookmark cross reference field.
+Document Editor provides support for updating bookmark cross reference fields. The following example code illustrates how to update bookmark cross reference fields.
 
 ```ts
-//Update all the bookmark cross reference field in the document.
-this.$refs.documenteditor.ej2Instances.updateFields();
+//Update all the bookmark cross reference fields in the document.
+documenteditor.updateFields();
 ```
 
 Bookmark cross reference fields can be updated through UI by using update fields option in `Toolbar`.
@@ -47,22 +47,22 @@ The following type of fields are automatically updated in Document Editor.
 
 ## Get field info
 
-You can get field code and field result of the current selected field by using [`getFieldInfo`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/selection#getfieldinfo) method in the [`Selection`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/selection/) module.
+You can get field code and field result of the current selected field by using [`getFieldInfo`](https://ej2.syncfusion.com/react/documentation/api/document-editor/selection#getfieldinfo) method in the [`Selection`](https://ej2.syncfusion.com/react/documentation/api/document-editor/selection) module.
 
 ```ts
 //Gets the field information of the selected field.
-let fieldInfo: FieldInfo = this.$refs.documenteditor.ej2Instances.selection.getFieldInfo();
+let fieldInfo: FieldInfo = documenteditor.selection.getFieldInfo();
 ```
 
->Note: For nested fields, this method returns combined field code and result.
+N> For nested fields, this method returns combined field code and result.
 
 ## Set field info
 
-You can modify the field code and field result of the current selected field by using [`setFieldInfo`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor#setfieldinfo) method in the [`Editor`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor/) module.
+You can modify the field code and field result of the current selected field by using [`setFieldInfo`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#setfieldinfo) method in the [`Editor`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor) module.
 
 ```ts
 //Gets the field information for the selected field.
-let fieldInfo: FieldInfo = this.$refs.documenteditor.ej2Instances.selection.getFieldInfo();
+let fieldInfo: FieldInfo = documenteditor.selection.getFieldInfo();
 
 //Modify field code
 fieldInfo.code = 'MERGEFIELD  First Name  \\* MERGEFORMAT ';
@@ -71,12 +71,12 @@ fieldInfo.code = 'MERGEFIELD  First Name  \\* MERGEFORMAT ';
 fieldInfo.result = '«First Name»';
 
 //Modify field code and result of the current selected field.
-this.$refs.documenteditor.ej2Instances.editor.setFieldInfo(fieldInfo);
+documenteditor.editor.setFieldInfo(fieldInfo);
 ```
 
->Note: For nested field, entire field gets replaced completely with the specified field information.
+N> For nested field, entire field gets replaced completely with the specified field information.
 
 ## See Also
 
-[Mail merge using DocIO](https://help.syncfusion.com/file-formats/docio/working-with-mail-merge)
+[Mail merge using Word library (DocIO)](https://help.syncfusion.com/file-formats/docio/working-with-mail-merge)
 [Mail merge demo](https://github.com/SyncfusionExamples/EJ2-Document-Editor-Web-Services/blob/master/ASP.NET%20Core/src/Controllers/DocumentEditorController.cs#L114)
\ No newline at end of file
diff --git a/Document-Processing/Word/Word-Processor/vue/find-and-replace.md b/Document-Processing/Word/Word-Processor/vue/find-and-replace.md
index 1a77fa2566..83ae9b570b 100644
--- a/Document-Processing/Word/Word-Processor/vue/find-and-replace.md
+++ b/Document-Processing/Word/Word-Processor/vue/find-and-replace.md
@@ -1,200 +1,154 @@
 ---
 layout: post
-title: Find and replace in Vue Document editor component | Syncfusion
-description: Learn here all about Find and replace in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more.
+title: Find and replace in React DOCX Editor component | Syncfusion
+description: Learn here all about Find and replace in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more.
 control: Find and replace 
 platform: document-processing
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Find and replace in Vue Document editor component
+# Find and replace in React Document Editor component
 
-The [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) component searches a portion of text in the document through a built-in interface called `OptionsPane` or rich APIs. When used in combination with selection performs various operations on the search results like replacing it with some other text, highlighting it, making it bolder, and more.
+The [React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) component searches a portion of text in the document through a built-in interface called `OptionsPane` or rich APIs. When used in combination with selection, it performs various operations on the search results like replacing it with some other text, highlighting it, making it bolder, and more.
 
 ## Options pane
 
-This provides the options to search for a portion of text in the document. After search operation is completed, the search results will be displayed in a list and options to navigate between them. The current occurrence of matched text or all occurrences with another text can be replaced by switching to `Replace` tab. This pane is opened using the keyboard shortcut `CTRL+F`. You can also open it programmatically using the following sample code.
+This provides the options to search for a portion of text in the document. After search operation is completed, the search results will be displayed in a list and options to navigate between them. The current occurrence of matched text or all occurrences can be replaced with another text by switching to `Replace` tab. This pane is opened using the keyboard shortcut `CTRL+F`. You can also open it programmatically using the following sample code.
 
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-<template>
-  <div id="app" height="350px">
-    <div>
-      <button v-on:click='showOptionsPane'>Save</button>
-    </div>
-    <ejs-documenteditor ref="documenteditor" :enableEditor='true' :enableSearch='true' :enableOptionsPane='true'
-      :isReadOnly='false' height="370px" style="width: 100%;"></ejs-documenteditor>
-  </div>
-</template>
-<script setup>
-import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, Search, OptionsPane } from '@syncfusion/ej2-vue-documenteditor';
-import { onMounted, provide, ref } from 'vue';
-
-const documenteditor = ref(null);
-provide('DocumentEditor', [Selection, Editor, Search, OptionsPane]);
-
-const showOptionsPane = function () {
-  //Open options pane.
-  documenteditor.value.showOptionsPane();
-}
+```ts
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import {
+  DocumentEditorComponent,
+  SfdtExport,
+  Selection,
+  Editor,
+  OptionsPane,
+} from '@syncfusion/ej2-react-documenteditor';
+
+//Inject require module.
+DocumentEditorComponent.Inject(SfdtExport, Selection, Editor, OptionsPane);
+function App() {
+  let documenteditor;
+  React.useEffect(() => {
+    ComponentDidMount();
+  }, []);
+  function ComponentDidMount() {
+    let sfdt = `{
+            "sections": [
+                {
+                    "blocks": [
+                        {
+                            "inlines": [
+                                {
+                                    "characterFormat": {
+                                        "bold": true,
+                                        "italic": true
+                                    },
+                                    "text": "Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is located in Bothell, Washington with 290 employees, several regional sales teams are located throughout their market base."
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }`;
+    //Open the document in Document Editor.
+    documenteditor.open(sfdt);
+  }
 
-onMounted(function () {
-  let sfdt = `{
-              "sections": [
-                  {
-                      "blocks": [
-                          {
-                              "inlines": [
-                                  {
-                                      "characterFormat": {
-                                          "bold": true,
-                                          "italic": true
-                                      },
-                                      "text": "Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is located in Bothell, Washington with 290 employees, several regional sales teams are located throughout their market base."
-                                  }
-                              ]
-                          }
-                      ]
-                  }
-              ]
-          }`;
-  documenteditor.value.open(sfdt);
-})
-</script>
-<style>
-@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
-</style>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-<template>
-  <div id="app" height="350px">
+  function ShowHideOptionsPane() {
+    //Open options pane.
+    documenteditor.showOptionsPane();
+  }
+  return (
     <div>
-      <button v-on:click='showOptionsPane'>Save</button>
+      <button onClick={ShowHideOptionsPane}>OptionsPane</button>
+      <DocumentEditorComponent
+        id="container"
+        height={'330px'}
+        ref={(scope) => {
+          documenteditor = scope;
+        }}
+        isReadOnly={false}
+        enableSelection={true}
+        enableEditor={true}
+        enableSearch={true}
+        enableOptionsPane={true}
+      />
     </div>
-    <ejs-documenteditor ref="documenteditor" :enableEditor='true' :enableSearch='true' :enableOptionsPane='true'
-      :isReadOnly='false' height="370px" style="width: 100%;"></ejs-documenteditor>
-  </div>
-</template>
-<script>
-import { DocumentEditorComponent, Selection, Editor, Search, OptionsPane } from '@syncfusion/ej2-vue-documenteditor';
-
-export default {
-  components: {
-    'ejs-documenteditor': DocumentEditorComponent
-  },
-  data: function () {
-    return {
-    };
-  },
-  provide: {
-    //Inject require modules.
-    DocumentEditor: [Selection, Editor, Search, OptionsPane]
-  },
-  methods: {
-    showOptionsPane: function () {
-      //Open options pane.
-      this.$refs.documenteditor.showOptionsPane();
-    }
-  },
-  mounted() {
-    let sfdt = `{
-              "sections": [
-                  {
-                      "blocks": [
-                          {
-                              "inlines": [
-                                  {
-                                      "characterFormat": {
-                                          "bold": true,
-                                          "italic": true
-                                      },
-                                      "text": "Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is located in Bothell, Washington with 290 employees, several regional sales teams are located throughout their market base."
-                                  }
-                              ]
-                          }
-                      ]
-                  }
-              ]
-          }`;
-    this.$refs.documenteditor.open(sfdt);
-  }
+  );
 }
-</script>
-<style>
-@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
-</style>
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
 
-{% endhighlight %}
-{% endtabs %}
+```
 
 You can close the options pane by pressing `Esc` key.
 
 ## Search
 
-The [`Search`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/search/) module of Document Editor exposes the following APIs:
+The [`Search`](https://ej2.syncfusion.com/react/documentation/api/document-editor/search) module of Document Editor exposes the following APIs:
 
 |API Name|Type |Description|
 |---|---|---|
-|[`findAll()`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/search#findall)| Method |Searches for specified text in the whole document and highlights it with yellow.|
-|[`searchResults`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/search#searchresults) |Property |This is an instance of [`SearchResults`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/searchResults/).|
-|[`find()`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/search#find) | Method |Find immediate occurrence of specified text from cursor position in the document and highlights it with yellow.|
+|[`findAll()`](https://ej2.syncfusion.com/react/documentation/api/document-editor/search#findall)| Method |Searches for specified text in the whole document and highlights it with yellow.|
+|[`searchResults`](https://ej2.syncfusion.com/react/documentation/api/document-editor/search#searchresults) |Property |This is an instance of [`SearchResults`](https://ej2.syncfusion.com/react/documentation/api/document-editor/searchresults).|
+|[`find()`](https://ej2.syncfusion.com/react/documentation/api/document-editor/search#find) | Method |Find immediate occurrence of specified text from cursor position in the document and highlights it with yellow.|
 
 ### Find the immediate occurrence in the document
 
-Using [`find()`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/search#find) method, you can find the immediate occurrence of specified text from current cursor position in the document.
+Using [`find()`](https://ej2.syncfusion.com/react/documentation/api/document-editor/search#find) method, you can find the immediate occurrence of specified text from current cursor position in the document.
 
-The following example code illustrates how to use find in Document editor.
+The following example code illustrates how to use find in Document Editor.
 
 ```ts
-this.$refs.documenteditor.ej2instances.search.find('Some text', 'None');
+documenteditor.search.find('Some text', 'None');
 ```
 
->Note: Second parameter is optional parameter and it denotes find Options. Possible values of find options are `'None' |'WholeWord' |'CaseSensitive'| 'CaseSensitiveWholeWord'`.
+N> Second parameter is optional parameter and it denotes find Options. Possible values of find options are `'None' |'WholeWord' |'CaseSensitive'| 'CaseSensitiveWholeWord'`.
 
 ### Find all the occurrences in the document
 
-Using [`findAll()`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/search#findall) method, you can find all the occurrences of specified text in the whole document and highlight it with yellow.
+Using [`findAll()`](https://ej2.syncfusion.com/react/documentation/api/document-editor/search#findall) method, you can find all the occurrences of specified text in the whole document and highlight it with yellow.
 
-The following example code illustrates how to find All the text in the document.
+The following example code illustrates how to find all the text in the document.
 
 ```ts
-this.$refs.documenteditor.ej2instances.search.findAll('Some text', 'None');
+documenteditor.search.findAll('Some text', 'None');
 ```
 
->Note: Second parameter is optional parameter and it denotes find Options. Possible values of find options are `'None' |'WholeWord' |'CaseSensitive'| 'CaseSensitiveWholeWord'`.
+N> Second parameter is optional parameter and it denotes find Options. Possible values of find options are `'None' |'WholeWord' |'CaseSensitive'| 'CaseSensitiveWholeWord'`.
 
 ## Search results
 
-The [`SearchResults`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/searchResults/) class provides information about the search results after a search operation is completed that can be identified using the [`searchResultsChange`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#searchresultschange) event. This will expose the following APIs:
+The [`SearchResults`](https://ej2.syncfusion.com/react/documentation/api/document-editor/searchResults) class provides information about the search results after a search operation is completed that can be identified using the [`searchResultsChange`](https://ej2.syncfusion.com/react/documentation/api/document-editor#searchresultschange) event. This will expose the following APIs:
 
 |API Name|Type |Description|
 |---|---|---|
-|[`length`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/searchResults#length)|Property|Returns the total number of results found on the search.|
-|[`index`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/searchResults#index)|Property|Returns the index of selected search result. You can change the value for this property to move the selection.|
-|[`replaceAll()`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/searchResults#replaceall)|Method|Replaces all the occurrences with specified text.|
-|[`clear()`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/searchResults#clear)|Method|Clears the search result.|
+|[`length`](https://ej2.syncfusion.com/react/documentation/api/document-editor/searchResults#length)|Property|Returns the total number of results found on the search.|
+|[`index`](https://ej2.syncfusion.com/react/documentation/api/document-editor/searchResults#index)|Property|Returns the index of selected search result. You can change the value for this property to move the selection.|
+|[`replaceAll()`](https://ej2.syncfusion.com/react/documentation/api/document-editor/searchResults#replaceall)|Method|Replaces all the occurrences with specified text.|
+|[`clear()`](https://ej2.syncfusion.com/react/documentation/api/document-editor/searchresults#clear)|Method|Clears the search result.|
 
 ### Replace all the occurrences
 
-Using [`replaceAll`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/searchResults#replaceall), you can replace all the occurrences with specified text.
+Using [`replaceAll`](https://ej2.syncfusion.com/react/documentation/api/document-editor/searchResults#replaceall), you can replace all the occurrences with specified text.
 
-The following example code illustrates how to use replace All in Document editor.
+The following example code illustrates how to use Replace All in Document Editor.
 
 ```ts
-this.$refs.documentEditor.ej2Instances.search.findAll ('Some text');
+documentEditor.search.findAll ('Some text');
 // Replace all the searched text with word 'Mike'
-this.$refs.documentEditor.ej2Instances.search.searchResults.replaceAll("Mike");  
+documentEditor.search.searchResults.replaceAll("Mike");  
 ```
 
 ### Replace
 
-Using [`insertText`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor#inserttext), you can replace the current searched text with specified text and it replace single occurrence.
+Using [`insertText`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#inserttext), you can replace the current searched text with specified text and it replaces a single occurrence.
 
->Note: This [`insertText`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor#inserttext) API accepts following control characters
+N> This [`insertText`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#inserttext) API accepts following control characters
 >* New line characters ("\r", "\r\n", "\n") - Inserts a new paragraph and appends the remaining text to the new paragraph.
 >* Line break character ("\v") - Moves the remaining text to start in new line.
 >* Tab character ("\t") - Allocates a tab space and continue the next character.
@@ -202,47 +156,129 @@ Using [`insertText`](https://ej2.syncfusion.com/vue/documentation/api/document-e
 The following example code illustrates how to find a text in the document and replace each occurrence of the text one by one programmatically.
 
 ```ts
-this.$refs.container.ej2instances.documentEditor.search.findAll('works');
+documentEditor.search.findAll('works');
 
-let searchLength: number = container.documentEditor.search.searchResults.length;
+let searchLength: number = documentEditor.search.searchResults.length;
 
 for (let i = searchLength - 1; i >= 0; i--) {
   // It will move selection to specific searched index,move to each occurrence one by one
-  this.$refs.container.ej2instances.documentEditor.search.searchResults.index = i;
+  documentEditor.search.searchResults.index = i;
   // Replace it with some text
-  this.$refs.container.ej2instances.documentEditor.editor.insertText('Hello');
+  documentEditor.editor.insertText('Hello');
 }
 
-this.$refs.container.ej2Instances.documentEditor.search.searchResults.clear();
+container.documentEditor.search.searchResults.clear();
 ```
 
-## SearchResultsChange event
-
-[`DocumentEditor`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/) exposes the [`searchResultsChange`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#searchresultschange)event that will be triggered whenever search results are changed. Consider the following scenarios:
+## Customize find and replace
 
-* A search operation is completed with some results.
-* The results are replaced with some other text, since it will be cleared automatically.
-* The results are cleared explicitly.
+Using the exposed APIs, you can customize the find and replace functionality in your application. Refer to the following sample code.
 
-Refer to the following code example.
 
 ```ts
-documenteditor.searchResultsChange = function() {
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import {
+  DocumentEditorComponent,
+  SfdtExport,
+  Selection,
+  Editor,
+  Search,
+} from '@syncfusion/ej2-react-documenteditor';
+
+//Inject require module.
+DocumentEditorComponent.Inject(SfdtExport, Selection, Editor, Search);
+function App() {
+  let documenteditor;
+  React.useEffect(() => {
+    ComponentDidMount();
+  }, []);
+  function ComponentDidMount() {
+    let sfdt = `{
+            "sections": [
+                {
+                    "blocks": [
+                        {
+                            "inlines": [
+                                {
+                                    "characterFormat": {
+                                        "bold": true,
+                                        "italic": true
+                                    },
+                                    "text": "Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is located in Bothell, Washington with 290 employees, several regional sales teams are located throughout their market base."
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }`;
+    //Open the document in Document Editor.
+    documenteditor.open(sfdt);
+  }
 
-};
-```
+  function replaceAll() {
+    let textToFind = document.getElementById('find_text').value;
+    let textToReplace = document.getElementById('replace_text').value;
+    if (textToFind !== '') {
+      // Find all the occurences of given text
+      documenteditor.searchModule.findAll(textToFind);
+      if (documenteditor.searchModule.searchResults.length > 0) {
+        // Replace all the occurences of given text
+        documenteditor.searchModule.searchResults.replaceAll(textToReplace);
+      }
+    }
+  }
 
-## Customize find and replace
+  return (
+    <div>
+      <div>
+        <table>
+          <tr>
+            <td>
+              <label>Text to find:</label>
+            </td>
+            <td>
+              <input type="text" id="find_text" />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label>Text to replace:</label>
+            </td>
+            <td>
+              <input type="text" id="replace_text" />
+            </td>
+          </tr>
+          <tr>
+            <td colspan="2">
+              <button onClick={replaceAll}>Replace All</button>
+            </td>
+          </tr>
+        </table>
+      </div>
+
+      <DocumentEditorComponent
+        id="container"
+        height={'590px'}
+        ref={(scope) => {
+          documenteditor = scope;
+        }}
+        isReadOnly={false}
+        enableSelection={true}
+        enableEditor={true}
+        enableSearch={true}
+      />
+    </div>
+  );
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
 
-Using the exposed APIs, you can customize the find and replace functionality in your application. Refer to the following sample code.
 
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/document-editor/vue/replace-all-cs1/app-composition.vue %}
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/document-editor/vue/replace-all-cs1/app.vue %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "/document-processing/code-snippet/document-editor/vue/replace-all-cs1" %}
\ No newline at end of file
+```
+
+## See Also
+
+* [Options pane](./dialog#options-pane)
+* [Feature modules](./feature-module)
diff --git a/Document-Processing/Word/Word-Processor/vue/form-fields.md b/Document-Processing/Word/Word-Processor/vue/form-fields.md
index 9ae94ee2ab..29f161a1f6 100644
--- a/Document-Processing/Word/Word-Processor/vue/form-fields.md
+++ b/Document-Processing/Word/Word-Processor/vue/form-fields.md
@@ -1,198 +1,177 @@
 ---
 layout: post
-title: Form fields in Vue Document editor component | Syncfusion
-description: Learn here all about Form fields in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more.
+title: Form fields in React DOCX Editor component | Syncfusion
+description: Learn here all about Form fields in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more.
 control: Form fields 
 platform: document-processing
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Form fields in Vue Document editor component
+# Form fields in React Document Editor component
 
-[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) Container component provide support for inserting Text, CheckBox, DropDown form fields through in-built toolbar.
+[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) Container component provides support for inserting Text, CheckBox, DropDown form fields through in-built toolbar.
 
 ![Form Fields](images/toolbar-form-fields.png)
 
 ## Insert form field
 
-Form fields can be inserted using [`insertFormField`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor#insertformfield) method in editor module.
+Form fields can be inserted using [`insertFormField`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#insertformfield) method in editor module.
 
 ```ts
 //Insert Text form field
-this.$refs.documenteditor.ej2Instances.editor.insertFormField('Text');
+documentEditor.editor.insertFormField('Text');
 //Insert Checkbox form field
-this.$refs.documenteditor.ej2Instances.editor.insertFormField('CheckBox');
+documentEditor.editor.insertFormField('CheckBox');
 //Insert Drop down form field
-this.$refs.documenteditor.ej2Instances.editor.insertFormField('Dropdown');
+documentEditor.editor.insertFormField('DropDown');
 ```
 
 ## Get form field names
 
-All the form fields names form current document can be retrieved using [`getFormFieldNames()`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#getformfieldnames).
+All the form fields names from current document can be retrieved using [`getFormFieldNames()`](https://ej2.syncfusion.com/react/documentation/api/document-editor#getformfieldnames).
 
 ```ts
-this.$refs.documenteditor.ej2Instances.getFormFieldNames();
+let formFieldsNames: string[] = documentEditor.getFormFieldNames();
 ```
 
 ## Get form field properties
 
-Form field properties can be retrieved using [`getFormFieldInfo()`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#getformfieldinfo).
+Form field properties can be retrieved using [`getFormFieldInfo()`](https://ej2.syncfusion.com/react/documentation/api/document-editor#getformfieldinfo).
 
 ```ts
 //Text form field
-var textfieldInfo = this.$refs.documenteditor.ej2Instances.getFormFieldInfo('Text1');
+let textfieldInfo: TextFormFieldInfo = documentEditor.getFormFieldInfo('Text1') as TextFormFieldInfo;
 //Checkbox form field
-var checkboxfieldInfo = this.$refs.documenteditor.ej2Instances.getFormFieldInfo('Check1');
+let checkboxfieldInfo: CheckBoxFormFieldInfo = documentEditor.getFormFieldInfo('Check1') as CheckBoxFormFieldInfo;
 //Dropdown form field
-var dropdownfieldInfo = this.$refs.documenteditor.ej2Instances.getFormFieldInfo('Drop1');
+let dropdownfieldInfo: DropDownFormFieldInfo = documentEditor.getFormFieldInfo('Drop1') as DropDownFormFieldInfo;
 ```
 
 ## Set form field properties
 
-Form field properties can be modified using [`setFormFieldInfo`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#setformfieldinfo).
+Form field properties can be modified using [`setFormFieldInfo`](https://ej2.syncfusion.com/react/documentation/api/document-editor#setformfieldinfo).
 
 ```ts
 // Set text form field properties
-var textfieldInfo = this.$refs.documenteditor.ej2Instances.getFormFieldInfo('Text1');
+let textfieldInfo: TextFormFieldInfo = documentEditor.getFormFieldInfo('Text1') as TextFormFieldInfo;
 textfieldInfo.defaultValue = "Hello";
 textfieldInfo.format = "Uppercase";
 textfieldInfo.type = "Text";
 textfieldInfo.name = "Text2";
-this.$refs.documenteditor.ej2Instances.setFormFieldInfo('Text1',textfieldInfo);
+documentEditor.setFormFieldInfo('Text1',textfieldInfo);
 
 // Set checkbox form field properties
-var checkboxfieldInfo = this.$refs.documenteditor.ej2Instances.getFormFieldInfo('Check1');
+let checkboxfieldInfo: CheckBoxFormFieldInfo = documentEditor.getFormFieldInfo('Check1') as CheckBoxFormFieldInfo;
 checkboxfieldInfo.defaultValue = true;
 checkboxfieldInfo.name = "Check2";
-this.$refs.documenteditor.ej2Instances.setFormFieldInfo('Check1',checkboxfieldInfo);
+documentEditor.setFormFieldInfo('Check1',checkboxfieldInfo);
 
-// Set checkbox form field properties
-var dropdownfieldInfo = this.$refs.documenteditor.ej2Instances.getFormFieldInfo('Drop1');
-dropdownfieldInfo.dropDownItems = ['One','Two', 'Three'];
+// Set dropdown form field properties
+let dropdownfieldInfo: DropDownFormFieldInfo = documentEditor.getFormFieldInfo('Drop1') as DropDownFormFieldInfo;
+dropdownfieldInfo.dropdownItems = ['One','Two', 'Three'];
 dropdownfieldInfo.name = "Drop2";
-this.$refs.documenteditor.ej2Instances.setFormFieldInfo('Drop1',dropdownfieldInfo);
+documentEditor.setFormFieldInfo('Drop1',dropdownfieldInfo);
 ```
 
->Note:If a form field already exists in the document with the new name specified, the old form field name property will be cleared and it will not be accessible. Ensure the new name is unique.
+N> If a form field already exists in the document with the new name specified, the old form field name property will be cleared and it will not be accessible. Ensure the new name is unique.
 
 ## Form Field Shading
 
-You can customize form field shading at the application level using the [`formFieldSettings`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#formFieldSettings) property.
+You can customize form field shading at the application level using the [`formFieldSettings`](https://ej2.syncfusion.com/react/documentation/api/document-editor#formFieldSettings) property.
 
 The example code below demonstrates how to set a custom shading color and how to disable shading (by default, shading is enabled).
 
 ```ts
 // Set a custom shading color (for example, white) 
-this.$refs.doceditcontainer.ej2Instances.documentEditorSettings.formFieldSettings.shadingColor = '#ffffff';
+container.current.documentEditorSettings.formFieldSettings.shadingColor = '#ffffff';
 
 // Disable form field shading entirely 
-this.$refs.doceditcontainer.ej2Instances.documentEditorSettings.formFieldSettings.applyShading = false;
+container.current.documentEditorSettings.formFieldSettings.applyShading = false;
 ```
 
 N> This customization only affects the application UI and will not be preserved when exporting the document.
 
 ## Export form field data
 
-Data of the all the Form fields in the document can be exported using [`exportFormData`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#exportformdata).
+Data of the all the Form fields in the document can be exported using [`exportFormData`](https://ej2.syncfusion.com/react/documentation/api/document-editor#exportformdata).
 
 ```ts
-var formFieldDate = this.$refs.documenteditor.ej2Instances.exportFormData();
+let formFieldDate: FormFieldData[] = documentEditor.exportFormData();
 ```
 
 ## Import form field data
 
-Form fields can be initialized with data using [`importFormData`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#importformdata).
+Form fields can be prefilled with data using [`importFormData`](https://ej2.syncfusion.com/react/documentation/api/document-editor#importformdata).
 
 ```ts
-var textformField = {fieldName: 'Text1', value: 'Hello World'};
-var checkformField = {fieldName: 'Check1', value: true};
-var dropdownformField = {fieldName: 'Drop1', value: 1};
+let textformField: FormFieldData = {fieldName: 'Text1', value: 'Hello World'};
+let checkformField: FormFieldData = {fieldName: 'Check1', value: true};
+let dropdownformField: FormFieldData = {fieldName: 'Drop1', value: 1};
 //Import form field data
-this.$refs.documenteditor.ej2Instances.importFormData([textformField,checkformField,dropdownformField]);
+documentEditor.importFormData([textformField,checkformField,dropdownformField]);
 ```
 
 ## Reset form fields
 
-Reset all the form fields in current document to default value using [`resetFormFields`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#resetformfields).
+Reset all the form fields in current document to default value using [`resetFormFields`](https://ej2.syncfusion.com/react/documentation/api/document-editor#resetformfields).
 
 ```ts
-this.$refs.documenteditor.ej2Instances.resetFormFields();
+documentEditor.resetFormFields();
 ```
 
 ## Protect the document in form filling mode
 
 Document Editor provides support for protecting the document with `FormFieldsOnly` protection. In this protection, user can only fill form fields in the document.
 
-Document editor provides an option to protect and unprotect document using [`enforceProtection`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor#enforceprotection) and [`stopProtection`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor#stopprotection) API.
-
-The following example code illustrates how to enforce and stop protection in Document editor container.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-<template>
-  <div id="app">
-    <ejs-documenteditorcontainer ref='container' :serviceUrl='serviceUrl' height="590px" id='container'
-      :enableToolbar='true'></ejs-documenteditorcontainer>
-  </div>
-</template>
-<script setup>
-import { DocumentEditorContainerComponent as EjsDocumenteditorcontainer, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
-import { onMounted, provide, ref } from 'vue';
-
-const container = ref(null);
-const serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';
-
-provide('DocumentEditorContainer', [Toolbar])
-
-onMounted(function () {
-  //enforce protection
-  this.$refs.container.ej2Instances.documentEditor.editor.enforceProtection('123', 'FormFieldsOnly');
-  //stop the document protection
-  this.$refs.container.ej2Instances.documentEditor.editor.stopProtection('123');
-});
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-<template>
-  <div id="app">
-    <ejs-documenteditorcontainer ref='container' :serviceUrl='serviceUrl' height="590px" id='container'
-      :enableToolbar='true'></ejs-documenteditorcontainer>
-  </div>
-</template>
-<script>
-import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
-
-export default {
-  components: {
-    'ejs-documenteditorcontainer': DocumentEditorContainerComponent
-  },
-  data() {
-    return { serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/' };
-  },
-  provide: {
-    //Inject require modules.
-    DocumentEditorContainer: [Toolbar]
-  },
-  mounted() {
+Document Editor provides an option to protect and unprotect document using [`enforceProtection`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#enforceprotection) and [`stopProtection`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#stopprotection) API.
+
+The following example code illustrates how to enforce and stop protection in Document Editor container.
+
+```ts
+import { createRoot } from 'react-dom/client';
+import * as React from 'react';
+import {
+  DocumentEditorContainerComponent,
+  Toolbar,
+} from '@syncfusion/ej2-react-documenteditor';
+DocumentEditorContainerComponent.Inject(Toolbar);
+function App() {
+  let container = DocumentEditorContainerComponent;
+  function EnforceProtection() {
     //enforce protection
-    this.$refs.container.ej2Instances.documentEditor.editor.enforceProtection('123', 'FormFieldsOnly');
+    container.documentEditor.editor.enforceProtection('123', 'FormFieldsOnly');
+  }
+  function StopProtection() {
     //stop the document protection
-    this.$refs.container.ej2Instances.documentEditor.editor.stopProtection('123');
+    container.documentEditor.editor.stopProtection('123');
   }
+  return (
+    <div>
+      <button onClick={EnforceProtection}>EnforceProtection</button>
+      <button onClick={StopProtection}>StopProtection</button>
+      <DocumentEditorContainerComponent
+        id="container"
+        ref={(scope) => {
+          container = scope;
+        }}
+        height={'590px'}
+        serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/"
+        enableToolbar={true}
+      />
+    </div>
+  );
 }
-</script>
+export default App;
+createRoot(document.getElementById('sample')).render(<App />);
+
 
-{% 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.
 
->Note: In enforce Protection method, first parameter denotes password and second parameter denotes protection type. Possible values of protection type are `NoProtection |ReadOnly |FormFieldsOnly`. In stop protection method, parameter denotes the password.
+N> In enforce Protection method, first parameter denotes password and second parameter denotes protection type. Possible values of protection type are `NoProtection |ReadOnly |FormFieldsOnly |CommentsOnly`. In stop protection method, parameter denotes the password.
 
 ## Online Demo
 
-Explore how to insert and manage form fields in Word documents using the Vue Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/vue/#/tailwind3/document-editor/form-fields.html).
\ No newline at end of file
+Explore how to insert and manage form fields in Word documents using the React Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/react/#/tailwind3/document-editor/form-fields).
\ No newline at end of file
diff --git a/Document-Processing/Word/Word-Processor/vue/global-local.md b/Document-Processing/Word/Word-Processor/vue/global-local.md
index 14771a0dcc..a51d3187c9 100644
--- a/Document-Processing/Word/Word-Processor/vue/global-local.md
+++ b/Document-Processing/Word/Word-Processor/vue/global-local.md
@@ -1,20 +1,20 @@
 ---
 layout: post
-title: Global local in Vue Document editor component | Syncfusion
-description: Learn here all about Global local in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more.
+title: Global local in React DOCX Editor component | Syncfusion
+description: Learn here all about Global local in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more.
 control: Global local 
 platform: document-processing
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Global local in Vue Document editor component
+# Global local in React Document Editor component
 
 ## Localization
+<!-- todo -->
+The `Localization` library allows you to localize default text content of the Document Editor. The [React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) component has static text on some features (like find & replace, context-menu, dialogs) that can be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the locale value and translation object. Please refer to the sample link [RTL](https://document.syncfusion.com/demos/docx-editor/react/#/tailwind3/document-editor/right-to-left)
 
-The Localization library allows you to localize default text content of the Document Editor. The [Vue Document Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) component has static text on some features (like find & replace, context-menu, dialogs) that can be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the locale value and translation object. Please refer the sample link [RTL](https://ej2.syncfusion.com/vue/demos/document-editor/right-to-left/)
-
-Note: Please refer the [Locale](https://github.com/syncfusion/ej2-locale).
+N> Please refer to the [Locale](https://github.com/syncfusion/ej2-locale).
 
 ## Document Editor
 
@@ -262,7 +262,7 @@ Direction | Direction
 Table direction | Table direction
 Indent from right | Indent from right
 Contextual Spacing | Don't add space between the paragraphs of the same styles
-Password Mismatch | The password don't match
+Password Mismatch | The passwords don't match
 Restrict Editing | Restrict Editing
 Formatting restrictions | Formatting restrictions
 Allow formatting | Allow formatting

From 7f936ff0a01cee2fb97d3a9bf76a007a4dbf7e8e Mon Sep 17 00:00:00 2001
From: VijayalakshmiGSF4561 <vijayalakshmi.govindan@syncfusion.com>
Date: Fri, 31 Jul 2026 11:59:14 +0530
Subject: [PATCH 2/2] 1043990: Updated Vue DOCX Editor files

---
 .../Word/Word-Processor/vue/feature-module.md |  69 ++--
 .../Word/Word-Processor/vue/fields.md         |  42 +-
 .../Word-Processor/vue/find-and-replace.md    | 364 ++++++++----------
 .../Word/Word-Processor/vue/form-fields.md    | 177 +++++----
 .../Word/Word-Processor/vue/global-local.md   |  36 +-
 5 files changed, 337 insertions(+), 351 deletions(-)

diff --git a/Document-Processing/Word/Word-Processor/vue/feature-module.md b/Document-Processing/Word/Word-Processor/vue/feature-module.md
index d5ac5f2fda..fd353f4145 100644
--- a/Document-Processing/Word/Word-Processor/vue/feature-module.md
+++ b/Document-Processing/Word/Word-Processor/vue/feature-module.md
@@ -1,18 +1,18 @@
 ---
 layout: post
-title: Feature module in React DOCX Editor component | Syncfusion
-description: Learn here all about Feature module in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more.
+title: Feature module in Vue DOCX Editor component | Syncfusion
+description: Learn here all about Feature module in Syncfusion Vue DOCX Editor component of Syncfusion Essential JS 2 and more.
 control: Feature module 
 platform: document-processing
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Feature module in React Document Editor component
+# Feature module in Vue DOCX Editor component
 
-[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) features are segregated into individual feature-wise modules to enable selective referencing. By default, the Document Editor displays the document in read-only mode. The required modules should be injected to extend its functionality. The following are the selective modules of Document Editor that can be included as required:
+[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) features are segregated into individual feature modules to enable selective referencing. By default, the DOCX Editor displays the document in read-only mode. The required modules should be injected to extend its functionality. The following are the selective modules of DOCX Editor that can be included as required:
 * **Print** - Prints the document.
-* **SfdtExport** - Exports the document as Syncfusion Document Text (.SFDT) file.
+* **SfdtExport** - Exports the document as Vue Document Text (.SFDT) file.
 * **Selection** - Selects a portion of the document and copies it to the clipboard.
 * **Search** - Searches specific text and navigates between the results.
 * **WordExport** - Exports the document as Word Document (.DOCX) file.
@@ -21,35 +21,36 @@ domainurl: ##DomainURL##
 * **EditorHistory** - Maintains the history of editing operations so that you can perform undo and redo at any time.
 * User interface options such as context menu, options pane, image resizer, and dialog are available as individual modules.
 
->In addition to injecting the required modules in your application, enable corresponding properties to extend the functionality for a Document Editor instance.
-Refer to the following table.
+In addition to injecting the required modules in your application, enable corresponding properties to extend the functionality for a DOCX Editor instance. Refer to the following table.
 
-| Module | Dependent modules to be injected for extending the functionality of Document Editor in your application | Property to enable the functionality for a Document Editor instance |
+| Module | Dependent modules to be injected for extending the functionality of DOCX Editor in your application | Property to enable the functionality for a DOCX Editor instance |
 |---|---|---|
-|Print|`DocumentEditor.Inject(Print)`|`<DocumentEditorComponent enablePrint= {true} />`|
-|SfdtExport|`DocumentEditor.Inject(SfdtExport)`|`<DocumentEditorComponent enableSfdtExport= {true} />`|
-|Selection|`DocumentEditor.Inject(Selection)`|`<DocumentEditorComponent enableSelection= {true} />`|
-|Search|`DocumentEditor.Inject(Selection, Search)`|`<DocumentEditorComponent enableSearch= {true} />`|
-|WordExport|`DocumentEditor.Inject(SfdtExport, WordExport)`|`<DocumentEditorComponent enableWordExport= {true} />`|
-|TextExport|`DocumentEditor.Inject(SfdtExport, TextExport)`|`<DocumentEditorComponent enableTextExport= {true} />`|
-|Editor|`DocumentEditor.Inject(Selection, Editor)`|`<DocumentEditorComponent isReadOnly= {false} enableEditor= {true} />`|
-|EditorHistory|`DocumentEditor.Inject(Selection, Editor, EditorHistory)`|`<DocumentEditorComponent isReadOnly= {false} enableEditor= {true} enableEditorHistory= {true} />`|
-|OptionsPane(Find)|`DocumentEditor.Inject(Selection, Search, OptionsPane)`|`<DocumentEditorComponent enableSearch= {true} enableOptionsPane= {true} />`|
-|OptionsPane(Find and Replace)|`DocumentEditor.Inject(Selection, Search, Editor, OptionsPane)`|`<DocumentEditorComponent isReadOnly= {false} enableEditor= {true} enableSearch= {true} enableOptionsPane= {true} />`|
-|ContextMenu|`DocumentEditor.Inject(Selection, ContextMenu)`|`<DocumentEditorComponent enableSelection= {true} enableContextMenu= {true} />`|
-|ImageResizer|`DocumentEditor.Inject(Selection, Editor, ImageResizer)`|`<DocumentEditorComponent isReadOnly= {false} enableEditor= {true} enableImageResizer= {true} />`|
-|HyperlinkDialog|`DocumentEditor.Inject(Selection, Editor, HyperlinkDialog)`|`<DocumentEditorComponent isReadOnly= {false} enableEditor= {true} enableHyperlinkDialog= {true} />`|
-|TableDialog|`DocumentEditor.Inject(Selection, Editor, TableDialog)`|`<DocumentEditorComponent isReadOnly= {false} enableEditor= {true} enableTableDialog= {true} />`|
-|FontDialog|`DocumentEditor.Inject(Selection, Editor, FontDialog)`|`<DocumentEditorComponent isReadOnly= {false} enableEditor= {true} enableFontDialog= {true} />`|
-|ParagraphDialog|`DocumentEditor.Inject(Selection, Editor, ParagraphDialog)`|`<DocumentEditorComponent isReadOnly= {false} enableEditor= {true} enableParagraphDialog= {true} />`|
-|BookmarkDialog|`DocumentEditor.Inject(Selection, Editor, BookmarkDialog)`|`<DocumentEditorComponent isReadOnly= {false} enableEditor= {true} enableBookmarkDialog= {true} />`|
-|PageSetupDialog|`DocumentEditor.Inject(Selection, Editor, PageSetupDialog)`|`<DocumentEditorComponent isReadOnly= {false} enableEditor= {true} enablePageSetupDialog= {true} />`|
-|TableOfContentsDialog|`DocumentEditor.Inject(Selection, Editor, TableOfContentsDialog)`|`<DocumentEditorComponent isReadOnly= {false} enableEditor= {true} enableTableOfContentsDialog= {true} />`|
-|ListDialog|`DocumentEditor.Inject(Selection, Editor, ListDialog)`|`<DocumentEditorComponent isReadOnly= {false} enableEditor= {true} enableListDialog= {true} />`|
-|TablePropertiesDialog|`DocumentEditor.Inject(Selection, Editor, TablePropertiesDialog)`|`<DocumentEditorComponent isReadOnly= {false} enableEditor= {true} enableTablePropertiesDialog= {true} />`|
-|BordersAndShadingDialog|`DocumentEditor.Inject(Selection, Editor, BordersAndShadingDialog)`|`<DocumentEditorComponent isReadOnly= {false} enableEditor= {true} enableBordersAndShadingDialog= {true} />`|
-|TableOptionsDialog|`DocumentEditor.Inject(Selection, Editor, TableOptionsDialog)`|`<DocumentEditorComponent isReadOnly= {false} enableEditor= {true} enableTableOptionsDialog= {true} />`|
-|StylesDialog|`DocumentEditor.Inject(Selection, Editor, StylesDialog,StyleDialog)`|`<DocumentEditorComponent isReadOnly= {false} enableEditor= {true} enableStyleDialog= {true} enableStylesDialog= {true} />`|
-|StyleDialog|`DocumentEditor.Inject(Selection, Editor, StyleDialog)`|`<DocumentEditorComponent isReadOnly= {false} enableEditor= {true} enableStyleDialog= {true} />`|
+|Print|`Print`|`<ejs-documenteditor :enablePrint='true'></ejs-documenteditor>`|
+|SfdtExport|`SfdtExport`|`<ejs-documenteditor :enableSfdtExport='true'></ejs-documenteditor>`|
+|Selection|`Selection`|`<ejs-documenteditor :enableSelection='true'></ejs-documenteditor>`|
+|Search|`Selection, Search`|`<ejs-documenteditor :enableSearch='true'></ejs-documenteditor>`|
+|WordExport|`SfdtExport, WordExport`|`<ejs-documenteditor :enableWordExport='true'></ejs-documenteditor>`|
+|TextExport|`SfdtExport, TextExport`|`<ejs-documenteditor :enableTextExport='true'></ejs-documenteditor>`|
+|Editor|`Selection, Editor`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true'></ejs-documenteditor>`|
+|EditorHistory|`Selection, Editor, EditorHistory`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableEditorHistory='true'></ejs-documenteditor>`|
+|OptionsPane(Find)|`Selection, Search, OptionsPane`|`<ejs-documenteditor :enableSearch='true' :enableOptionsPane='true'></ejs-documenteditor>`|
+|OptionsPane(Find and Replace)|`Selection, Search, Editor, OptionsPane`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableSearch='true' :enableOptionsPane='true'></ejs-documenteditor>`|
+|ContextMenu|`Selection, ContextMenu`|`<ejs-documenteditor :enableSelection='true' :enableContextMenu='true'></ejs-documenteditor>`|
+|ImageResizer|`Selection, Editor, ImageResizer`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableImageResizer='true'></ejs-documenteditor>`|
+|HyperlinkDialog|`Selection, Editor, HyperlinkDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableHyperlinkDialog='true'></ejs-documenteditor>`|
+|TableDialog|`Selection, Editor, TableDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableTableDialog='true'></ejs-documenteditor>`|
+|FontDialog|`Selection, Editor, FontDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableFontDialog='true'></ejs-documenteditor>`|
+|ParagraphDialog|`Selection, Editor, ParagraphDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableParagraphDialog='true'></ejs-documenteditor>`|
+|BookmarkDialog|`Selection, Editor, BookmarkDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableBookmarkDialog='true'></ejs-documenteditor>`|
+|PageSetupDialog|`Selection, Editor, PageSetupDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enablePageSetupDialog='true'></ejs-documenteditor>`|
+|TableOfContentsDialog|`Selection, Editor, TableOfContentsDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableTableOfContentsDialog='true'></ejs-documenteditor>`|
+|ListDialog|`Selection, Editor, ListDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableListDialog='true'></ejs-documenteditor>`|
+|TablePropertiesDialog|`Selection, Editor, TablePropertiesDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableTablePropertiesDialog='true'></ejs-documenteditor>`|
+|CellOptionsDialog|`Selection, Editor, CellOptionsDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableCellOptionsDialog='true'></ejs-documenteditor>`|
+|BordersAndShadingDialog|`Selection, Editor, BordersAndShadingDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableBordersAndShadingDialog='true'></ejs-documenteditor>`|
+|TableOptionsDialog|`Selection, Editor, TableOptionsDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableTableOptionsDialog='true'></ejs-documenteditor>`|
+|StylesDialog|`Selection, Editor, StylesDialog,StyleDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableStyleDialog='true' :enableStylesDialog='true'></ejs-documenteditor>`|
+|StyleDialog|`Selection, Editor, StyleDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableStyleDialog='true'></ejs-documenteditor>`|
+|BulletsAndNumberingDialog|`Selection, Editor, BulletsAndNumberingDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableBulletsAndNumberingDialog='true'></ejs-documenteditor>`|
 
-These modules should be injected into the documenteditor using the `Inject` directive.
\ No newline at end of file
+These modules should be injected into the `provide` section and use `DocumentEditor` as a key of the object.
\ No newline at end of file
diff --git a/Document-Processing/Word/Word-Processor/vue/fields.md b/Document-Processing/Word/Word-Processor/vue/fields.md
index d95c5eb444..cc291ee813 100644
--- a/Document-Processing/Word/Word-Processor/vue/fields.md
+++ b/Document-Processing/Word/Word-Processor/vue/fields.md
@@ -1,45 +1,45 @@
 ---
 layout: post
-title: Fields in React DOCX Editor component | Syncfusion
-description: Learn here all about Fields in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more.
+title: Fields in Vue DOCX Editor component | Syncfusion
+description: Learn here all about Fields in Syncfusion Vue DOCX Editor component of Syncfusion Essential JS 2 and more.
 control: Fields 
 platform: document-processing
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Fields in React Document Editor component
+# Fields in Vue DOCX Editor component
 
-[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) has preservation support for all types of fields in an existing word document without any data loss.
+[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) has preservation support for all types of fields in an existing word document without any data loss.
 
 ## Adding Fields
 
-You can add a field to the document by using [`insertField`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#insertfield) method in [`Editor`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor) module.
+You can add a field to the document by using [`insertField`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor#insertfield) method in [`Editor`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor) module.
 
 The following example code illustrates how to insert merge field programmatically by providing the field code and field result.
 
 ```ts
 let fieldCode: string = 'MERGEFIELD  First Name  \\* MERGEFORMAT ';
 let fieldResult: string = '«First Name»';
-documenteditor.editor.insertField(fieldCode, fieldResult);
+this.$refs.documenteditor.ej2Instances.editor.insertField(fieldCode, fieldResult);
 ```
 
-N> Document Editor does not validate/process the field code/field result. It simply inserts the field with specified field information.
+>Note: DOCX Editor does not validate or process the field code and field result. It simply inserts the field with the specified field information.
 
 ## Update fields
 
-Document Editor provides support for updating bookmark cross reference fields. The following example code illustrates how to update bookmark cross reference fields.
+DOCX Editor provides support for updating bookmark cross-reference fields. The following example code illustrates how to update bookmark cross-reference fields.
 
 ```ts
-//Update all the bookmark cross reference fields in the document.
-documenteditor.updateFields();
+//Update all the bookmark cross-reference fields in the document.
+this.$refs.documenteditor.ej2Instances.updateFields();
 ```
 
-Bookmark cross reference fields can be updated through UI by using update fields option in `Toolbar`.
+Bookmark cross-reference fields can be updated through UI by using the update fields option in `Toolbar`.
 
 ![Update bookmark cross reference field.](images/updatefields.png)
 
-The following type of fields are automatically updated in Document Editor.
+The following types of fields are automatically updated in DOCX Editor, independent of the bookmark cross-reference update above:
 
 * NUMPAGES
 * SECTION
@@ -47,22 +47,22 @@ The following type of fields are automatically updated in Document Editor.
 
 ## Get field info
 
-You can get field code and field result of the current selected field by using [`getFieldInfo`](https://ej2.syncfusion.com/react/documentation/api/document-editor/selection#getfieldinfo) method in the [`Selection`](https://ej2.syncfusion.com/react/documentation/api/document-editor/selection) module.
+You can get field code and field result of the current selected field by using [`getFieldInfo`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/selection#getfieldinfo) method in the [`Selection`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/selection) module.
 
 ```ts
 //Gets the field information of the selected field.
-let fieldInfo: FieldInfo = documenteditor.selection.getFieldInfo();
+let fieldInfo: FieldInfo = this.$refs.documenteditor.ej2Instances.selection.getFieldInfo();
 ```
 
-N> For nested fields, this method returns combined field code and result.
+>Note: For nested fields, this method returns the combined field code and result.
 
 ## Set field info
 
-You can modify the field code and field result of the current selected field by using [`setFieldInfo`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#setfieldinfo) method in the [`Editor`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor) module.
+You can modify the field code and field result of the current selected field by using [`setFieldInfo`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor#setfieldinfo) method in the [`Editor`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor) module.
 
 ```ts
-//Gets the field information for the selected field.
-let fieldInfo: FieldInfo = documenteditor.selection.getFieldInfo();
+//Get the current field info before modifying it.
+let fieldInfo: FieldInfo = this.$refs.documenteditor.ej2Instances.selection.getFieldInfo();
 
 //Modify field code
 fieldInfo.code = 'MERGEFIELD  First Name  \\* MERGEFORMAT ';
@@ -71,12 +71,12 @@ fieldInfo.code = 'MERGEFIELD  First Name  \\* MERGEFORMAT ';
 fieldInfo.result = '«First Name»';
 
 //Modify field code and result of the current selected field.
-documenteditor.editor.setFieldInfo(fieldInfo);
+this.$refs.documenteditor.ej2Instances.editor.setFieldInfo(fieldInfo);
 ```
 
-N> For nested field, entire field gets replaced completely with the specified field information.
+>Note: For a nested field, the entire field gets replaced completely with the specified field information.
 
 ## See Also
 
-[Mail merge using Word library (DocIO)](https://help.syncfusion.com/file-formats/docio/working-with-mail-merge)
+[Mail merge using DocIO](https://help.syncfusion.com/file-formats/docio/working-with-mail-merge)
 [Mail merge demo](https://github.com/SyncfusionExamples/EJ2-Document-Editor-Web-Services/blob/master/ASP.NET%20Core/src/Controllers/DocumentEditorController.cs#L114)
\ No newline at end of file
diff --git a/Document-Processing/Word/Word-Processor/vue/find-and-replace.md b/Document-Processing/Word/Word-Processor/vue/find-and-replace.md
index 83ae9b570b..ac807b620f 100644
--- a/Document-Processing/Word/Word-Processor/vue/find-and-replace.md
+++ b/Document-Processing/Word/Word-Processor/vue/find-and-replace.md
@@ -1,154 +1,200 @@
 ---
 layout: post
-title: Find and replace in React DOCX Editor component | Syncfusion
-description: Learn here all about Find and replace in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more.
+title: Find and replace in Vue DOCX Editor component | Syncfusion
+description: Learn here all about Find and replace in Syncfusion Vue DOCX Editor component of Syncfusion Essential JS 2 and more.
 control: Find and replace 
 platform: document-processing
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Find and replace in React Document Editor component
+# Find and replace in Vue DOCX Editor component
 
-The [React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) component searches a portion of text in the document through a built-in interface called `OptionsPane` or rich APIs. When used in combination with selection, it performs various operations on the search results like replacing it with some other text, highlighting it, making it bolder, and more.
+The [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) component searches a portion of text in the document through a built-in interface called `OptionsPane` or rich APIs. When used in combination with selection performs various operations on the search results like replacing it with some other text, highlighting it, making it bolder, and more.
 
 ## Options pane
 
-This provides the options to search for a portion of text in the document. After search operation is completed, the search results will be displayed in a list and options to navigate between them. The current occurrence of matched text or all occurrences can be replaced with another text by switching to `Replace` tab. This pane is opened using the keyboard shortcut `CTRL+F`. You can also open it programmatically using the following sample code.
+This provides the options to search for a portion of text in the document. After a search operation is completed, the search results will be displayed in a list and options to navigate between them. The current occurrence of matched text or all occurrences with another text can be replaced by switching to `Replace` tab. This pane is opened using the keyboard shortcut `CTRL+F`. You can also open it programmatically using the following sample code.
 
-```ts
-import * as ReactDOM from 'react-dom';
-import * as React from 'react';
-import {
-  DocumentEditorComponent,
-  SfdtExport,
-  Selection,
-  Editor,
-  OptionsPane,
-} from '@syncfusion/ej2-react-documenteditor';
-
-//Inject require module.
-DocumentEditorComponent.Inject(SfdtExport, Selection, Editor, OptionsPane);
-function App() {
-  let documenteditor;
-  React.useEffect(() => {
-    ComponentDidMount();
-  }, []);
-  function ComponentDidMount() {
-    let sfdt = `{
-            "sections": [
-                {
-                    "blocks": [
-                        {
-                            "inlines": [
-                                {
-                                    "characterFormat": {
-                                        "bold": true,
-                                        "italic": true
-                                    },
-                                    "text": "Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is located in Bothell, Washington with 290 employees, several regional sales teams are located throughout their market base."
-                                }
-                            ]
-                        }
-                    ]
-                }
-            ]
-        }`;
-    //Open the document in Document Editor.
-    documenteditor.open(sfdt);
-  }
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
 
-  function ShowHideOptionsPane() {
-    //Open options pane.
-    documenteditor.showOptionsPane();
-  }
-  return (
+<template>
+  <div id="app" height="350px">
     <div>
-      <button onClick={ShowHideOptionsPane}>OptionsPane</button>
-      <DocumentEditorComponent
-        id="container"
-        height={'330px'}
-        ref={(scope) => {
-          documenteditor = scope;
-        }}
-        isReadOnly={false}
-        enableSelection={true}
-        enableEditor={true}
-        enableSearch={true}
-        enableOptionsPane={true}
-      />
+      <button v-on:click='showOptionsPane'>Find/Replace</button>
     </div>
-  );
+    <ejs-documenteditor ref="documenteditor" :enableEditor='true' :enableSearch='true' :enableOptionsPane='true'
+      :isReadOnly='false' height="370px" style="width: 100%;"></ejs-documenteditor>
+  </div>
+</template>
+<script setup>
+import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, Search, OptionsPane } from '@syncfusion/ej2-vue-documenteditor';
+import { onMounted, provide, ref } from 'vue';
+
+const documenteditor = ref(null);
+provide('DocumentEditor', [Selection, Editor, Search, OptionsPane]);
+
+const showOptionsPane = function () {
+  //Open options pane.
+  documenteditor.value.showOptionsPane();
 }
-export default App;
-ReactDOM.render(<App />, document.getElementById('sample'));
 
-```
+onMounted(function () {
+  let sfdt = `{
+              "sections": [
+                  {
+                      "blocks": [
+                          {
+                              "inlines": [
+                                  {
+                                      "characterFormat": {
+                                          "bold": true,
+                                          "italic": true
+                                      },
+                                      "text": "Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is located in Bothell, Washington with 290 employees, several regional sales teams are located throughout their market base."
+                                  }
+                              ]
+                          }
+                      ]
+                  }
+              ]
+          }`;
+  documenteditor.value.open(sfdt);
+})
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+<template>
+  <div id="app" height="350px">
+    <div>
+      <button v-on:click='showOptionsPane'>Find/Replace</button>
+    </div>
+    <ejs-documenteditor ref="documenteditor" :enableEditor='true' :enableSearch='true' :enableOptionsPane='true'
+      :isReadOnly='false' height="370px" style="width: 100%;"></ejs-documenteditor>
+  </div>
+</template>
+<script>
+import { DocumentEditorComponent, Selection, Editor, Search, OptionsPane } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+  components: {
+    'ejs-documenteditor': DocumentEditorComponent
+  },
+  data: function () {
+    return {
+    };
+  },
+  provide: {
+    //Inject require modules.
+    DocumentEditor: [Selection, Editor, Search, OptionsPane]
+  },
+  methods: {
+    showOptionsPane: function () {
+      //Open options pane.
+      this.$refs.documenteditor.showOptionsPane();
+    }
+  },
+  mounted() {
+    let sfdt = `{
+              "sections": [
+                  {
+                      "blocks": [
+                          {
+                              "inlines": [
+                                  {
+                                      "characterFormat": {
+                                          "bold": true,
+                                          "italic": true
+                                      },
+                                      "text": "Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is located in Bothell, Washington with 290 employees, several regional sales teams are located throughout their market base."
+                                  }
+                              ]
+                          }
+                      ]
+                  }
+              ]
+          }`;
+    this.$refs.documenteditor.open(sfdt);
+  }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+</style>
+
+{% endhighlight %}
+{% endtabs %}
 
 You can close the options pane by pressing `Esc` key.
 
 ## Search
 
-The [`Search`](https://ej2.syncfusion.com/react/documentation/api/document-editor/search) module of Document Editor exposes the following APIs:
+The [`Search`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/search) module of DOCX Editor exposes the following APIs:
 
 |API Name|Type |Description|
 |---|---|---|
-|[`findAll()`](https://ej2.syncfusion.com/react/documentation/api/document-editor/search#findall)| Method |Searches for specified text in the whole document and highlights it with yellow.|
-|[`searchResults`](https://ej2.syncfusion.com/react/documentation/api/document-editor/search#searchresults) |Property |This is an instance of [`SearchResults`](https://ej2.syncfusion.com/react/documentation/api/document-editor/searchresults).|
-|[`find()`](https://ej2.syncfusion.com/react/documentation/api/document-editor/search#find) | Method |Find immediate occurrence of specified text from cursor position in the document and highlights it with yellow.|
+|[`findAll()`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/search#findall)| Method |Searches for specified text in the whole document and highlights it with yellow.|
+|[`searchResults`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/search#searchresults) |Property |This is an instance of [`SearchResults`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/searchResults).|
+|[`find()`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/search#find) | Method |Find immediate occurrence of specified text from cursor position in the document and highlights it with yellow.|
 
 ### Find the immediate occurrence in the document
 
-Using [`find()`](https://ej2.syncfusion.com/react/documentation/api/document-editor/search#find) method, you can find the immediate occurrence of specified text from current cursor position in the document.
+Using [`find()`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/search#find) method, you can find the immediate occurrence of specified text from current cursor position in the document.
 
-The following example code illustrates how to use find in Document Editor.
+The following example code illustrates how to use find in DOCX Editor.
 
 ```ts
-documenteditor.search.find('Some text', 'None');
+this.$refs.documenteditor.ej2Instances.search.find('Some text', 'None');
 ```
 
-N> Second parameter is optional parameter and it denotes find Options. Possible values of find options are `'None' |'WholeWord' |'CaseSensitive'| 'CaseSensitiveWholeWord'`.
+>Note: Second parameter is optional parameter and it denotes find Options. Possible values of find options are `'None' |'WholeWord' |'CaseSensitive'| 'CaseSensitiveWholeWord'`.
 
 ### Find all the occurrences in the document
 
-Using [`findAll()`](https://ej2.syncfusion.com/react/documentation/api/document-editor/search#findall) method, you can find all the occurrences of specified text in the whole document and highlight it with yellow.
+Using [`findAll()`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/search#findall) method, you can find all the occurrences of specified text in the whole document and highlight it with yellow.
 
 The following example code illustrates how to find all the text in the document.
 
 ```ts
-documenteditor.search.findAll('Some text', 'None');
+this.$refs.documenteditor.ej2Instances.search.findAll('Some text', 'None');
 ```
 
-N> Second parameter is optional parameter and it denotes find Options. Possible values of find options are `'None' |'WholeWord' |'CaseSensitive'| 'CaseSensitiveWholeWord'`.
+>Note: Second parameter is optional parameter and it denotes find Options. Possible values of find options are `'None' |'WholeWord' |'CaseSensitive'| 'CaseSensitiveWholeWord'`.
 
 ## Search results
 
-The [`SearchResults`](https://ej2.syncfusion.com/react/documentation/api/document-editor/searchResults) class provides information about the search results after a search operation is completed that can be identified using the [`searchResultsChange`](https://ej2.syncfusion.com/react/documentation/api/document-editor#searchresultschange) event. This will expose the following APIs:
+The [`SearchResults`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/searchResults) class provides information about the search results after a search operation is completed that can be identified using the [`searchResultsChange`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#searchresultschange) event. This will expose the following APIs:
 
 |API Name|Type |Description|
 |---|---|---|
-|[`length`](https://ej2.syncfusion.com/react/documentation/api/document-editor/searchResults#length)|Property|Returns the total number of results found on the search.|
-|[`index`](https://ej2.syncfusion.com/react/documentation/api/document-editor/searchResults#index)|Property|Returns the index of selected search result. You can change the value for this property to move the selection.|
-|[`replaceAll()`](https://ej2.syncfusion.com/react/documentation/api/document-editor/searchResults#replaceall)|Method|Replaces all the occurrences with specified text.|
-|[`clear()`](https://ej2.syncfusion.com/react/documentation/api/document-editor/searchresults#clear)|Method|Clears the search result.|
+|[`length`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/searchResults#length)|Property|Returns the total number of results found on the search.|
+|[`index`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/searchResults#index)|Property|Returns the index of selected search result. You can change the value for this property to move the selection.|
+|[`replaceAll()`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/searchResults#replaceall)|Method|Replaces all the occurrences with specified text.|
+|[`clear()`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/searchResults#clear)|Method|Clears the search result.|
 
 ### Replace all the occurrences
 
-Using [`replaceAll`](https://ej2.syncfusion.com/react/documentation/api/document-editor/searchResults#replaceall), you can replace all the occurrences with specified text.
+Using [`replaceAll`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/searchResults#replaceall), you can replace all the occurrences with specified text.
 
-The following example code illustrates how to use Replace All in Document Editor.
+The following example code illustrates how to use replace All in DOCX Editor.
 
 ```ts
-documentEditor.search.findAll ('Some text');
+this.$refs.documenteditor.ej2Instances.search.findAll ('Some text');
 // Replace all the searched text with word 'Mike'
-documentEditor.search.searchResults.replaceAll("Mike");  
+this.$refs.documenteditor.ej2Instances.search.searchResults.replaceAll("Mike");  
 ```
 
 ### Replace
 
-Using [`insertText`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#inserttext), you can replace the current searched text with specified text and it replaces a single occurrence.
+Using [`insertText`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor#inserttext), you can replace the current searched text with specified text and it replace single occurrence.
 
-N> This [`insertText`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#inserttext) API accepts following control characters
+>Note: This [`insertText`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor#inserttext) API accepts following control characters
 >* New line characters ("\r", "\r\n", "\n") - Inserts a new paragraph and appends the remaining text to the new paragraph.
 >* Line break character ("\v") - Moves the remaining text to start in new line.
 >* Tab character ("\t") - Allocates a tab space and continue the next character.
@@ -156,129 +202,47 @@ N> This [`insertText`](https://ej2.syncfusion.com/react/documentation/api/docume
 The following example code illustrates how to find a text in the document and replace each occurrence of the text one by one programmatically.
 
 ```ts
-documentEditor.search.findAll('works');
+this.$refs.container.ej2Instances.documentEditor.search.findAll('works');
 
-let searchLength: number = documentEditor.search.searchResults.length;
+let search_length: number = container.documentEditor.search.searchResults.length;
 
-for (let i = searchLength - 1; i >= 0; i--) {
+for (let i = search_length - 1; i >= 0; i--) {
   // It will move selection to specific searched index,move to each occurrence one by one
-  documentEditor.search.searchResults.index = i;
+  this.$refs.container.ej2Instances.documentEditor.search.searchResults.index = i;
   // Replace it with some text
-  documentEditor.editor.insertText('Hello');
+  this.$refs.container.ej2Instances.documentEditor.editor.insertText('Hello');
 }
 
-container.documentEditor.search.searchResults.clear();
+this.$refs.container.ej2Instances.documentEditor.search.searchResults.clear();
 ```
 
-## Customize find and replace
+## SearchResultsChange event
 
-Using the exposed APIs, you can customize the find and replace functionality in your application. Refer to the following sample code.
+[`DocumentEditor`](https://ej2.syncfusion.com/vue/documentation/api/document-editor) exposes the [`searchResultsChange`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#searchresultschange)event that will be triggered whenever search results are changed. Consider the following scenarios:
 
+* A search operation is completed with some results.
+* The results are replaced with some other text, since it will be cleared automatically.
+* The results are cleared explicitly.
 
-```ts
-import * as ReactDOM from 'react-dom';
-import * as React from 'react';
-import {
-  DocumentEditorComponent,
-  SfdtExport,
-  Selection,
-  Editor,
-  Search,
-} from '@syncfusion/ej2-react-documenteditor';
-
-//Inject require module.
-DocumentEditorComponent.Inject(SfdtExport, Selection, Editor, Search);
-function App() {
-  let documenteditor;
-  React.useEffect(() => {
-    ComponentDidMount();
-  }, []);
-  function ComponentDidMount() {
-    let sfdt = `{
-            "sections": [
-                {
-                    "blocks": [
-                        {
-                            "inlines": [
-                                {
-                                    "characterFormat": {
-                                        "bold": true,
-                                        "italic": true
-                                    },
-                                    "text": "Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is located in Bothell, Washington with 290 employees, several regional sales teams are located throughout their market base."
-                                }
-                            ]
-                        }
-                    ]
-                }
-            ]
-        }`;
-    //Open the document in Document Editor.
-    documenteditor.open(sfdt);
-  }
-
-  function replaceAll() {
-    let textToFind = document.getElementById('find_text').value;
-    let textToReplace = document.getElementById('replace_text').value;
-    if (textToFind !== '') {
-      // Find all the occurences of given text
-      documenteditor.searchModule.findAll(textToFind);
-      if (documenteditor.searchModule.searchResults.length > 0) {
-        // Replace all the occurences of given text
-        documenteditor.searchModule.searchResults.replaceAll(textToReplace);
-      }
-    }
-  }
-
-  return (
-    <div>
-      <div>
-        <table>
-          <tr>
-            <td>
-              <label>Text to find:</label>
-            </td>
-            <td>
-              <input type="text" id="find_text" />
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <label>Text to replace:</label>
-            </td>
-            <td>
-              <input type="text" id="replace_text" />
-            </td>
-          </tr>
-          <tr>
-            <td colspan="2">
-              <button onClick={replaceAll}>Replace All</button>
-            </td>
-          </tr>
-        </table>
-      </div>
-
-      <DocumentEditorComponent
-        id="container"
-        height={'590px'}
-        ref={(scope) => {
-          documenteditor = scope;
-        }}
-        isReadOnly={false}
-        enableSelection={true}
-        enableEditor={true}
-        enableSearch={true}
-      />
-    </div>
-  );
-}
-export default App;
-ReactDOM.render(<App />, document.getElementById('sample'));
+Refer to the following code example.
 
+```ts
+documenteditor.searchResultsChange = function() {
 
+};
 ```
 
-## See Also
+## Customize find and replace
 
-* [Options pane](./dialog#options-pane)
-* [Feature modules](./feature-module)
+Using the exposed APIs, you can customize the find and replace functionality in your application. The following sample demonstrates how to combine `findAll` and `replaceAll` to search for a specific term and replace every occurrence in one operation. Refer to the following sample code.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/document-editor/vue/replace-all-cs1/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/document-editor/vue/replace-all-cs1/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "/document-processing/code-snippet/document-editor/vue/replace-all-cs1" %}
\ No newline at end of file
diff --git a/Document-Processing/Word/Word-Processor/vue/form-fields.md b/Document-Processing/Word/Word-Processor/vue/form-fields.md
index 29f161a1f6..63a392cba2 100644
--- a/Document-Processing/Word/Word-Processor/vue/form-fields.md
+++ b/Document-Processing/Word/Word-Processor/vue/form-fields.md
@@ -1,177 +1,198 @@
 ---
 layout: post
-title: Form fields in React DOCX Editor component | Syncfusion
-description: Learn here all about Form fields in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more.
+title: Form fields in Vue DOCX Editor component | Syncfusion
+description: Learn here all about Form fields in Syncfusion Vue DOCX Editor component of Syncfusion Essential JS 2 and more.
 control: Form fields 
 platform: document-processing
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Form fields in React Document Editor component
+# Form fields in Vue DOCX Editor component
 
-[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) Container component provides support for inserting Text, CheckBox, DropDown form fields through in-built toolbar.
+[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) Container component provides support for inserting Text, CheckBox, DropDown form fields through in-built toolbar.
 
 ![Form Fields](images/toolbar-form-fields.png)
 
 ## Insert form field
 
-Form fields can be inserted using [`insertFormField`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#insertformfield) method in editor module.
+Form fields can be inserted using [`insertFormField`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor#insertformfield) method in editor module.
 
 ```ts
 //Insert Text form field
-documentEditor.editor.insertFormField('Text');
+this.$refs.documenteditor.ej2Instances.editor.insertFormField('Text');
 //Insert Checkbox form field
-documentEditor.editor.insertFormField('CheckBox');
+this.$refs.documenteditor.ej2Instances.editor.insertFormField('CheckBox');
 //Insert Drop down form field
-documentEditor.editor.insertFormField('DropDown');
+this.$refs.documenteditor.ej2Instances.editor.insertFormField('Dropdown');
 ```
 
 ## Get form field names
 
-All the form fields names from current document can be retrieved using [`getFormFieldNames()`](https://ej2.syncfusion.com/react/documentation/api/document-editor#getformfieldnames).
+All the form field names from the current document can be retrieved using [`getFormFieldNames()`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#getformfieldnames).
 
 ```ts
-let formFieldsNames: string[] = documentEditor.getFormFieldNames();
+this.$refs.documenteditor.ej2Instances.getFormFieldNames();
 ```
 
 ## Get form field properties
 
-Form field properties can be retrieved using [`getFormFieldInfo()`](https://ej2.syncfusion.com/react/documentation/api/document-editor#getformfieldinfo).
+Form field properties can be retrieved using [`getFormFieldInfo()`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#getformfieldinfo).
 
 ```ts
 //Text form field
-let textfieldInfo: TextFormFieldInfo = documentEditor.getFormFieldInfo('Text1') as TextFormFieldInfo;
+var textfieldInfo = this.$refs.documenteditor.ej2Instances.getFormFieldInfo('Text1');
 //Checkbox form field
-let checkboxfieldInfo: CheckBoxFormFieldInfo = documentEditor.getFormFieldInfo('Check1') as CheckBoxFormFieldInfo;
+var checkboxfieldInfo = this.$refs.documenteditor.ej2Instances.getFormFieldInfo('Check1');
 //Dropdown form field
-let dropdownfieldInfo: DropDownFormFieldInfo = documentEditor.getFormFieldInfo('Drop1') as DropDownFormFieldInfo;
+var dropdownfieldInfo = this.$refs.documenteditor.ej2Instances.getFormFieldInfo('Drop1');
 ```
 
 ## Set form field properties
 
-Form field properties can be modified using [`setFormFieldInfo`](https://ej2.syncfusion.com/react/documentation/api/document-editor#setformfieldinfo).
+Form field properties can be modified using [`setFormFieldInfo`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#setformfieldinfo).
 
 ```ts
 // Set text form field properties
-let textfieldInfo: TextFormFieldInfo = documentEditor.getFormFieldInfo('Text1') as TextFormFieldInfo;
+var textfieldInfo = this.$refs.documenteditor.ej2Instances.getFormFieldInfo('Text1');
 textfieldInfo.defaultValue = "Hello";
 textfieldInfo.format = "Uppercase";
 textfieldInfo.type = "Text";
 textfieldInfo.name = "Text2";
-documentEditor.setFormFieldInfo('Text1',textfieldInfo);
+this.$refs.documenteditor.ej2Instances.setFormFieldInfo('Text1',textfieldInfo);
 
 // Set checkbox form field properties
-let checkboxfieldInfo: CheckBoxFormFieldInfo = documentEditor.getFormFieldInfo('Check1') as CheckBoxFormFieldInfo;
+var checkboxfieldInfo = this.$refs.documenteditor.ej2Instances.getFormFieldInfo('Check1');
 checkboxfieldInfo.defaultValue = true;
 checkboxfieldInfo.name = "Check2";
-documentEditor.setFormFieldInfo('Check1',checkboxfieldInfo);
+this.$refs.documenteditor.ej2Instances.setFormFieldInfo('Check1',checkboxfieldInfo);
 
 // Set dropdown form field properties
-let dropdownfieldInfo: DropDownFormFieldInfo = documentEditor.getFormFieldInfo('Drop1') as DropDownFormFieldInfo;
-dropdownfieldInfo.dropdownItems = ['One','Two', 'Three'];
+var dropdownfieldInfo = this.$refs.documenteditor.ej2Instances.getFormFieldInfo('Drop1');
+dropdownfieldInfo.dropDownItems = ['One','Two', 'Three'];
 dropdownfieldInfo.name = "Drop2";
-documentEditor.setFormFieldInfo('Drop1',dropdownfieldInfo);
+this.$refs.documenteditor.ej2Instances.setFormFieldInfo('Drop1',dropdownfieldInfo);
 ```
 
-N> If a form field already exists in the document with the new name specified, the old form field name property will be cleared and it will not be accessible. Ensure the new name is unique.
+>Note: If a form field already exists in the document with the new name specified, the old form field name property will be cleared and it will not be accessible. Ensure the new name is unique.
 
 ## Form Field Shading
 
-You can customize form field shading at the application level using the [`formFieldSettings`](https://ej2.syncfusion.com/react/documentation/api/document-editor#formFieldSettings) property.
+You can customize form field shading at the application level using the [`formFieldSettings`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#formFieldSettings) property.
 
 The example code below demonstrates how to set a custom shading color and how to disable shading (by default, shading is enabled).
 
 ```ts
 // Set a custom shading color (for example, white) 
-container.current.documentEditorSettings.formFieldSettings.shadingColor = '#ffffff';
+this.$refs.documenteditor.ej2Instances.documentEditorSettings.formFieldSettings.shadingColor = '#ffffff';
 
 // Disable form field shading entirely 
-container.current.documentEditorSettings.formFieldSettings.applyShading = false;
+this.$refs.documenteditor.ej2Instances.documentEditorSettings.formFieldSettings.applyShading = false;
 ```
 
 N> This customization only affects the application UI and will not be preserved when exporting the document.
 
 ## Export form field data
 
-Data of the all the Form fields in the document can be exported using [`exportFormData`](https://ej2.syncfusion.com/react/documentation/api/document-editor#exportformdata).
+Data of all the form fields in the document can be exported using [`exportFormData`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#exportformdata).
 
 ```ts
-let formFieldDate: FormFieldData[] = documentEditor.exportFormData();
+var formFieldData = this.$refs.documenteditor.ej2Instances.exportFormData();
 ```
 
 ## Import form field data
 
-Form fields can be prefilled with data using [`importFormData`](https://ej2.syncfusion.com/react/documentation/api/document-editor#importformdata).
+Form fields can be initialized with data using [`importFormData`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#importformdata).
 
 ```ts
-let textformField: FormFieldData = {fieldName: 'Text1', value: 'Hello World'};
-let checkformField: FormFieldData = {fieldName: 'Check1', value: true};
-let dropdownformField: FormFieldData = {fieldName: 'Drop1', value: 1};
+var textformField = {fieldName: 'Text1', value: 'Hello World'};
+var checkformField = {fieldName: 'Check1', value: true};
+var dropdownformField = {fieldName: 'Drop1', value: 1};
 //Import form field data
-documentEditor.importFormData([textformField,checkformField,dropdownformField]);
+this.$refs.documenteditor.ej2Instances.importFormData([textformField,checkformField,dropdownformField]);
 ```
 
 ## Reset form fields
 
-Reset all the form fields in current document to default value using [`resetFormFields`](https://ej2.syncfusion.com/react/documentation/api/document-editor#resetformfields).
+Reset all the form fields in the current document to default value using [`resetFormFields`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#resetformfields).
 
 ```ts
-documentEditor.resetFormFields();
+this.$refs.documenteditor.ej2Instances.resetFormFields();
 ```
 
 ## Protect the document in form filling mode
 
-Document Editor provides support for protecting the document with `FormFieldsOnly` protection. In this protection, user can only fill form fields in the document.
-
-Document Editor provides an option to protect and unprotect document using [`enforceProtection`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#enforceprotection) and [`stopProtection`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#stopprotection) API.
-
-The following example code illustrates how to enforce and stop protection in Document Editor container.
-
-```ts
-import { createRoot } from 'react-dom/client';
-import * as React from 'react';
-import {
-  DocumentEditorContainerComponent,
-  Toolbar,
-} from '@syncfusion/ej2-react-documenteditor';
-DocumentEditorContainerComponent.Inject(Toolbar);
-function App() {
-  let container = DocumentEditorContainerComponent;
-  function EnforceProtection() {
+DOCX Editor provides support for protecting the document with `FormFieldsOnly` protection. In this protection, user can only fill form fields in the document.
+
+DOCX Editor provides an option to protect and unprotect document using [`enforceProtection`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor#enforceprotection) and [`stopProtection`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor#stopprotection) API.
+
+The following example code illustrates how to enforce and stop protection in DOCX Editor container.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+<template>
+  <div id="app">
+    <ejs-documenteditorcontainer ref='container' :serviceUrl='serviceUrl' height="590px" id='container'
+      :enableToolbar='true'></ejs-documenteditorcontainer>
+  </div>
+</template>
+<script setup>
+import { DocumentEditorContainerComponent as EjsDocumenteditorcontainer, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
+import { onMounted, provide, ref } from 'vue';
+
+const container = ref(null);
+const serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';
+
+provide('DocumentEditorContainer', [Toolbar])
+
+onMounted(() => {
+  //enforce protection
+  container.value.ej2Instances.documentEditor.editor.enforceProtection('123', 'FormFieldsOnly');
+  //stop the document protection
+  container.value.ej2Instances.documentEditor.editor.stopProtection('123');
+});
+</script>
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+<template>
+  <div id="app">
+    <ejs-documenteditorcontainer ref='container' :serviceUrl='serviceUrl' height="590px" id='container'
+      :enableToolbar='true'></ejs-documenteditorcontainer>
+  </div>
+</template>
+<script>
+import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+  components: {
+    'ejs-documenteditorcontainer': DocumentEditorContainerComponent
+  },
+  data() {
+    return { serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/' };
+  },
+  provide: {
+    //Inject required modules.
+    DocumentEditorContainer: [Toolbar]
+  },
+  mounted() {
     //enforce protection
-    container.documentEditor.editor.enforceProtection('123', 'FormFieldsOnly');
-  }
-  function StopProtection() {
+    this.$refs.container.ej2Instances.documentEditor.editor.enforceProtection('123', 'FormFieldsOnly');
     //stop the document protection
-    container.documentEditor.editor.stopProtection('123');
+    this.$refs.container.ej2Instances.documentEditor.editor.stopProtection('123');
   }
-  return (
-    <div>
-      <button onClick={EnforceProtection}>EnforceProtection</button>
-      <button onClick={StopProtection}>StopProtection</button>
-      <DocumentEditorContainerComponent
-        id="container"
-        ref={(scope) => {
-          container = scope;
-        }}
-        height={'590px'}
-        serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/"
-        enableToolbar={true}
-      />
-    </div>
-  );
 }
-export default App;
-createRoot(document.getElementById('sample')).render(<App />);
-
+</script>
 
-```
+{% 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.
+> 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.
 
-N> In enforce Protection method, first parameter denotes password and second parameter denotes protection type. Possible values of protection type are `NoProtection |ReadOnly |FormFieldsOnly |CommentsOnly`. In stop protection method, parameter denotes the password.
+>Note: In the enforce Protection method, the first parameter denotes the password and the second parameter denotes the protection type. Possible values of protection type are `NoProtection | ReadOnly | FormFieldsOnly`. In the `stopProtection` method, the parameter denotes the password.
 
 ## Online Demo
 
-Explore how to insert and manage form fields in Word documents using the React Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/react/#/tailwind3/document-editor/form-fields).
\ No newline at end of file
+Explore how to insert and manage form fields in Word documents using the Vue DOCX Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/vue/#/tailwind3/document-editor/form-fields.html).
\ No newline at end of file
diff --git a/Document-Processing/Word/Word-Processor/vue/global-local.md b/Document-Processing/Word/Word-Processor/vue/global-local.md
index a51d3187c9..5b06a3ecca 100644
--- a/Document-Processing/Word/Word-Processor/vue/global-local.md
+++ b/Document-Processing/Word/Word-Processor/vue/global-local.md
@@ -1,27 +1,27 @@
 ---
 layout: post
-title: Global local in React DOCX Editor component | Syncfusion
-description: Learn here all about Global local in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more.
+title: Global local in Vue DOCX Editor component | Syncfusion
+description: Learn here all about Global local in Syncfusion Vue DOCX Editor component of Syncfusion Essential JS 2 and more.
 control: Global local 
 platform: document-processing
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Global local in React Document Editor component
+# Global local in Vue DOCX Editor component
 
 ## Localization
-<!-- todo -->
-The `Localization` library allows you to localize default text content of the Document Editor. The [React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) component has static text on some features (like find & replace, context-menu, dialogs) that can be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the locale value and translation object. Please refer to the sample link [RTL](https://document.syncfusion.com/demos/docx-editor/react/#/tailwind3/document-editor/right-to-left)
 
-N> Please refer to the [Locale](https://github.com/syncfusion/ej2-locale).
+The Localization library allows you to localize the default text content of the DOCX Editor. The [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) component has static text on some features (such as find & replace, context menu, and dialogs) that you can change to other cultures (Arabic, Deutsch, French, etc.) by defining the locale value and the translation object.
 
-## Document Editor
+Note: Please refer to the [Locale](https://github.com/syncfusion/ej2-locale) repository.
 
-The following list of properties and its values are used in the document editor.
+## DOCX Editor
 
-Locale keywords |Text
------|-----
+The table below lists the locale keywords used by the DOCX Editor (for find & replace, the context menu, and the built-in dialogs) and their corresponding localized text values.
+
+Locale keywords | Text
+---|---
 Table | Table
 Row | Row
 Cell | Cell
@@ -262,7 +262,7 @@ Direction | Direction
 Table direction | Table direction
 Indent from right | Indent from right
 Contextual Spacing | Don't add space between the paragraphs of the same styles
-Password Mismatch | The passwords don't match
+Password Mismatch | The password don't match
 Restrict Editing | Restrict Editing
 Formatting restrictions | Formatting restrictions
 Allow formatting | Allow formatting
@@ -363,12 +363,12 @@ Reject Changes | Reject Changes
 User | User
 View | View
 
-## Document Editor Container
+## DOCX Editor Container
 
-The following list of properties and its values are used in the document editor container.
+The table below lists locale keywords localized by the DOCX Editor Container (the toolbar, status bar, and the HTML/rich-text rendering surface). The following list of properties and their values are used in the DOCX Editor container.
 
-Locale keywords |Text
------|-----
+Locale keywords | Text
+---|---
 New | New
 Open | Open
 Undo | Undo
@@ -518,10 +518,10 @@ Show properties pane | Show properties pane
 
 ## Color Picker
 
-The following list of properties and its values are used in the color picker.
+The table below lists locale keywords localized by the color picker (used by the Font Color, Text Highlight, and Shading Fill dialogs). The following list of properties and their values are used in the Color Picker.
 
-Locale keywords |Text
------|-----
+Locale keywords | Text
+---|---
 Apply | Apply
 Cancel | Cancel
 ModeSwitcher | Switch Mode
\ No newline at end of file