Using DS Server with pure HTML and JavaScript
DS Server comes with client-side libraries for an easy integration into web applications. But DS Server can be also used with pure JavaScript to integrate document processing into web applications.
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:
-
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"> -
Initialize TXTextControl on any
<div>element on your web page by passing a settings object toTXTextControl.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> -
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:
Related Posts
JavaScriptASP.NET CoreDS Server
Merging Templates using DS Server in ASP.NET Core
This sample shows how to merge templates that have been created using DocumentEditor server-side using the DocumentProcessing package with DS Server.
JavaScript: Avoid Flickering and Visual Updates by Grouping Undo Steps
The JavaScript API can be used to group several steps into one undo action that can be undone with a single undo call. Additionally, those groups are visually updated at once to avoid screen…
DS Server or TX Text Control? Different Deployment Scenarios
The Text Control document processing technology can be deployed in various ways using different products for different applications. This overview explains the differences and deployment strategies.
Document Editor: JavaScript Object Availability and Order of Events
The online document editor, available for MVC and Angular, provides a JavaScript API to manipulate the document and the style and behavior of the editor. This article explains the order of events…
Using TX Text Control .NET Server in Blazor Server Apps
The TX Text Control document editor and the server-side non-UI component ServerTextControl can be used in Blazor Server Apps. This article shows how to save documents to the server and how to…