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 ╰ TX Text Control .NET Server for ASP.NET
╰ JavaScript API
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 ╰ TX Text Control .NET Server for ASP.NET
╰ JavaScript API
╰ TextFormField Object
The TextFormField object represents a text input field on a form. 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");
}
});
view raw test.js hosted with ❤ by GitHub

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

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 ╰ TX Text Control .NET Server for ASP.NET
╰ TXTextControl Namespace
╰ TextField Class
╰ Name Property
Relates a user-defined name to a text field. and ID ╰ TX Text Control .NET Server for ASP.NET
╰ TXTextControl Namespace
╰ TextField Class
╰ ID Property
Gets or sets an identifier for a text field. for the new form field:

TXHelper.textFormFields.convertFromSelection("name", 5);
view raw test.js hosted with ❤ by GitHub