Home 

Requirements 

Whats New 

Features 

Architechure 

Security 

License Agreement 


    Evaluation 

    Deployment 

    Using 

Interface 

ASP 

Submitting 

Customization 

Settings 

Programming 

DB Integration 

Image Library 

Custom Buttons 

Presentation 


    Contact Us 

 

Modifying the settings

By editing the HTMLRichTextAreaFactorySettings.js file or a copy of it you can readily change the way the HTML Rich Text Area behaves. This page describes all of the settings that can be modified.

IMG_DIRECTORY

The path to the directory that contains the images used by the HTML Rich Text Area.

    var IMG_DIRECTORY = "/inc/HTMLRTAImages/";

CSS_FILE

A reference to an optional Cascading Style Sheet file that is used by your web site. This CSS file will be used when editing or displaying the HTML.

    var CSS_FILE = "inc/HTMLRichTextArea.css";

WBSC_FILE

A reference to the tcpIQ Web Browser Spell Check file that is to be used by the HTML Rich Text Area. This will only be used when the HTML Rich Text Area has been purchased with the Web Browser Spell Check.

    var WBSC_FILE = "/HTMLRichTextArea13/inc/WBSC/HTMLSpellCheckWord.html";

IMAGELIBRARY

A reference to the Library.asp file that is used to add images from your web site graphic library and to upload new graphics. This is only available if your web server is IIS.

    var IMAGELIBRARY = "/HTMLRichTextArea13/inc/Library.asp";

BODYSTYLE

Set the default style for the web page. This Attribute is placed inside the <BODY style='....'>. Normally you would use it to set font sizes, colors, background color and background images.

For more information: http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/body.asp

If you are unfamiliar with HTML and CSS then you can readily generate these statements by going into any fully featured HTML editor like Microsoft Front Page and design the page the way you want it to look. Then go into the HTML and look for the text ''. The xxxxxx is what you need to copy and paste into the statement below between the inverted commas. Several examples have already been provided

    Set the body style to nothing
    var BODYSTYLE = "";

    Set the background to red, beige, or yellow using different techniques
    var BODYSTYLE = "background-color:#f06060";
    var BODYSTYLE = "background-color:beige";
    var BODYSTYLE = "background-color:yellow";

    Set a tiled image for the background
    var BODYSTYLE = "background-image:url(http://www.tcpiq.com/images/tcpiqbanner.jpg)";

    Set the default font to Courier 10 pt bold.
    var BODYSTYLE = "font:bold 10pt Courier";

    Use combination of styles
    var BODYSTYLE = "font:bold 10pt Courier;background-color:beige";
INSERTBRTAGONENTER

By default MSHTML editor wants to insert a <P> whenever an 'enter' is hit. This will appear as a double line. Set INSERTBRTAGONENTER = true to override the default behavior to make 'Enter' insert a <BR> instead which appears as a single line.

INSERTBRTAGONENTER

If INSERTBRTAGONENTER is true then what happens to shift-enter? To make shift-enter do a <p> tag then set the following to be true. This will only take effect if INSERTBRTAGONENTER = true;

SHOWSOURCEBUTTON

Declares whether the 'src' source button that reveals the HTML should be displayed.

SHOWPRINTER

Declares whether the printer icon is displayed.

SHOWUNDOREDO

Declares whether to show the undo/redo button

SHOWPRESENTATIONBUTTONS

Declares whether the bold, italic and strikethrough options should be available

SHOWADDITIONAL
PRESENTATIONBUTTONS





Declares whether to show the clear formatting, indentations, left, right and center alignments

SHOWSUPERSUBSCRIPT

Declares whether the super and script menu buttons should be displayed

SHOWABSOLUTEPOSITIONING

Declares whether the absolute positioning should be displayed or not

SHOWSPECIALCHARACTERS

Declares whether to show the emoticons and special characters

SHOWLIST

Declares whether the numbered and outlined lists menu buttons should be displayed

SHOWTABLESUPPORT





Declares whether table support is included or not

SHOWFONTSTYLEMODIFICATION

Declares whether font style modification is available. Namely, font face and size

SHOWHEADINGDROPDOWN

Declares whether the heading drop down list is available

SHOWCOLORSELECTION

Declares whether the foreground and background colors can be selected

SHOWHYPERLINKBUTTON

Declares whether the hyperlink button is available.

SHOWADDFROMLIBRARY

Declares whether the add from library is available. This requires an IIS Web Server.

SHOWADDIMAGEBUTTON

Declares whether the add image button is available.

SHOWHORIZONTALRULE

Declares whether to show the horizontal rule toolbar button

FONTLIST

Declares a list of all of the fonts that are used. The default list is:

    FONTLIST = new Array(
    "Verdana, Arial, sans-serif",
    "Century",
    "Courier New",
    "Tahoma",
    "Times New Roman",
    "Verdana"
    );

SHOWFONTSIZESINPOINTS

Declares whether the font sizes should be displayed as 1 to 7 or 8pt to 36pt.

SHOWCURSORASHAND

Declares whether the cursor (the mouse pointer) changes to a hand while over active toolbar buttons or whether it remains the default mouse pointer.

SHOWCUTCOPYPASTE

