killer5
asked on
Unable to set focus on HTC div element
parent.asp
editBox.htc
I have a HTC component being instantiated in parent.asp. The HTC has an editable DIV (myDIV.contentEditable = "True") and some buttons that formats the selected text inside the DIV element (Bold, Italic, Underline).
THE PROBLEM:
Once the page is loaded, the innerHTML of the editable DIV has a default value which consists of several paragraphs. Some are left-aligned and some are right-aligned (do this when recreating the problem). The first time I select text inside the div tag, no problem occurs. But when I set the focus on a textbox in the parent.asp, then, go back to the editable DIV to select some texts, nothing happens; it is as if the editable DIV is disabled. :(
Has anyone encountered this before? What can be done in the HTC file for this to work properly?
editBox.htc
I have a HTC component being instantiated in parent.asp. The HTC has an editable DIV (myDIV.contentEditable = "True") and some buttons that formats the selected text inside the DIV element (Bold, Italic, Underline).
THE PROBLEM:
Once the page is loaded, the innerHTML of the editable DIV has a default value which consists of several paragraphs. Some are left-aligned and some are right-aligned (do this when recreating the problem). The first time I select text inside the div tag, no problem occurs. But when I set the focus on a textbox in the parent.asp, then, go back to the editable DIV to select some texts, nothing happens; it is as if the editable DIV is disabled. :(
Has anyone encountered this before? What can be done in the HTC file for this to work properly?
Post relevant code needed to recreate the problem. It's impossible to say otherwize...
ASKER
here's the code of the HTC component
<PUBLIC:COMPONENT tagName="editBox">
<PUBLIC:DEFAULTS viewLinkContent/>
<PUBLIC:METHOD NAME="initEditBox" />
<PUBLIC:PROPERTY ID="editorSize" NAME="editorSize" PUT="setEditorSize" />
<PUBLIC:PROPERTY ID="boxContent" NAME="boxContent" PUT="setBoxContent" GET="getBoxContent" />
<STYLE>
.buttonClass
{
BORDER-RIGHT: #d6d3ce 1px solid;
BORDER-TOP: #d6d3ce 1px solid;
BORDER-LEFT: #d6d3ce 1px solid;
BORDER-BOTTOM: #d6d3ce 1px solid;
}
.tdClass
{
PADDING-LEFT: 7px;
PADDING-TOP: 1px;
}
.Divider
{
BORDER-RIGHT: #ffffff 1px solid;
BORDER-TOP: #bbbbbb 1px solid;
BORDER-LEFT: #bbbbbb 1px solid;
WIDTH: 2px;
BORDER-BOTTOM: #ffffff 1px solid;
HEIGHT: 30px;
BACKGROUND-COLOR: #dddddd;
}
</STYLE>
<SCRIPT LANGUAGE="Javascript">
//************************ ********** *******
//PRIVATE VARIABLES
//************************ ********** *******
var intEditorSize = 3; //1-small; 2-medium; 3-large (default)
var viewMode = 1; // 1-WYSIWYG ; 2-HTML
var strBoxContent = ''; //content of editbox
//INITIALIZE ROW STRINGS
//table for the editor
var strRowToolbox1 = '<table width=100% border="0" cellspacing="0" cellpadding="0" bgcolor="#D6D3CE">\n' +
'<tr><td class="tdClass" id="composerCtrls">';
//font list
var strRowToolbox2 = '<!--FONT LIST-->' +
'<div onclick="hideFontList();" id="lstFont" name="lstFont" align=left style="height:180; width:121; top:30px; left:15px; background-color:white; position:absolute; border:#737373 solid 1px; visibility:hidden; z-index=100">\n' +
'<table width=100% cellpadding=5 cellspacing=0 border=0>\n' +
'<tr><td onmouseover="this.style.ba ckgroundCo lor=\'#ddd ddd\';wind ow.status= \'\';retur n true;" onMouseOut="this.style.bac kgroundCol or=\'white \';"><font face=\'arial\' size=-1><a href="#" onclick="javascript:change Font(\'ari al\');" style="text-decoration:non e;color:bl ack;width: 100%;">Ari al</a></fo nt></td></ tr>\n' +
'<tr><td onmouseover="this.style.ba ckgroundCo lor=\'#ddd ddd\';wind ow.status= \'\';retur n true;" onMouseOut="this.style.bac kgroundCol or=\'white \';"><font face=\'arial narrow\' size=-1><a href="#" onclick="javascript:change Font(\'ari al narrow\');" style="text-decoration:non e;color:bl ack;width: 100%;">Ari al Narrow</a></font></td></tr >\n' +
'<tr><td onmouseover="this.style.ba ckgroundCo lor=\'#ddd ddd\';wind ow.status= \'\';retur n true;" onMouseOut="this.style.bac kgroundCol or=\'white \';"><font face=\'arial black\' size=-1><a href="#" onclick="javascript:change Font(\'ari al black\');" style="text-decoration:non e;color:bl ack;width: 100%;width :100%;">Ar ial Black</a></font></td></tr> \n' +
'<tr><td onmouseover="this.style.ba ckgroundCo lor=\'#ddd ddd\';wind ow.status= \'\';retur n true;" onMouseOut="this.style.bac kgroundCol or=\'white \';"><font face=\'courier\' size=-1><a href="#" onclick="javascript:change Font(\'cou rier\');" style="text-decoration:non e;color:bl ack;width: 100%;">Cou rier</a></ font></td> </tr>\n' +
'<tr><td onmouseover="this.style.ba ckgroundCo lor=\'#ddd ddd\';wind ow.status= \'\';retur n true;" onMouseOut="this.style.bac kgroundCol or=\'white \';"><font face=\'system\' size=-1><a href="#" onclick="javascript:change Font(\'sys tem\');" style="text-decoration:non e;color:bl ack;width: 100%;">Sys tem</a></f ont></td>< /tr>\n' +
'<tr><td onmouseover="this.style.ba ckgroundCo lor=\'#ddd ddd\';wind ow.status= \'\';retur n true;" onMouseOut="this.style.bac kgroundCol or=\'white \';"><font face=\'times new roman\' size=-1><a href="#" onclick="javascript:change Font(\'tim es new roman\');" style="text-decoration:non e;color:bl ack;width: 100%;">Tim es New Roman</a></font></td></tr> \n' +
'<tr><td onmouseover="this.style.ba ckgroundCo lor=\'#ddd ddd\';wind ow.status= \'\';retur n true;" onMouseOut="this.style.bac kgroundCol or=\'white \';"><font face=\'verdana\' size=-1><a href="#" onclick="changeFont(\'verd ana\');" style="text-decoration:non e;color:bl ack;width: 100%;">Ver dana</a></ font></td> </tr>\n' +
'</table>\n' +
'</div>\n\n' +
'<!-- TOOLBOX -->\n' +
'<img alt="Font" class="buttonClass" src="../images/font.gif" ondrag="return false;" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this) " onMouseUp="selUp(this)" onclick="showFontList();" WIDTH="22" HEIGHT="22">\n' +
'<span class="Divider"></span>';
//span of toolbox commands
var strRowToolbox3 = '<span onclick="hideFontList();"> ';
//bold/underline/italics
var strRowToolbox4 = '<img alt="Bold" class="buttonClass" src="../images/bold.gif" ondrag="return false;" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this) " onMouseUp="selUp(this)" onClick="formatText(\'bold \')" WIDTH="23" HEIGHT="22">\n' +
'<img alt="Italic" class="buttonClass" src="../images/italic.gif" ondrag="return false;" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this) " onMouseUp="selUp(this)" onClick="formatText(\'ital ic\')" WIDTH="23" HEIGHT="22">\n' +
'<img alt="Underline" class="buttonClass" src="../images/underline.g if" ondrag="return false;" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this) " onMouseUp="selUp(this)" onClick="formatText(\'unde rline\')" WIDTH="23" HEIGHT="21">\n' +
'<span class="Divider"></span>';
//others toolbar options
var strRowToolbox5 = '<img alt="Left" class="buttonClass" src="../images/left.gif" ondrag="return false;" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this) " onMouseUp="selUp(this)" onClick="formatText(\'just ifyleft\') " WIDTH="23" HEIGHT="22">\n' +
'<img alt="Center" class="buttonClass" src="../images/center.gif" ondrag="return false;" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this) " onMouseUp="selUp(this)" onClick="formatText(\'just ifycenter\ ')" WIDTH="23" HEIGHT="22">\n' +
'<img alt="Right" class="buttonClass" src="../images/right.gif" ondrag="return false;" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this) " onMouseUp="selUp(this)" onClick="formatText(\'just ifyright\' )" WIDTH="23" HEIGHT="22">\n' +
'<span class="Divider"></span>\n\ n' +
'<img alt="Decrease Indent" class="buttonClass" src="../images/outdent.gif " ondrag="return false;" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this) " onMouseUp="selUp(this)" onClick="formatText(\'outd ent\')" WIDTH="22" HEIGHT="22">\n' +
'<img alt="Increase Indent" class="buttonClass" src="../images/indent.gif" ondrag="return false;" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this) " onMouseUp="selUp(this)" onClick="formatText(\'inde nt\')" WIDTH="22" HEIGHT="22">\n' +
'<span class="Divider"></span>\n\ n' +
'<img alt="Create Hyperlink" class="buttonClass" src="../images/link.gif" ondrag="return false;" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this) " onMouseUp="selUp(this)" onClick="formatText(\'crea telink\')" WIDTH="23" HEIGHT="22">\n' +
'<span class="Divider"></span>';
//closes section 3
var strRowToolbox6 = '</span>';
//closes section 1
var strRowToolbox7 = '</table>';
//Toggle View
var strRowToggle = '<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#D6D3CE">\n' +
'<td class="tdClass" align="left">\n' +
'<img ondrag="return false;" onclick="hideFontList();To ggleView() ;" alt="Toggle Mode" class="buttonClass" src="../images/mode.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this) " onMouseUp="selUp(this)" WIDTH="23" HEIGHT="22">\n' +
'<span class="Divider"></span>\n' +
'</td>\n' +
'</table>';
//************************ ********** *******
//PUBLIC PROPERTIES
//************************ ********** *******
function setEditorSize(vValue){
intEditorSize = vValue;
}
function setBoxContent(vValue){
strBoxContent = vValue;
composer.innerHTML = strBoxContent;
}
function getBoxContent(){
strBoxContent = composer.innerHTML;
return strBoxContent;
}
//************************ ********** *******
//END - PUBLIC PROPERTIES
//************************ ********** *******
//************************ ********** *******
//PUBLIC METHODS
//************************ ********** *******
function initEditBox(){
//Ensure that all document elements except the content editable DIV are unselectable.
for (i=0; i<document.all.length; i++)
document.all(i).unselectab le = "on";
composer.unselectable = "off";
//Clear any text in the Document window and set the focus.
composer.innerHTML = "";
//Toolbox Compact Mode
if (intEditorSize == 1){
//render toolbox row
rowToolbox.innerHTML = strRowToolbox1 + '\n' +
strRowToolbox3 + '\n' +
strRowToolbox4 + '\n' +
strRowToolbox6 + '\n' +
strRowToolbox7;
//set height of editor
composer.style.height = "25";
}
else
if (intEditorSize == 2){
//render toolbox row
rowToolbox.innerHTML = strRowToolbox1 + '\n' +
strRowToolbox2 + '\n' +
strRowToolbox3 + '\n' +
strRowToolbox4 + '\n' +
strRowToolbox5 + '\n' +
strRowToolbox6 + '\n' +
strRowToolbox7;
//set height of editor
composer.style.height = "148"; //minimum size
//render toggle view
rowToggle.innerHTML = strRowToggle;
}
else
if (intEditorSize == 3){
//render toolbox row
rowToolbox.innerHTML = strRowToolbox1 + '\n' +
strRowToolbox2 + '\n' +
strRowToolbox3 + '\n' +
strRowToolbox4 + '\n' +
strRowToolbox5 + '\n' +
strRowToolbox6 + '\n' +
strRowToolbox7;
//set height of editor
composer.style.height = "200";
//render toggle view
rowToggle.innerHTML = strRowToggle;
}
}
//************************ ********** *******
//END - PUBLIC METHODS
//************************ ********** *******
//************************ ********** *******
//TOOLBOX FUNCTIONS
//************************ ********** *******
//switch View (HTML, WYSIWYG)
function ToggleView(){
var iHTML;
var iText;
if (viewMode == 1){
iHTML = composer.innerHTML;
composer.innerText = iHTML;
// Hide all controls
composerCtrls.style.displa y = 'none';
composer.focus();
viewMode = 2; // Code
}
else {
iText = composer.innerText;
composer.innerHTML = iText;
// Show all controls
composerCtrls.style.displa y = 'inline';
composer.focus();
viewMode = 1; // WYSIWYG
}
}
//mouseover
function selOn(ctrl){
ctrl.style.borderColor = '#000000';
ctrl.style.backgroundColor = '#B5BED6';
ctrl.style.cursor = 'hand';
}
//mouseout
function selOff(ctrl){
ctrl.style.borderColor = '#D6D3CE';
ctrl.style.backgroundColor = '#D6D3CE';
}
//onmousedown (click)
function selDown(ctrl){
ctrl.style.backgroundColor = '#8492B5';
}
//onmouseup
function selUp(ctrl){
ctrl.style.backgroundColor = '#B5BED6';
}
//hide font list
function hideFontList(){
//this function is called in the onclick events of the editor and fontlist
//you have to set the editable prop dynamically to enable the
//editor properly. if not done, the contents will not be selectable.
composer.contentEditable = "True";
if (intEditorSize == 2 | intEditorSize == 3){
var myFrame = document.getElementById("l stFont");
if (myFrame.style.visibility = 'visible'){
myFrame.style.visibility = 'hidden';
}
composer.focus();
}
}
//execute toolbar commands
function formatText(formatType){
hideFontList();
composer.focus();
composer.document.execComm and(format Type);
}
//execute toolbar commands
function changeFont(fontFamily){
composer.document.execComm and('fontn ame', false, fontFamily);
}
//show font list
function showFontList(){
var myFrame = document.getElementById("l stFont");
if (myFrame.visibility == 'visible')
myFrame.style.visibility = 'hidden'
else
myFrame.style.visibility = 'visible';
}
//************************ ********** *******
//END - TOOLBOX FUNCTIONS
//************************ ********** *******
</SCRIPT>
<table width=100% border="1" cellspacing="0">
<tr><td id=rowToolbox>
<!--DYNAMICALLY POPULATE THIS SECTION TO AVOID UNNECESSARY SCROLL BARS-->
</td>
</tr>
<tr><td>
<!--EDITOR-->
<div onclick="hideFontList();" id="composer" style="height:25; width:100%; background-color:white; font-face:Arial; font-size:14; padding:3; overflow=auto;">
</div>
</td>
</tr>
<tr><td id=rowToggle>
<!--DYNAMICALLY POPULATE THIS SECTION TO AVOID UNNECESSARY SCROLL BARS-->
</td>
</tr>
</table>
</PUBLIC:COMPONENT>
<PUBLIC:COMPONENT tagName="editBox">
<PUBLIC:DEFAULTS viewLinkContent/>
<PUBLIC:METHOD NAME="initEditBox" />
<PUBLIC:PROPERTY ID="editorSize" NAME="editorSize" PUT="setEditorSize" />
<PUBLIC:PROPERTY ID="boxContent" NAME="boxContent" PUT="setBoxContent" GET="getBoxContent" />
<STYLE>
.buttonClass
{
BORDER-RIGHT: #d6d3ce 1px solid;
BORDER-TOP: #d6d3ce 1px solid;
BORDER-LEFT: #d6d3ce 1px solid;
BORDER-BOTTOM: #d6d3ce 1px solid;
}
.tdClass
{
PADDING-LEFT: 7px;
PADDING-TOP: 1px;
}
.Divider
{
BORDER-RIGHT: #ffffff 1px solid;
BORDER-TOP: #bbbbbb 1px solid;
BORDER-LEFT: #bbbbbb 1px solid;
WIDTH: 2px;
BORDER-BOTTOM: #ffffff 1px solid;
HEIGHT: 30px;
BACKGROUND-COLOR: #dddddd;
}
</STYLE>
<SCRIPT LANGUAGE="Javascript">
//************************
//PRIVATE VARIABLES
//************************
var intEditorSize = 3; //1-small; 2-medium; 3-large (default)
var viewMode = 1; // 1-WYSIWYG ; 2-HTML
var strBoxContent = ''; //content of editbox
//INITIALIZE ROW STRINGS
//table for the editor
var strRowToolbox1 = '<table width=100% border="0" cellspacing="0" cellpadding="0" bgcolor="#D6D3CE">\n' +
'<tr><td class="tdClass" id="composerCtrls">';
//font list
var strRowToolbox2 = '<!--FONT LIST-->' +
'<div onclick="hideFontList();" id="lstFont" name="lstFont" align=left style="height:180; width:121; top:30px; left:15px; background-color:white; position:absolute; border:#737373 solid 1px; visibility:hidden; z-index=100">\n' +
'<table width=100% cellpadding=5 cellspacing=0 border=0>\n' +
'<tr><td onmouseover="this.style.ba
'<tr><td onmouseover="this.style.ba
'<tr><td onmouseover="this.style.ba
'<tr><td onmouseover="this.style.ba
'<tr><td onmouseover="this.style.ba
'<tr><td onmouseover="this.style.ba
'<tr><td onmouseover="this.style.ba
'</table>\n' +
'</div>\n\n' +
'<!-- TOOLBOX -->\n' +
'<img alt="Font" class="buttonClass" src="../images/font.gif" ondrag="return false;" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)
'<span class="Divider"></span>';
//span of toolbox commands
var strRowToolbox3 = '<span onclick="hideFontList();">
//bold/underline/italics
var strRowToolbox4 = '<img alt="Bold" class="buttonClass" src="../images/bold.gif" ondrag="return false;" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)
'<img alt="Italic" class="buttonClass" src="../images/italic.gif"
'<img alt="Underline" class="buttonClass" src="../images/underline.g
'<span class="Divider"></span>';
//others toolbar options
var strRowToolbox5 = '<img alt="Left" class="buttonClass" src="../images/left.gif" ondrag="return false;" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)
'<img alt="Center" class="buttonClass" src="../images/center.gif"
'<img alt="Right" class="buttonClass" src="../images/right.gif" ondrag="return false;" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)
'<span class="Divider"></span>\n\
'<img alt="Decrease Indent" class="buttonClass" src="../images/outdent.gif
'<img alt="Increase Indent" class="buttonClass" src="../images/indent.gif"
'<span class="Divider"></span>\n\
'<img alt="Create Hyperlink" class="buttonClass" src="../images/link.gif" ondrag="return false;" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)
'<span class="Divider"></span>';
//closes section 3
var strRowToolbox6 = '</span>';
//closes section 1
var strRowToolbox7 = '</table>';
//Toggle View
var strRowToggle = '<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#D6D3CE">\n' +
'<td class="tdClass" align="left">\n' +
'<img ondrag="return false;" onclick="hideFontList();To
'<span class="Divider"></span>\n'
'</td>\n' +
'</table>';
//************************
//PUBLIC PROPERTIES
//************************
function setEditorSize(vValue){
intEditorSize = vValue;
}
function setBoxContent(vValue){
strBoxContent = vValue;
composer.innerHTML = strBoxContent;
}
function getBoxContent(){
strBoxContent = composer.innerHTML;
return strBoxContent;
}
//************************
//END - PUBLIC PROPERTIES
//************************
//************************
//PUBLIC METHODS
//************************
function initEditBox(){
//Ensure that all document elements except the content editable DIV are unselectable.
for (i=0; i<document.all.length; i++)
document.all(i).unselectab
composer.unselectable = "off";
//Clear any text in the Document window and set the focus.
composer.innerHTML = "";
//Toolbox Compact Mode
if (intEditorSize == 1){
//render toolbox row
rowToolbox.innerHTML = strRowToolbox1 + '\n' +
strRowToolbox3 + '\n' +
strRowToolbox4 + '\n' +
strRowToolbox6 + '\n' +
strRowToolbox7;
//set height of editor
composer.style.height = "25";
}
else
if (intEditorSize == 2){
//render toolbox row
rowToolbox.innerHTML = strRowToolbox1 + '\n' +
strRowToolbox2 + '\n' +
strRowToolbox3 + '\n' +
strRowToolbox4 + '\n' +
strRowToolbox5 + '\n' +
strRowToolbox6 + '\n' +
strRowToolbox7;
//set height of editor
composer.style.height = "148"; //minimum size
//render toggle view
rowToggle.innerHTML = strRowToggle;
}
else
if (intEditorSize == 3){
//render toolbox row
rowToolbox.innerHTML = strRowToolbox1 + '\n' +
strRowToolbox2 + '\n' +
strRowToolbox3 + '\n' +
strRowToolbox4 + '\n' +
strRowToolbox5 + '\n' +
strRowToolbox6 + '\n' +
strRowToolbox7;
//set height of editor
composer.style.height = "200";
//render toggle view
rowToggle.innerHTML = strRowToggle;
}
}
//************************
//END - PUBLIC METHODS
//************************
//************************
//TOOLBOX FUNCTIONS
//************************
//switch View (HTML, WYSIWYG)
function ToggleView(){
var iHTML;
var iText;
if (viewMode == 1){
iHTML = composer.innerHTML;
composer.innerText = iHTML;
// Hide all controls
composerCtrls.style.displa
composer.focus();
viewMode = 2; // Code
}
else {
iText = composer.innerText;
composer.innerHTML = iText;
// Show all controls
composerCtrls.style.displa
composer.focus();
viewMode = 1; // WYSIWYG
}
}
//mouseover
function selOn(ctrl){
ctrl.style.borderColor = '#000000';
ctrl.style.backgroundColor
ctrl.style.cursor = 'hand';
}
//mouseout
function selOff(ctrl){
ctrl.style.borderColor = '#D6D3CE';
ctrl.style.backgroundColor
}
//onmousedown (click)
function selDown(ctrl){
ctrl.style.backgroundColor
}
//onmouseup
function selUp(ctrl){
ctrl.style.backgroundColor
}
//hide font list
function hideFontList(){
//this function is called in the onclick events of the editor and fontlist
//you have to set the editable prop dynamically to enable the
//editor properly. if not done, the contents will not be selectable.
composer.contentEditable = "True";
if (intEditorSize == 2 | intEditorSize == 3){
var myFrame = document.getElementById("l
if (myFrame.style.visibility = 'visible'){
myFrame.style.visibility = 'hidden';
}
composer.focus();
}
}
//execute toolbar commands
function formatText(formatType){
hideFontList();
composer.focus();
composer.document.execComm
}
//execute toolbar commands
function changeFont(fontFamily){
composer.document.execComm
}
//show font list
function showFontList(){
var myFrame = document.getElementById("l
if (myFrame.visibility == 'visible')
myFrame.style.visibility = 'hidden'
else
myFrame.style.visibility = 'visible';
}
//************************
//END - TOOLBOX FUNCTIONS
//************************
</SCRIPT>
<table width=100% border="1" cellspacing="0">
<tr><td id=rowToolbox>
<!--DYNAMICALLY POPULATE THIS SECTION TO AVOID UNNECESSARY SCROLL BARS-->
</td>
</tr>
<tr><td>
<!--EDITOR-->
<div onclick="hideFontList();" id="composer" style="height:25; width:100%; background-color:white; font-face:Arial; font-size:14; padding:3; overflow=auto;">
</div>
</td>
</tr>
<tr><td id=rowToggle>
<!--DYNAMICALLY POPULATE THIS SECTION TO AVOID UNNECESSARY SCROLL BARS-->
</td>
</tr>
</table>
</PUBLIC:COMPONENT>
ASKER
Instantiate this editBox.htc by doing this:
1. Assign a namespace for the component. This can be any name.
<html xmlns:htmlcomposer>
2. Reference the component by importing the behavior file located at the common folder of the application.
<?IMPORT namespace="htmlcomposer" implementation="composer.h tc">
3. Instantiate the component by using its namespace and the component’s tagName (editBox). Assign a name ,id, and a tabIndex for the object.
<htmlcomposer:editBox id="composer" name="composer" tabindex="1"></htmlcompose r:editBox>
You can also instantiate several HTML Editor components in a single page. Just make its id and name properties unique.
4. Initialize the object by setting its editorSize property first, then call its initEditBox method. You can do this after the </html> tag. Place this inside a <script language=javascript> tag.
composer.editorSize = 3; //1 - small, 2-medium, 3-large
composer.initEditBox();
5. You can initialize the contents of the HTML Editor through its boxContent property. Place this inside a <script language=javascript> tag. You can also use this property to retrieve the contents anytime during runtime (client-side scripting only).
composer.boxContent = document.frmFormOverview.h dnAIF.valu e;
1. Assign a namespace for the component. This can be any name.
<html xmlns:htmlcomposer>
2. Reference the component by importing the behavior file located at the common folder of the application.
<?IMPORT namespace="htmlcomposer" implementation="composer.h
3. Instantiate the component by using its namespace and the component’s tagName (editBox). Assign a name ,id, and a tabIndex for the object.
<htmlcomposer:editBox id="composer" name="composer" tabindex="1"></htmlcompose
You can also instantiate several HTML Editor components in a single page. Just make its id and name properties unique.
4. Initialize the object by setting its editorSize property first, then call its initEditBox method. You can do this after the </html> tag. Place this inside a <script language=javascript> tag.
composer.editorSize = 3; //1 - small, 2-medium, 3-large
composer.initEditBox();
5. You can initialize the contents of the HTML Editor through its boxContent property. Place this inside a <script language=javascript> tag. You can also use this property to retrieve the contents anytime during runtime (client-side scripting only).
composer.boxContent = document.frmFormOverview.h
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER