Fields in Vue DOCX Editor
28 Aug 20262 minutes to read
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 method in Editor module.
The following example code illustrates how to insert merge field programmatically by providing the field code and field result.
let fieldCode: string = 'MERGEFIELD First Name \\* MERGEFORMAT ';
let fieldResult: string = '«First Name»';
this.$refs.documenteditor.ej2Instances.editor.insertField(fieldCode, fieldResult);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
DOCX Editor provides support for updating bookmark cross-reference fields. The following example code illustrates how to update bookmark cross-reference fields.
//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 the update fields option in Toolbar.
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 method in the Selection module.
//Gets the field information of the selected field.
let fieldInfo: FieldInfo = this.$refs.documenteditor.ej2Instances.selection.getFieldInfo();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 method in the Editor module.
//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 ';
//Modify field result
fieldInfo.result = '«First Name»';
//Modify field code and result of the current selected field.
this.$refs.documenteditor.ej2Instances.editor.setFieldInfo(fieldInfo);Note: For a nested field, the entire field gets replaced completely with the specified field information.