How to Insert a textbox into HTML Table. [ASM]

Prev: Clock cycles list - help
Next: OctaOS

From: abhayjadhav4u on 12 Mar 2007 06:48

Hello All,
I am creating HTML Editor where user can dynamicall add table and
can add a text box into the table. But i am facing some problem.
following is the code i have made plz help me out.
Thx in advance.
<HTML xmlns:mytb>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<link REL=stylesheet TYPE="text/css" HREF="Editor.css">
<script type="text/javascript" language="JavaScript1.2"
src="stmenu.js"></script>
<?IMPORT namespace="mytb" implementation="toolbar.htc">
</HEAD>
<script language="JavaScript">
function trim(strText) {
// this will get rid of leading spaces
while (strText.substring(0,1) == ' ')
strText = strText.substring(1, strText.length);

// this will get rid of trailing spaces
while (strText.substring(strText.length-1,strText.length) == ' ')
strText = strText.substring(0, strText.length-1);

return strText;
}

function RemovePara(strText)
{
a=document.selection.createRange;
b=document.frmDesignEditor.children.Table1.Bookmark;
c=document.frmDesignEditor.insertAdjacentElement(

var strPara;
var strLen=strText.length;
strPara= strText.substring(strLen-4,strLen);
//alert(strPara);
if (strPara=="</P>")
{
strText=strText.substr(0,strLen-4);
}
//alert(strText);
return strText;
}

function CatchEvent(event,txtCntrlNm)
{

//Function writen to Catch the mouse event. And likewise open the
DataDictonary//
if (event.button==2)
{
window.showModalDialog("CreateTable.asp");
}
}
</script>

<script language="JavaScript">
function CreatetxtBox()
{
var vReturnValue = window.showModalDialog("CreatetxtBox.asp?
Value=No",null,"dialogHeight: 173px; dialogWidth: 342px; center: Yes;
help: No; resizable: No; status: No;");
if(null == vReturnValue || vReturnValue.length == 0)return;

document.getElementById('getControl').setAttribute('value',vReturnValue);
PlaceTextBox();
//
document.getElementById('DesignEditor').setAttribute('src','DesignEditor.asp?
getvalues='+vReturnValue);
}

function createTable()
{
var vReturnValue = window.showModalDialog("CreateTable.asp?
Value=No",null,"dialogHeight: 360px; dialogWidth: 650px; center: Yes;
help: No; resizable: No; status: No;");
if(null == vReturnValue || vReturnValue.length == 0)return;

document.getElementById('getControl').setAttribute('value',vReturnValue);
PlaceTable();
}
</script>

<SCRIPT>
window.onload=doInit
function doInit()
{
//ensure that all document elements except the content editable DIV
are unselectable
for (i=0; i<document.all.length; i++)
document.all(i).unselectable = "on";
textarea1.unselectable = "off";
//clear any text in the Document window and set the focus
//textarea1.innerHTML="";
textarea1.focus();
getSystemFonts();
getBlockFormats();
}
</SCRIPT>
</HEAD>
<script language="JavaScript">
function callFormatting(sFormatString)
{
document.execCommand(sFormatString);
}
function changeFontSize()
{
var
sSelected=oToolBar.getItem(6).getOptions().item(oToolBar.getItem(6).getAttribute("selectedIndex"));
document.execCommand("FontSize", false, sSelected.value);
}

function getSystemFonts()
{
var a=dlgHelper.fonts.count;
var fArray = new Array();
var oDropDown = oToolBar.createDropDownListAt("4");
oDropDown.setAttribute("id","FontNameList");
for (i = 1;i < dlgHelper.fonts.count;i++)
{
fArray[i] = dlgHelper.fonts(i);
var aOptions = oDropDown.getOptions();
var oOption = document.createElement("OPTION");
aOptions.add(oOption);
oOption.text = fArray[i];
oOption.Value = i;
}
//attaching the onchange event is necessary in order to detect when a
user changes the value in the drop-down listbox
oDropDown.setAttribute("onchange",ChangeFont);
}

function ChangeFont()
{
var
sSelected=oToolBar.getItem(4).getOptions().item(oToolBar.getItem(4).getAttribute("selectedIndex"));
document.execCommand("FontName", false, sSelected.text);
}

function getBlockFormats()
{
var a=dlgHelper.blockFormats.count;
var fArray = new Array();
var oDropDown = oToolBar.createDropDownListAt("5");
oDropDown.setAttribute("id","FormatList");
for (i = 1;i < dlgHelper.blockFormats.count;i++)
{
fArray[i] = dlgHelper.blockFormats(i);
var aOptions = oDropDown.getOptions();
var oOption = document.createElement("OPTION");
aOptions.add(oOption);
oOption.text = fArray[i];
oOption.Value = i;
}
//attach the onchange event
oDropDown.setAttribute("onchange",ChangeFormat);
}

function ChangeFormat()
{
var
sSelected=oToolBar.getItem(5).getOptions().item(oToolBar.getItem(5).getAttribute("selectedIndex"));
document.execCommand("FormatBlock", false, sSelected.text);
}

var sInitColor=null;

function callColorDlg(sColorType)
{
if (sInitColor == null)
//display color dialog box
var sColor = dlgHelper.ChooseColorDlg();
else
var sColor = dlgHelper.ChooseColorDlg(sInitColor);
//change decimal to hex
sColor = sColor.toString(16);
//add extra zeroes if hex number is less than 6 digits
if (sColor.length < 6)
{
var sTempString = "000000".substring(0,6-sColor.length);
sColor = sTempString.concat(sColor);
}
//change color of the selected text
document.execCommand(sColorType, false, sColor);
sInitColor = sColor;
textarea1.focus();
}
</script>

<BODY>
<table width="100%">
<TBODY>
<tr>
<td valign="top">
<script type="text/javascript" language="JavaScript1.2"
src="Editor.js"></script>
</td><td width="88%">
<OBJECT id=dlgHelper CLASSID="clsid:3050f819-98b5-11cf-
bb82-00aa00bdce0b" width="0px" height="0px"> </OBJECT>


<OBJECT id=cDialog style="LEFT: 0px; TOP: 0px" codebase="http://
activex.microsoft.com/controls/vb5/comdlg32.cab"
height=0px width=0px classid="CLSID:F9043C85-F6F2-101A-
A3C9-08002B2F49FB" VIEWASTEXT>
</OBJECT>


<OBJECT CLASSID="clsid:5220cb21-c88d-11cf-b347-00aa00a28331"
id=Microsoft_Licensed_Class_Manager_1_01>
<PARAM NAME="LPKPath" VALUE="comdlg.lpk">
</OBJECT>

<DIV ID="oContainer" STYLE="WIDTH: 800px; border:1px solid #cccccc;
position:relative; top:0; left:20;">

<mytb:TOOLBAR STYLE="display:inline; width:100%" ID="oToolBar">
<mytb:TOOLBARBUTTON IMAGEURL="Images\new.gif" title="New Document"/>
<mytb:TOOLBARBUTTON IMAGEURL="Images\open.gif" title="Open Document"/
>
<mytb:TOOLBARBUTTON IMAGEURL="Images\save.gif" title="Save Document"/
>
<mytb:TOOLBARSEPARATOR/>
<mytb:TOOLBARDROPDOWNLIST id="oFontSize" onchange="changeFontSize();">
<option value=1>1
<option value=2>2
<option value=3>3
<option value=4 selected>4
<option value=5 >5
<option value=6>6
<option value=7>7
</mytb:TOOLBARDROPDOWNLIST>
<mytb:TOOLBARSEPARATOR/>
<mytb:TOOLBARBUTTON IMAGEURL="Images\bold.gif" title="Bold"
onclick="callFormatting('Bold');"/>
<mytb:TOOLBARBUTTON IMAGEURL="Images\italic.gif" title="Italic"
onclick="callFormatting('Italic');"/>
<mytb:TOOLBARBUTTON IMAGEURL="Images\underline.gif" title="Underline"
onclick="callFormatting('Underline');"/>
<mytb:TOOLBARBUTTON IMAGEURL="Images\strikethrough.gif"
title="StrikeThrough" onclick="callFormatting('StrikeThrough');"/>
<mytb:TOOLBARSEPARATOR/>
<mytb:TOOLBARBUTTON IMAGEURL="Images\superscript.gif"
title="SuperScript" onclick="callFormatting('SuperScript');"/>
<mytb:TOOLBARBUTTON IMAGEURL="Images\subscript.gif" title="SubScript"
onclick="callFormatting('SubScript');"/>
</mytb:TOOLBAR>
</nobr>
<nobr>
<mytb:TOOLBAR STYLE="display:inline; width:100%" ID="oToolBar2">
<mytb:TOOLBARBUTTON IMAGEURL="Images\cut.gif" title="Cut"
onclick="callFormatting('Cut');"/>
<mytb:TOOLBARBUTTON IMAGEURL="Images\copy.gif" title="Copy"
onclick="callFormatting('Copy');"/>
<mytb:TOOLBARBUTTON IMAGEURL="Images\paste.gif" title="Paste"
onclick="callFormatting('Paste');"/>
<mytb:TOOLBARSEPARATOR/>
<mytb:TOOLBARBUTTON IMAGEURL="Images\undo.gif" title="Undo"
onclick="callFormatting('Undo');"/>
<mytb:TOOLBARBUTTON IMAGEURL="Images\redo.gif" title="Redo"
onclick="callFormatting('Redo');"/>
<mytb:TOOLBARSEPARATOR/>
<mytb:TOOLBARBUTTON IMAGEURL="Images\numberedlist.gif"
title="InsertOrderedList"
onclick="callFormatting('InsertOrderedList');"/>
<mytb:TOOLBARBUTTON IMAGEURL="Images\bulletedlist.gif"
title="InsertUnorderedList"
onclick="callFormatting('InsertUnorderedList');"/>
<mytb:TOOLBARBUTTON IMAGEURL="Images\outdent.gif" title="Outdent"
onclick="callFormatting('Outdent');"/>
<mytb:TOOLBARBUTTON IMAGEURL="Images\indent.gif" title="Indent"
onclick="callFormatting('Indent');"/>
<mytb:TOOLBARSEPARATOR/>
<mytb:TOOLBARBUTTON IMAGEURL="Images\justifyleft.gif"
title="JustifyLeft" onclick="callFormatting('JustifyLeft');"/>
<mytb:TOOLBARBUTTON IMAGEURL="Images\justifycenter.gif"
title="JustifyCenter" onclick="callFormatting('JustifyCenter');"/>
<mytb:TOOLBARBUTTON IMAGEURL="Images\justifyleft.gif"
title="JustifyRight" onclick="callFormatting('JustifyRight');"/>
<mytb:TOOLBARSEPARATOR/>
<mytb:TOOLBARSEPARATOR/>
<mytb:TOOLBARBUTTON IMAGEURL="Images\fontstyleadv.gif" title="Font
Color" onclick="callColorDlg('ForeColor');"/>
<mytb:TOOLBARBUTTON IMAGEURL="Images\bgcolor.gif" title="HighLight"
onclick="callColorDlg('BackColor');"/>
</mytb:TOOLBAR>
</Div>



<form name="frmDesignEditor">
<input type=hidden name=getControl id=getControl>
<Div id=textarea1 contentEditable=true STYLE="WIDTH: 800px; border:1px
solid #cccccc; position:relative; left:20; height:700;" name=textarea1
rows=29 cols=80>
Enter your Text here
</Div>
<script langauge="Javascript">
function PlaceTextBox()
{
var vArray,vGetValues,vGetExistingVal,vInputNewVal,vRemoveString;

vGetValues=document.getElementById('getControl').getAttribute('value');
if (vGetValues!="")
{
vArray=vGetValues.split('*');
if (vArray[0]=="TextBox")
{
vInputNewVal="<input name="+vArray[1]+"
onmousedown=CatchEvent(event,"+vArray[1]+"); maxLength="+vArray[3]+"
width="+vArray[2]+">";
vGetExistingVal=document.getElementById("textarea1").innerHTML;
vGetExistingVal= RemovePara(vGetExistingVal);
//if the Designer has Table Embeded in it. Then place textbox in
correct cell//
var cmpStr=vGetExistingVal.search("</TABLE>");
if (cmpStr>"0")
{
alert(document.frmDesignEditor.children.Table1.selected());

document.getElementById("textarea1").innerHTML=vGetExistingVal
+vInputNewVal;
}
else
{
document.getElementById("textarea1").innerHTML=vGetExistingVal
+vInputNewVal;
}
//alert(document.getElementById("textarea1").innerHTML);
}
}
vArray=0;
vGetValues="";
vGetExistingVal="";
vInputNewVal="";
}

function PlaceTable()
{
var
vArray,vGetValues,vGetRows,vGetCols,vGetWidth,vBorderSize,vInputNewVal;

vGetValues=document.getElementById('getControl').getAttribute('value');
if (vGetValues!="")
{
vArray=vGetValues.split('*');
if (vArray[0]=="Table")
{
vGetWidth=vArray[3]+vArray[4];

vInputNewVal="<table id='Table1' contentEditable=true
width="+vGetWidth+" border="+vArray[10]+">";
vGetRows=vArray[1]; //Rows Value from Array
vGetCols=vArray[2]; //Columns Value from Array

//Loop For Creating Rows
for (var j=0; j<vGetRows; j++)
{
vInputNewVal+="<tr>";
//Loop For Creating Columns
for (var iCnt=0; iCnt<vGetCols; iCnt++)
{
vInputNewVal+="<td></td>";
}
vInputNewVal+="</tr>";
}
vInputNewVal+="</table>";
}
//Appending Table Values To Design Area.
document.getElementById("textarea1").innerHTML+=vInputNewVal;
//alert(vInputNewVal);
}
}

function setHistoryCursor() {

}

</script>

</form>
</td>
</tr>
</table>
</IFRAME></TD></TR></TBODY></TABLE>
</BODY>
</HTML>

What i want to do is. to add a textbox dynamically into the table at
particular cell where there was last cursor position. please help me
out.

abhay

From: Dirk Wolfgang Glomp on 12 Mar 2007 07:41

abhayjadhav4u(a)gmail.com schrieb:

> Hello All,
> I am creating HTML Editor where user can dynamicall add table and
> can add a text box into the table. But i am facing some problem.
> following is the code i have made plz help me out.

Do you enter a totaly wrong newsgroop for your problem.
This is an assembler group, for questions around assembler-programming.
Good by.

Dirk

From: Wolfgang Kern on 12 Mar 2007 11:11

<abhayjadhav4u(a)gmail.com> asked about HTML:

Even this is the wrong place to ask:

Google for 'SELFHTML' (be aware of a huge download).
__
wolfgang

|
Pages: 1
Prev: Clock cycles list - help
Next: OctaOS