Prerequisites

There are two ways to evaluate the TX Text Control Document Editor. You can either host your own backend by downloading the trial version of TX Text Control .NET Server for ASP.NET, or by creating a trial access token to use a hosted backend, valid for 30 days:

Creating the Application

To load the initial JavaScript, the backend (WebSocketHandler) provides an endpoint that returns the required JavaScript. This endpoint can be used in a script tag in HTML to embed the required JavaScript code.

<script src="https://backend.textcontrol.com/api/TXWebSocket/GetResource?name=tx-document-editor.min.js"></script>
view raw test.html hosted with ❤ by GitHub

Backend

The above script references the hosted test backend. If you host it yourself, replace the URL with your backend.

The JavaScript init method is used to initialize the Document Editor in a given div element.

TXTextControl.init({
containerID: "txDocumentEditor",
webSocketURL: "wss://backend.textcontrol.com/api/TXWebSocket?access-token=your_trial_token"
});
view raw test.js hosted with ❤ by GitHub

The complete HTML page would look like this. The element in which the editor is created is the div element with the id txDocumentEditor.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>TX Text Control Document Editor from JS</title>
<script
src="https://backend.textcontrol.com/api/TXWebSocket/GetResource?name=tx-document-editor.min.js">
</script>
<style>
#txDocumentEditor {
height: 800px;
width: 800px;
}
</style>
</head>
<body>
<div id="txDocumentEditor"></div>
<script type="module">
TXTextControl.init({
containerID: "txDocumentEditor",
webSocketURL: "wss://backend.textcontrol.com/api/TXWebSocket?access-token=your_trial_token"
});
var documentString = "Hey - it compiles! <strong>Ship it!</strong>";
TXTextControl.addEventListener("textControlLoaded", function () {
TXTextControl.loadDocument(TXTextControl.StreamType.HTMLFormat, btoa(documentString));
});
</script>
</body>
</html>
view raw test.html hosted with ❤ by GitHub

The textControlLoaded event is attached to the TXTextControl element to load a document after the editor is initialized.