Getting Started: Document Editor with JavaScript
This article shows how to use the TX Text Control document editor in a pure HTML and JavaScript environment.
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, or by creating a trial access token to use a hosted backend, valid for 30 days:
- Download Trial Version
Setup download and installation required.- Create Trial Access Token
No download and local installation required.
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>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"
});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>The textControlLoaded event is attached to the TXTextControl element to load a document after the editor is initialized.
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…
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…
Building an ASP.NET Core Backend Application to Host the Document Editor and…
This article explains how to create an ASP.NET Core backend application to host the Document Editor and Document Viewer. This backend application is required to provide the required functionality…
JavaScriptASP.NET CoreDocument Viewer
Getting Started: Document Viewer with JavaScript
This article shows how to use the TX Text Control document viewer in a pure HTML and JavaScript environment.
ASP.NETASP.NET CoreDocument Editor
Getting Started Video Tutorial: Document Editor in ASP.NET Core C# on Linux
This video tutorial shows how to use the Document Editor in an ASP.NET Core application using C# and deploy on Linux using Docker. This tutorial is part of the TX Text Control Getting Started…