Sneak Peek: Using the Document Editor with Pure JavaScript
The current version of the Document Editor requires the use of one of the client packages such as Angular or ASP.NET Core MVC. In the next version, the Document Editor will be able to be initialized with pure JavaScript.
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>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"
});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>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!
Related Posts
JavaScriptASP.NET CoreDocument Editor
Format Painter in ASP.NET Core: Building Custom Text Formatting with TX Text…
This article demonstrates how to build a Format Painter feature using the TX Text Control Document Editor, implementing format detection, copy and paste operations, and custom style handling…
AngularJavaScriptDocument Editor
Getting Started: Document Editor Version 33.0 with Angular CLI 19.0
This article shows how to use the TX Text Control Document Editor version 33.0 npm package for Angular within an Angular CLI 19.0 application. It uses the trial backend running on our servers, but…
Using the Document Editor in SPA Applications using the removeFromDom Method
This article shows how to use the removeFromDom method to remove the Document Editor from the DOM when it is no longer needed. This is useful when the Document Editor is used in a Single Page…
Observe When the Reporting Preview Tab is Active Using MutationObserver
This article shows how to observe when the Reporting Preview tab is active using MutationObserver. The Reporting Preview tab is a feature of the TX Text Control Document Editor that allows you to…
ASP.NETJavaScriptDocument Editor
Removing Empty Pages in TX Text Control with JavaScript
TX Text Control offers a C# solution for removing empty pages already. However, implementing this in JavaScript provides more flexibility for web environments. By using JavaScript methods to…