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, 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 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>

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>

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>

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