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.
-
Development Environment
-
Install Node.js® and npm, if not done before.
-
Open a Command Prompt and install the Angular CLI globally by typing in the following command:
npm install -g @angular/cli
-
-
Create a new project
-
Open a Command Prompt and create a new project and default app by typing in the following command:
ng new my-app
-
-
Adding the widget
-
Open src/app/app.component.css and add some CSS to the widget:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters#myTextControlContainer { width: 1000px; height: 500px; margin-bottom: 20px; } -
Open src/app/app.component.html and add the widget DIV container:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters<div id="myTextControlContainer"></div> -
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters<!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> In this step, if you host the widget on your own server, change the location of the script.
-
-
Serve the Application
-
Open a Command Prompt, change to the project directory and serve the application by typing in the following command:
ng serve --openYour default browser will be opened with your served application.
-
-
Accessing the Widget API
-
The global variable textControl1 can now be used to access the API. The following sample JavaScript will load an HTML document into the editor:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersfunction loadDocument() { textControl1.loadDocument( TXTextControl.StreamType.HTMLFormat, '<strong>This is a test</strong>'); }
-