Skip to content
The ASP.NET MVC project that hosts the IFRAME based JavaScript widget wrapper for the HTML5 based editor
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vs
widget Update Index.cshtml Dec 4, 2018
README.md
TextControlJSWidget.sln Changed dictionary name Mar 12, 2018

README.md

Welcome to the Text Control JS Widget

This ASP.NET MVC project hosts the IFRAME based JavaScript widget wrapper for the HTML5 based editor. This technology preview version can be tested in your application simply by adding a JavaScript package to your HTML.

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.

How does this work?

The JavaScript widget project consists of two parts:

  • The hosting "server-side" application (this GitHub project)
  • Your application that consumes this widget

Essentially, the widget lives in an IFRAME which runs this ASP.NET MVC project. The widget provides a JavaScript wrapper API that can be used to program the editor from within your application. The JavaScript communicates with the IFRAME application through window post messages.

Setup

In order to host this widget on your own servers, follow these steps:

  • Download this project and host it on an IIS server.
  • Open the file widget/Scripts/txtextcontrol.web.js and search for this variable:
var m_destinationUrl = "http://localhost:1303/";

Replace the destination URL string with the URL where you are going to host this project. When this hosting project is running, you can integrate the widget simply by adding this JavaScript tag to the HEAD of your HTML:

<script src="http://localhost:1303/widget/scripts/txtextcontrol.web.js"></script>

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>

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>

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:

function loadDocument()
{
	textControl1.loadDocument(
	TXTextControl.StreamType.HTMLFormat, '<strong>This is a test</strong>');
}
You can’t perform that action at this time.