Prerequisites

There are two ways to evaluate the TX Text Control Document Viewer. 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 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/TextControl/GetResource?Resource=minimized.tx-viewer.min.js"></script>
<script src="https://backend.textcontrol.com/TextControl/GetResource?Resource=minimized.tx-viewer-component.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 Document Viewer is a Web Component. Each instance uses an encapsulated shadow DOM with it's own style and markup. The element name of the Web Component is <tx‑document‑viewer> and can be simply added to any HTML page:

<tx-document-viewer
id="viewer1"
settings='{"documentData":"VGV4dCBDb250cm9s", "dock":1, "basePath":"https://backend.textcontrol.com"}'>
</tx-document-viewer>
view raw test.html 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 Viewer from JS</title>
<script src="https://backend.textcontrol.com/TextControl/GetResource?Resource=minimized.tx-viewer.min.js"></script>
<script src="https://backend.textcontrol.com/TextControl/GetResource?Resource=minimized.tx-viewer-component.min.js"></script>
<style>
#txDocumentViewer {
height: 800px;
width: 800px;
}
</style>
</head>
<body>
<tx-document-viewer
id="viewer1"
settings='{"documentData":"VGV4dCBDb250cm9s", "dock":1, "basePath":"https://backend.textcontrol.com"}'>
</tx-document-viewer>
</body>
</html>
view raw test.html hosted with ❤ by GitHub

Learn More

This article gives an overview of the advantages and how those Web Components are integrated.

TX Text Control DocumentViewer Becomes a Web Component