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

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>
view raw test.cshtml hosted with ❤ by GitHub

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

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

Loading using WebSocketHandler

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.

Formatting using WebSocketHandler

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>
view raw test.cshtml hosted with ❤ by GitHub

The selection is loaded into a temporary ServerTextControl ╰ TX Text Control .NET Server for ASP.NET
╰ TXTextControl Namespace
╰ ServerTextControl Class
The ServerTextControl class implements a component that provide high-level text processing features for server-based applications. 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
};
}
view raw test.cs hosted with ❤ by GitHub

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.