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: TXTextControl.MergeField object TX Text Control .NET Server for ASP.NET
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]";
view raw tx.js hosted with ❤ by GitHub

This field can be added to the document at the current input position using the Javascript: TXTextControl.addMergeField method TX Text Control .NET Server for ASP.NET
JavaScript API
TXTextControl Object
addMergeField Method
Inserts a merge field at the current input position.
:

TXTextControl.addMergeField(mergeField);
view raw tx.js hosted with ❤ by GitHub

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);
view raw tx.js hosted with ❤ by GitHub

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: TXTextControl.getTextFields method TX Text Control .NET Server for ASP.NET
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);
view raw tx.js hosted with ❤ by GitHub

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);
view raw tx.js hosted with ❤ by GitHub

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";
view raw tx.js hosted with ❤ by GitHub

The following sample uses the Widget to show how a merge field can be added and removed from the document: