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.
|
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.
|
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.
|