14

Using DS Server with pure HTML and JavaScript

 3 years ago
source link: https://www.textcontrol.com/blog/2021/01/05/using-ds-server-with-pure-html-and-javascript/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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/txtextcontrol-ds-1.0.0.js">

  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/txtextcontrol-ds-1.0.0.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>

  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); }); });

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://dsserver.io


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK