The HTML5-based document editor, that is part of the product TX Text Control .NET Server, 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 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: TXTextControl.addMergeField method:

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 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: TXTextControl.getTextFields method 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: