As of 32.0 SP1, the Document Editor has the new JavaScript property connectionID that returns the unique ID of the WebSocket connection. The WebSocketHandler acts as a proxy between the client-side JavaScript and the TCP synchronization service. This id is used for communication between the editor and the server-side WebSocketHandler for document rendering synchronization.

Now that this ID is publicly available, you can use it to connect to the document instance on the server side and manipulate the document directly in the WebSocketHandler in server-side C# code.

The following JavaScript code shows how to retrieve the connection ID and store it globally.

var connectionID;

 TXTextControl.addEventListener("textControlLoaded", function () {
     connectionID = TXTextControl.connectionID;
 });

Loading Documents

In the first example, a document is loaded directly from the server using the WebSocketHandler. The example consists of a button that calls the loadDocument function.

@using TXTextControl.Web.MVC

@Html.TXTextControl().TextControl().Render()

<input type="button" onclick="loadDocument()" value="Load Document" />

<script>

    var connectionID;

    TXTextControl.addEventListener("textControlLoaded", function () {
        connectionID = TXTextControl.connectionID;
    });

    function loadDocument() {
      $.ajax({
              url: '@Url.Action("LoadDocument")',
              type: 'POST',
              data: { connectionID: connectionID },
      });
    }
    
</script>

The method posts the connection ID to the LoadDocument endpoint. The GetInstance method of the WebSocketHandler returns the instance specified by the connection id. The LoadText method is then used to load the document directly into the instance.

[HttpPost]
public HttpResponseMessage LoadDocument(string ConnectionID)
{
        // connect the WebSocketHandler with the ConnectionID
        WebSocketHandler wsHandler = WebSocketHandler.GetInstance(ConnectionID);

        // the document directly server-side
        wsHandler.LoadText("App_Data/demo.tx", StreamType.InternalUnicodeFormat);

        return new HttpResponseMessage()
        {
                StatusCode = HttpStatusCode.OK
        };
}

Direct loading of a document is shown in the following screen video.

Complex Formatting

For complex formatting tasks, the JavaScript API may be too slow (callbacks). In the following example, we want to highlight the keyword TextControl in a selected area of text.

The doComplexFormatting function calls the DoComplexFormatting server-side method. Before the Http POST method is called, the editor is set to read-only, and upon successful execution, the editor is set back to edit mode.

@using TXTextControl.Web.MVC

@Html.TXTextControl().TextControl().Render()

input type="button" onclick="doComplexFormatting()" value="Complex Formatting" />

<script>

    var connectionID;

    TXTextControl.addEventListener("textControlLoaded", function () {
        connectionID = TXTextControl.connectionID;
    });

    function doComplexFormatting() {

        TXTextControl.editMode = TXTextControl.EditMode.ReadOnly;

        $.ajax({
            url: '@Url.Action("DoComplexFormatting")',
            type: 'POST',
            data: { connectionID: connectionID },
            success: function (data) {
                TXTextControl.editMode = TXTextControl.EditMode.Edit;
            }
        });
    }
</script>

The selection is loaded into a temporary ServerTextControl for manipulation. Found keywords are highlighted in a loop before the selection is saved and loaded back into the editor.

[HttpPost]
public HttpResponseMessage DoComplexFormatting(string ConnectionID)
{
    // connect the WebSocketHandler with the ConnectionID
    WebSocketHandler wsHandler = WebSocketHandler.GetInstance(ConnectionID);

    byte[] data;

    // save the current selection to a byte array
    wsHandler.Selection.Save(out data, BinaryStreamType.InternalUnicodeFormat);

    // load the byte array into a ServerTextControl
    using (TXTextControl.ServerTextControl tx = new TXTextControl.ServerTextControl())
    {
        tx.Create();
        tx.Load(data, TXTextControl.BinaryStreamType.InternalUnicodeFormat);

        // loop through all words and format the word "TextControl"
        for (int i = 0; i < tx.Text.Length; i++)
        {
            tx.Select(i, 1);
            tx.SelectWord();

            if (tx.Selection.Text == "TextControl")
            {
                tx.Selection.Bold = true;
                tx.Selection.Italic = true;
                tx.Selection.ForeColor = Color.Red;

                i += tx.Selection.Text.Length;
            }
        }

        // save the document to a byte array and load it into the WebSocketHandler
        tx.Save(out data, TXTextControl.BinaryStreamType.InternalUnicodeFormat);
        wsHandler.Selection.Load(data, BinaryStreamType.InternalUnicodeFormat);
    }

    return new HttpResponseMessage()
    {
        StatusCode = HttpStatusCode.OK
    };
}

Conclusion

The WebSocketHandler can be used to directly manipulate the document on the server side using C# code. This is a very sufficient way to edit documents, especially for complex formatting tasks.