The HTML5 based editor available for MVC and Web Forms is an ASP.NET component that requires a Windows Server and IIS. The Widget implementation can be hosted on a separate server or easily deployed using Docker Containers and used in any platform including Angular, Node.js or .NET Core.

This beginner tutorial shows how to create a simple Angular application and how to add the widget to a component. This tutorial is based on the QuickStart tutorial documented on the official Angular website.

  1. Development Environment

    1. Install Node.js® and npm, if not done before.

    2. Open a Command Prompt and install the Angular CLI globally by typing in the following command:

      npm install -g @angular/cli

  2. Create a new project

    1. Open a Command Prompt and create a new project and default app by typing in the following command:

      ng new my-app

  3. Adding the widget

    1. Open src/app/app.component.css and add some CSS to the widget:

      #myTextControlContainer {
      width: 1000px;
      height: 500px;
      margin-bottom: 20px;
      }
      view raw test.css hosted with ❤ by GitHub

    2. Open src/app/app.component.html and add the widget DIV container:

      <div id="myTextControlContainer"></div>
      view raw test.htm hosted with ❤ by GitHub

    3. Finally, open the main HTML file src/index.html and add the widget JavaScript to the HEAD element and a global variable to access the Text Control object for demo purposes. In real-world applications, you might want to import the JavaScript and export the interface to TypeScript.

      <!doctype html>
      <html lang="en">
      <head>
      <meta charset="utf-8">
      <title>MyApp</title>
      <base href="/">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
      <script src="https://labs.textcontrol.com/widget/scripts/txtextcontrol.web.js"></script>
      </head>
      <body>
      <app-root></app-root>
      <script>
      var textControl1;
      window.onload = function() {
      textControl1 = new TXTextControlWeb("myTextControlContainer");
      };
      </script>
      </body>
      </html>
      view raw index.htm hosted with ❤ by GitHub

      In this step, if you host the widget on your own server, change the location of the script.

  4. Serve the Application

    1. Open a Command Prompt, change to the project directory and serve the application by typing in the following command:

      ng serve --open

      Your default browser will be opened with your served application.

  5. Accessing the Widget API

    1. The global variable textControl1 can now be used to access the API. The following sample JavaScript will load an HTML document into the editor:

      function loadDocument()
      {
      textControl1.loadDocument(
      TXTextControl.StreamType.HTMLFormat,
      '<strong>This is a test</strong>');
      }
      view raw test.js hosted with ❤ by GitHub