Integrate Document Editing into any HTML Client using the HTML Widget

We are providing a concept to support all non ASP.NET web applications such as Angular, React or any other framework and language.

Test this in JSFiddle

This JSFiddle is not longer available.

The following easy steps are required to add the HTML widget to any HTML page:

1. In order to integrate the widget to your HTML page, simply add the following JavaScript tag to the HEAD section:

   <script src="https://labs.textcontrol.com/widget/scripts/txtextcontrol.web.js"></script>

   view raw widget.htm hosted with ❤ by GitHub

2. Then create a container DIV somewhere in your HTML that will host the widget. The editor itself will automatically fill the complete container.

   	<style>
   	#myTextControlContainer {
   	width: 1000px;
   	height: 500px;
   	margin-bottom: 20px;
   	}
   	</style>
   	<div id="myTextControlContainer"></div>

   view raw widget.htm hosted with ❤ by GitHub

3. Finally, in a SCRIPT section, create a new widget by passing the container id in the constructor:

   	<script>
   	var textControl1;
   	window.onload = function() {
   	textControl1 = new TXTextControlWeb("myTextControlContainer");
   	};
   	</script>

   view raw widget.htm hosted with ❤ by GitHub

The object textControl1 is now the instance of the widget and can be used to access it's API to manipulate the document. It is possible to create more than one instance of the editor by creating new object instances with different containers.

The widget has (nearly) the same JavaScript API like the MVC version of TX Text Control Web. All objects, methods, properties and events can be used in the same way. For example, in order to load an HTML document into the editor, the following code can be used:

The documentation shows how to host your own widget:

TX Text Control Widget Programmer's Guide

The hosting widget project is open source and can be modified as required. You will find this project in our GitHub repository.