The online document editor of TX Text Control available for Angular, ASP.NET MVC, ASP.NET Core and very soon as a React component (!) shares the same underlying JavaScript API that can be used to manipulate every element in a document.

It can be used to insert text, replace text in merge fields or to insert form fields programmatically. The following sample code inserts a TextFormField into the document at the current input position.

TXTextControl.formFields.getCanAdd(canAdd => {
    if (canAdd) {

        // Add form field
        TXTextControl.formFields.addTextFormField(emptyWidth);

    } else {
        console.log("error");
    }
});

Sometimes, instead of adding this code directly to your functions, it is useful to create helper classes to encapsulate typical tasks in reusable components. The following helper class TXHelper provides the function textFormFields.convertFromSelection that converts the currently selected text into a form field:

var TXHelper = (function (tx) {
  
  tx.textFormFields = {

    convertFromSelection: function (name, id) {
      
      // get current selection
      var sel = TXTextControl.selection;

      sel.getLength(function(selLength) {
        
        if (selLength > 0) { // text is selected
        
          sel.getText(function(selText) {
            
            // store text
            var text = selText;
            sel.setText(""); // remove selected text
            
            TXTextControl.formFields.getCanAdd(canAdd => {
              if (canAdd) { // can add the field here?

                // add form field
                TXTextControl.formFields.addTextFormField(600, ff => {
                  ff.setText(text);
                  
                  // set field properties
                  if (name) ff.setName(name);
                  if (id) ff.setID(id);
                });

              } else { // there is a field at that location
                console.log("A field cannot be added at this location.");
              }
            });
          });
        }
        else { // no text is selected
          console.log("Nothing is selected.");
        }
      });
      
    },

  };
  
  return tx;

} ( TXHelper || {} ));

This helper function can be called like shown in the following code. The text of the current selection is used to add a form field at the current input position. Before that, the text of the selection is removed. Optionally, you can pass a Name and ID for the new form field:

TXHelper.textFormFields.convertFromSelection("name", 5);