The JavaScript API covers the most typical tasks such as inserting merge fields and setting edit modes of TX Text Control. Sometimes, more complex tasks require the usage of a server-side TXTextControl.ServerTextControl class to manipulate the document.

In order to insert a more complex document element into the text, the document can be saved locally and send to a server-side endpoint like a Web API method. After the document has been changed server-side, it can be returned and loaded using JavaScript. If the complete document is loaded and not only the selection is replaced, it is required to restore the old scroll location. By default, after a loading process, the TX Text Control scrolls to top left automatically.

var scrollLocation;
var freezedScrollLocation;
var dpiX = 15; // standard resolution server-side

function insertComplexElement() {

    // store the current scroll location
    freezedScrollLocation = scrollLocation;
    
    var serviceURL = "/api/TXDocument/InsertComplexElement";

    TXTextControl.saveDocument(TXTextControl.streamType.InternalUnicodeFormat, function (e) {
    
        $.ajax({
            type: "POST",
            url: serviceURL,
            contentType: 'application/json',
            data: JSON.stringify({
                Document: e.data
            }),
            success: successFunc,
            error: errorFunc
        });

        function successFunc(data, status) {

            //disable loading dialog
            TXTextControl.isLoadingDialogEnabled = false;
            TXTextControl.enableCommands(); // enable commands
            
            // code that loads a document that is returned by an endpoint
            TXTextControl.loadDocument(TXTextControl.streamType.InternalUnicodeFormat, data);

            // restore the scroll position
            TXTextControl.sendCommand(TXTextControl.Command.ScrollDelta,
                freezedScrollLocation.location.x * dpiX,
                freezedScrollLocation.location.y * dpiX)
        }

        function errorFunc() {
            console.log("error");
        }
    }
}

TXTextControl.addEventListener("textViewLocationChanged", function (e) {
    scrollLocation = e;
});

The event textViewLocationChanged returns the current scroll location which is stored in the variable scrollLocation. The dummy function insertComplexElement stores the current scroll location in the variable freezedScrollLocation before it is sending the document to the server. After the document has been retrieved from the server, it is loaded and the scroll location is restored using the command ScrollDelta. In order to use this code, it is required to turn on the hidden command interface which is done using the enableCommands method.

How to load and save documents from and to the MVC controller can be found in this article:

MVC: Loading and Saving Documents Through Controller HttpPost Methods