Declares whether to show the cut, copy and paste buttons

INDENTSMAKEBLOCKQUOTES

Declare whether an indent makes a blockquote irrespective of whether it is indenting a list or not. Normally, indenting an ordered or unordered list will create another UL or OL tag. Setting this to TRUE will force a blockquote to be entered instead.

SHOWBOGUSTOOLBARHANDLES

Declares whether to show the non functional toolbar handles at the beginning of each toolbar row. It gives WinXP/OfficeXP type feel to it.

SHOWSPELLCHECKBUTTON

Declares whether or not to show the spell checker. tcpIQ's Web Browser Spell Check needs to be installed for this feature to work. More information can be found at http://www.tcpiq.com/tcpiq/SpellCheck/Default.asp

SHOWFINDBUTTON

Declares whether or not to show the 'find' button.

SHOWTOOLBARSPACERS

Declares whether to show the spacers between toolbar buttons that are logically grouped together

SHOWSTATUSBAR

Declares whether to show the status bar at the bottom

SHOWDATETIME

Declares whether to show the date / time buttons

SIZESINPERCENT

The HTML RTA can either be fixed width, or its width can be proportional to the width of its container. In this case the HTML RTA will shrink and grow as the browser window is resized by the user. This setting specifies whether the width that is passed in through the arguments represents a percentage (true) or whether it is the size in pixels (false). The height is always the height in pixels. When passing in the argument do not include the '%'. The code will do this automatically.

MINBUTTONROWWIDTH

When the SIZESINPERCENT equals true, you have to specify the width of the toolbar. It is not possible to dynamically resize it. The HTML RTA will not shrink below this width. A value of 500 is generally used.

    var MINBUTTONROWWIDTH = 500;

EDITORMARGIN

This is the margin around editable area and the border in pixels.

    var EDITORMARGIN = 2;

SHOWHTMLRTABORDER

Declares whether to show a border around the entire HTML RTA. Setting this to false means that you should probably provide your own type of border.


SHOWHTMLRTABORDER

If SHOWHTMLRTABORDER = true then declare the size of the border, color and border style

    var HTMLRTABORDERSIZE = 1;
    var HTMLRTABORDERCOLOR = "#ECE9D8";
    var HTMLRTABORDERSTYLE = "BORDER-RIGHT: #7F7C75 1px solid; BORDER-BOTTOM: #7F7C75 1px solid;BORDER-LEFT: #E0E0E0 1px solid; BORDER-TOP: #E0E0E0 1px solid";

strOrderedListType

Declares the way ordered lists are displayed

    Associate numbers with each item in an ordered list.
    var strOrderedListType = "1";

    Associate lowercase letters with each item in an ordered list.
    var strOrderedListType = "a";

    Associate uppercase letters with each item in an ordered list.
    var strOrderedListType = "A";

    Associate small Roman numerals with each item in an ordered list.
    var strOrderedListType = "i";

    Associate large Roman numerals with each item in an ordered list.
    var strOrderedListType = "I";

strUnOrderedListType

Declares the way unordered lists are displayed

    Associate a solid disc with each item in an unordered list.
    var strUnOrderedListType = "disc";

    Associate a hollow circle with each item in an unordered list.
    var strUnOrderedListType = "circle";

    Associate a solid square with each item in an unordered list.
    var strUnOrderedListType = "square";

MAXUNDOSIZE

Declares the maximum undo buffer size.

    var MAXUNDOSIZE = 20;

EVENTCATCHER

The name of a javascript function that will be called whenever a change it made to the HTML Rich Text Area.

    Default - do nothing
    var EVENTCATCHER = "";

    Example - display a message whenever it changes.
    var EVENTCATCHER = "alert('Hello world')";

EVENTHTMLRTALOADED

The name of a javascript function that will be called when the HTML Rich Text Area loads. It is not possible to hook into the page_onload event since display of the HTML RTA happens independently of this.

    Default - do nothing
    var EVENTHTMLRTALOADED = "";

    Example - display a message when the HTML RTA loads.
    var EVENTHTMLRTALOADED = "alert('Hello world')";

    Example - set the contents of the HTML RTA with default text.
    var EVENTHTMLRTALOADED = 'GetEditorRef(iframeId).body.innerHTML = "It is now set to this";';

EVENTONKEYDOWN

The name of a javascript function that will be called when the user presses a key. See EVENTHTMLRTALOADED for examples.

EVENTONKEYUP

The name of a javascript function that will be called when the user releases a key. See EVENTHTMLRTALOADED for examples.

EVENTFOCUSIN

The name of a javascript function that will be called when HTML RTA receives the focus. See EVENTHTMLRTALOADED for examples.

EVENTFOCUSOUT

The name of a javascript function that will be called when HTML RTA loses the focus. See EVENTHTMLRTALOADED for examples.

SHOWCUSTOMBUTTONx
CUSTOMBUTTONxCALLBACKTOOLTIP
CUSTOMBUTTONxCALLBACK
CUSTOMBUTTONxIMAGE


These variables are used to assign custom functionality to buttons on the toolbar. The settings are discussed in depth in Toolbar Customization.



(c) Copyright 2004
Sigma Solutions
tcpIQ is a member of the Sigma Solutions group