The ability to initialize the online document editor with pure JavaScript is one of the new features of TX Text Control 32.0. Before, you needed a client-side package like Angular, Node.js, Web Forms, or ASP.NET Core MVC NuGet packages. The ability to create an instance using pure JavaScript also allows the TX Text Control to be used in Blazor as well (this was previously only possible in combination with our low-code solution DS Server).

To load the initial JavaScript, the backend (WebSocketHandler) received a new 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://localhost:7031/api/TXWebSocket/GetResource?name=tx-document-editor.min.js"></script>
view raw test.html hosted with ❤ by GitHub

In the URL above, "localhost:7031" is the location where your backend is running. This can be an ASP.NET (Core) application or a Node.js WebSocket server.

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

TXTextControl.init({
containerID: "txDocumentEditor",
webSocketURL: "wss://localhost:7031/api/TXWebSocket"
});
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://localhost:7031/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://localhost:7031/api/TXWebSocket"
});
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.

This is just one of the new features in version 32.0. Stay tuned for more!