The HTML5-based document editor, that is part of the product TX Text Control .NET Server for ASP.NET, comes with a JavaScript API to manipulate the most typical elements in a document.
This JavaScript API can be used with the ASP.NET WebForms, MVC and also the language independent Widget version which is currently in beta. This article gives an overview of how to insert, remove and manipulate merge fields programmatically.
Inserting Merge Fields
In order to insert a merge field, a new Javascript: TXText
╰ JavaScript API
╰ TXTextControl.MergeField Object
Represents an MS Word specific MERGEFIELD field. needs to be created:
var mergeField = new TXTextControl.MergeField(); | |
mergeField.name = "company"; | |
mergeField.text = "[company]"; |
This field can be added to the document at the current input position using the Javascript: TXText
╰ JavaScript API
╰ TXTextControl Object
╰ addMergeField Method
Inserts a merge field at the current input position. :
TXTextControl.addMergeField(mergeField); |
If you would like to insert the merge field at a specific location, you can set the input position using the Javascript: Selection object ╰ TX Text Control .NET Server for ASP.NET
╰ JavaScript API
╰ Selection Object
Describes and handles the attributes of a text selection. first:
var bounds = { "start":5,"length":0 }; | |
TXTextControl.selection.setBounds(bounds); |
Deleting Merge Fields
Each time, merge fields (or any text field) should be manipulated, a new synchronized list of fields needs to be retrieved from Text Control. This is done using the Javascript: TXText
╰ JavaScript API
╰ TXTextControl Object
╰ getTextFields Method
Obsolete. which returns a collection of either all text fields or only the text field at the current input position.
The following code deletes the merge field at the current input position:
TXTextControl.getTextFields(function(e) { | |
if(e[0] != undefined) | |
TXTextControl.removeTextField(e[0]) | |
}, true); |
Manipulating Merge Fields
The following code returns all available merge fields in the current text part. The method getTextFields returns all text fields. In order to filter the merge fields, the type and the typeName properties need to be checked:
var mergeFields = []; | |
TXTextControl.getTextFields(function(e) { | |
e.forEach(function(e) { | |
if(e.type == "APPLICATIONFIELD" && | |
e.typeName == "MERGEFIELD") { | |
mergeFields.push(e); | |
} | |
}); | |
}); | |
console.log(mergeFields); |
Now, these fields can be manipulated. The following code sets the text of the first field in the created array of fields:
mergeFields[0].text = "New text"; |
The following sample uses the Widget to show how a merge field can be added and removed from the document: