Skip to content

Task(1043990): Updated 5 files in Vue DOCX Editor #4033

New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Open
VijayalakshmiGSF4561 wants to merge 2 commits into
base: hotfix/hotfix-v34.1.29
Choose a base branch
from
Open

Task(1043990): Updated 5 files in Vue DOCX Editor #4033

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f4331ae
1043990: Updated 5 files in Vue DOCX editor
VijayalakshmiGSF4561 Jul 31, 2026
7f936ff
1043990: Updated Vue DOCX Editor files
VijayalakshmiGSF4561 Jul 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 11 additions & 12 deletions Document-Processing/Word/Word-Processor/vue/feature-module.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,29 @@
---
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 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 Vue Document editor component
# Feature module in Vue DOCX 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:
[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 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.
* **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.

>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|`Print`|`<ejs-documenteditor :enablePrint='true'></ejs-documenteditor>`|
|SfdtExport|`SfdtExport`|`<ejs-documenteditor :enableSfdtExport='true'></ejs-documenteditor>`|
Expand All @@ -47,11 +46,11 @@ Refer to the following table.
|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>`|
|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' :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 `provide` section and use `DocumentEditor` as a key of the object.
28 changes: 14 additions & 14 deletions Document-Processing/Word/Word-Processor/vue/fields.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
---
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 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 Vue Document editor component
# Fields in Vue DOCX 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.

## 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/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.

Expand All @@ -24,44 +24,44 @@ let fieldResult: string = '«First Name»';
this.$refs.documenteditor.ej2Instances.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.
>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 field. The following example code illustrates how to update bookmark cross reference field.
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 field in the document.
//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
* PAGE

## 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/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 = this.$refs.documenteditor.ej2Instances.selection.getFieldInfo();
```

>Note: 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/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/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.
//Get the current field info before modifying it.
let fieldInfo: FieldInfo = this.$refs.documenteditor.ej2Instances.selection.getFieldInfo();

//Modify field code
Expand All @@ -74,7 +74,7 @@ fieldInfo.result = '«First Name»';
this.$refs.documenteditor.ej2Instances.editor.setFieldInfo(fieldInfo);
```

>Note: 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

Expand Down
Loading