TE Edit Control for HTML/Javascript

This topic describes the method of directly inserting the editor control into your HTML page using the 'canvas' element. However, the product also contains an ASP.NET wrapper dll called WebTeh.dll. If you are using ASP.NET, please refer to the ASP.NET Interface topic for embedding the editor control into your ASP.NET page.

The distribution file contains a number of files. The editor code is contained in the terh32.js file. Please copy the following files into your project folder, such as: c:\inetpub\wwwroot\myapp

The distribution zip file also a demo file called terh.htm.

Here are the basic steps:

1. Add a script function called ControlCreated which shall be called after the control is created. Here is where you will add statements to customize the control for your need. You can also add statement to catch events. Any event handler function used to catch the events should be physically placed before the 'ControlCreated' event function so browser loads these in proper order.

2. Insert a statement to load the main script called terh32.js .

3. Insert the 'canvas' tag.

4. Call the TerInit function to create the editor in the 'canvas' element.

5. Call the ControlCreated function (step#1).

Here is an example:

NOTE: ALL EDITOR CONSTANT, SUCH AS ID_PASTE, MUST BE PREFIXED WITH A tc. PREFIX

  <!-- Event handler functions -->
  <script>
     function PreprocessEvent(obj,ActionType,ActionId) {
        console.log("Preprocess, object id: ",obj.cvs.id,"type",ActionType,
                      "id: ",ActionId);
     }
     function Hypertext(obj,HText,HCode) {
        if (HCode.indexOf("http://")==0)  window.open(HCode);
        else if (HCode.indexOf("www.")==0) window.open("http://"+HCode);
        else alert("Hypertext: "+HText+"\nCode/url: "+HCode);
     }
  </script>
  <script>
    var tej=null;
    function ControlCreated(te) {
       tej=te;  // save in a global varible for easy access
       tej.TerSetEvent("Preprocess",PreprocessEvent);  // an example of 
                                               //catching the preprocess event
       tej.TerSetEvent("Hypertext",Hypertext);
    }
  </script>
  <!-- Load the main editor javascript file -->
  <!-- This should be done before the canvas tag -->
  <script src="terh32.js"></script>
  <div style="margin-left: 50px;">
    <table><tr>
    <td>
      <div>
      <canvas id="ter1" width="1000" tabindex=0 height="800" 
            style="border: 1px solid;"
        data-word-wrap = "true"
        data-page-mode = "true"
        data-print-view-mode = "true"
        data-fitted-view = "false"
        data-show-menu = "true"
        data-show-status-bar = "true"
        data-show-ruler = "true"
        data-show-vert-ruler = "true"
        data-show-tool-bar = "true"
        data-border-margin = "true"
        data-rtf-output = "true"
        data-read-only-mode = "false"
        data-vert-scroll-bar = "true"
        data-horz-scroll-bar = "true"
      >
        Sorry, this browser does not support HTML 5.
      </canvas>
      </div>
    </td>
    </tr></table>
  </div>
  <!-- Create the editor session within the canvas element created above.
       This should be done after the loading the script (above) and 
       the canvas element (above);
  -->
  <script>
     var te1=TerInit('ter1');    // Create the editor session
     ControlCreated(te1);
  </script>

Please refer to the included terh.htm for a full example.