DS Server provides the backend engine to integrate document processing into web applications. Client-side libraries make the integration easy into common platforms such as Angular or ASP.NET Core.

But DS Server can be used with pure JavaScript as well. This tutorial shows how to integrate the document editor into an HTML page using a trial token.

Trial Token

For this tutorial, a trial token is required and can be easily created on the dedicated DS Server website:

Get Token

  1. Include the following line of code in the <head> of an HTML page.

    <script src="https://trial.dsserver.io/documenteditor/JS/ds-server-document-editor.js">
    view raw test.html hosted with ❤ by GitHub
  2. Initialize TXTextControl on any <div> element on your web page by passing a settings object to TXTextControl.init(). Add your personal trial token credentials to the authSettings object (shown in line 31 and 32 in the code below). The following code contains all required elements to create a working document editor in an HTML page:

    <!DOCTYPE html>
    <html>
    <head>
    <title>My first DS Server application</title>
    <script
    src="https://trial.dsserver.io/documenteditor/JS/ds-server-document-editor.js">
    </script>
    </head>
    <body>
    <style>
    #txDocumentEditorContainer {
    width: 1000px;
    height: 600px;
    display: inline-block;
    position: relative;
    }
    </style>
    <h2>DocumentServices.DocumentEditor</h2>
    <div id="txDocumentEditorContainer"></div>
    <script>
    window.addEventListener("load", function () {
    TXTextControl.init({
    containerID: "txDocumentEditorContainer",
    serviceURL: "https://trial.dsserver.io",
    authSettings: {
    clientId: "dsserver.yourclientid",
    clientSecret: "yourclientsecret"
    }
    });
    });
    </script>
    </body>
    </html>
    view raw test.html hosted with ❤ by GitHub
  3. By adding the following JavaScript code to the HTML page, text will be added and formatted programmatically on loading Text Control:

    // use the JavaScript API
    // https://docs.textcontrol.com/47c66f67/
    TXTextControl.addEventListener("textControlLoaded", function() {
    var sel = TXTextControl.selection;
    sel.setText("Welcome to DS Server", function() {
    sel.setStart(11);
    sel.setLength(9);
    sel.setBold(true);
    sel.setFontSize(30);
    });
    });
    view raw test.js hosted with ❤ by GitHub

If you load this HTML page in any browser, you will see a working document editor that connects to our demo server that runs DS Server.

Learn more about DS Server on our dedicated website:

https://www.dsserver.io