TX Text Control X15 allows the insertion and manipulation of text fields of type TXTextControl.ApplicationField class and TXTextControl.TextField class. A TextField is a TX Text Control internal field and ApplicationFields are MS Word compatible MergeFields, FormFields or any other supported field type.

Javascript: TXTextControl.MergeField object can be added using the Reporting ribbon tab that allows the insertion of fields from a specified data source such as Json or an XML string. These fields can now be added programmatically using the JavaScript api.

The following JavaScript code creates and inserts a new merge field into the document at the current input position:

var mergeField = new TXTextControl.MergeField();
mergeField.name = "company_name";
mergeField.text = "«" +  mergeField.name + "»";
mergeField.editable = false;

TXTextControl.addMergeField(mergeField);

The textFieldEntered event that can be attached using the Javascript: TXTextControl.addEventListener method is fired when the input position enters a text field. The event arguments return the properties of the current field. In order to manipulate the field object directly, the Javascript: TXTextControl.getTextFields method can be used which returns all fields or the field at the current input position.

The following JavaScript code changes the field text when the input position enters the text field:

function textFieldEnteredHandler(e) {
    TXTextControl.getTextFields(function (e) {
        var currentField = e[0];
        currentField.text = "New Field Text";
    }, true);
}

ApplicationFields are technically all field types that are supported by MS Word including merge fields, content controls and legacy form fields. The following JavaScript code inserts a legacy form drop down field into the TX Text Control:

var comboBox = new TXTextControl.ApplicationField();
comboBox.typeName = "FORMDROPDOWN";
comboBox.parameters = ["w:name w:val=\"Dropdown1\"",
    "w:enabled w:val=\"true\"",
    "w:calcOnExit w:val=\"false\"",
    "w:listEntry w:val=\"Test1\"",
    "w:listEntry w:val=\"Test2\""];

comboBox.text = "ComboBox";
comboBox.editable = false;
comboBox.doubledInputPosition = true;

TXTextControl.addTextField(comboBox);

In the document, form element fields are represented by their display text (as they would be printed or exported to PDF). All field objects provide a Javascript: TXTextControl.TextField.bounds property that provides the size and the location of a field. This information can be used to render the actual form element at that location. The following code renders an HTML drop down box at the field location:

function drawOverlay() {

  _divOvr = document.getElementById("divOvr");

  var sParams = "";

  // create the options based on the drop down items
  for (let param of _currentField.parameters) {
      if (param.startsWith("w:listEntry")) {
          var arrStr = param.split(/["]/);
          sParams += "<option>" + arrStr[1] + "</option>";
      }
  }

  // create a new html select object
  if (!_divOvr) {
      _divOvr = document.createElement("select");
      _divOvr.className = "overlay";
      _divOvr.id = "divOvr";
      _divOvr.innerHTML = sParams;
      _container.appendChild(_divOvr);
  }

  // retrieve the field location in the document
  var fldPos = _currentField.bounds.location;

  // and calculate the offset location and zoom factor
  var x = _textView.offsetLeft + (fldPos.x - _txtViewLoc.x) * _zoom;
  var y = _textView.offsetTop + (fldPos.y - _txtViewLoc.y) * _zoom;

  // set position and size
  _divOvr.style.fontSize = (8 * _zoom) + "pt";
  _divOvr.style.zIndex = _textView.style.zIndex + 10;
  _divOvr.style.left = x + "px";
  _divOvr.style.width = (_currentField.bounds.size.width * _zoom) + "px";
  _divOvr.style.minHeight = (_currentField.bounds.size.height * _zoom) + "px";
  _divOvr.style.top = y + "px";

  // add change event to change text of the field
  // when an option has been selected
  $('#divOvr').change(function () {
      var val = $("#divOvr option:selected").val();
      _currentField.text = val;
      removeElement();
  });

  $('#divOvr').focus(function () {
      this.selectedIndex = -1;
      this.focus();
  });

  _divOvr.focus();
}

The following screen cast shows the inserted drop down box in action. A custom button has been added to a new ribbon group to insert a drop down field.

Try this on your own and download the sample hosted on GitHub.