WYSIWYG HTML Edit: add a table

Dev Articles Community Forums Sponsor:

SlickEdit: Code in over 40 languages across 7 platforms. SlickEdit’s unmatched power, speed, and flexibility allows even the most accomplished developers to write better code faster. Download a free trial today!

March 19th, 2003, 04:07 AM

dsea

Junior Member

Join Date: Mar 2003

Posts: 2

Time spent in forums: < 1 sec
Reputation Power: 0

execCommand and WYSIWYG HTML Edit: how to add a table

Hello all,
I read the article "Building a WYSIWYG HTML Editor" (URL). There is a list of function "command" (another list in URL) but I dont know if there is a command to add a table in iView or not?
Waiting for your helps
Thanks a lot
Best ragards
Hai

Last edited by dsea : March 19th, 2003 at 04:40 AM.

March 19th, 2003, 05:04 AM

neh

Junior Member

Join Date: Mar 2003

Posts: 2

Time spent in forums: < 1 sec
Reputation Power: 0

hi - no there isnt if you use this method - BUT I'm doing something similar and needed to add tables etc .. it turns out thats theres an activeX control bundled with IE5+ that is basically the same as using DHTML for IE5+ and setting the documents designMode to 'On'

-- its much more full featured - the control doesnt need to be distributed as its part of the core IE build since IE5 -

you can grab the sdk from here --> SDK download
and you can see only info at links below -->
DHTML component FAQ
DHTML Component overview
dhtml editing made easy!!!

good luck with it

March 19th, 2003, 09:08 AM

dsea

Junior Member

Join Date: Mar 2003

Posts: 2

Time spent in forums: < 1 sec
Reputation Power: 0

Hello,
I have a "bad" solution like that:
1 tale: 3 column, 2 rows

function addTable() {
iHTML = iView.document.body.innerHTML;
iHTML += "<table border=\"1\" width=\"100%\"><tr><td width=\"50%\"> </td><td width=\"25%\"> </td> </td><td width=\"25%\"> </td></tr><tr><td width=\"50%\"> </td><td width=\"25%\"> </td> </td><td width=\"25%\"> </td></tr></table>";
iView.document.body.innerHTML = iHTML;
}

But with it, I can add only a table at the end (because I dont know where the cursor is exact in iframe). Could anyone tell me if there is something like postion of cursor?
thanks a lot
Hai

March 20th, 2003, 08:23 AM

neh

Junior Member

Join Date: Mar 2003

Posts: 2

Time spent in forums: < 1 sec
Reputation Power: 0

Quote:

Originally posted by dsea
Hello,
I have a "bad" solution like that:
1 tale: 3 column, 2 rows

function addTable() {
iHTML = iView.document.body.innerHTML;
iHTML += "<table border=\"1\" width=\"100%\"><tr><td width=\"50%\"> </td><td width=\"25%\"> </td> </td><td width=\"25%\"> </td></tr><tr><td width=\"50%\"> </td><td width=\"25%\"> </td> </td><td width=\"25%\"> </td></tr></table>";
iView.document.body.innerHTML = iHTML;
}

But with it, I can add only a table at the end (because I dont know where the cursor is exact in iframe). Could anyone tell me if there is something like postion of cursor?
thanks a lot
Hai

try readin the post above yours sparky .. rofl

October 2nd, 2003, 01:51 PM

Fantasy

Junior Member

Join Date: Oct 2003

Location: Slovenia

Posts: 1

Time spent in forums: < 1 sec
Reputation Power: 0

So.. did anyone created function which inserts HTML code at curent cursor position?
Have anyone any useful functions created maybe to shave with others?

October 3rd, 2003, 12:40 PM

stumpy

May contain nuts.

Dev Articles Regular (2000 - 2499 posts)

Join Date: Aug 2002

Location: Sydney, AU

Posts: 2,058

Time spent in forums: 5 h 6 m 11 sec
Reputation Power: 8

The DHTML stuff in IE5 is no longer supported by Microsoft, so I wouldn't use that unless all your users are locked into IE5.

Re: inserting content at the cursor - check out the createRange() method - that's the main work horse for inserting content.

October 26th, 2004, 01:13 PM

bootcom

Registered User

Join Date: Oct 2004

Posts: 4

Time spent in forums: < 1 sec
Reputation Power: 0

Ok here we go ..... !!!!

Note: editbox refers to the id of your iframe

Place the following code in the head section of your page.

// Function to create and insert a table into the page
function tableDialog()
{
//----- Creates A Table Dialog And Passes Values To createTable() -----
var rtNumRows = null;
var rtNumCols = null;
var rtTblAlign = null;
var rtTblWidth = null;
var rtBorder = null;
var rtPadding = null;
var rtSpacing = null;
var rtTblID = null;
var rtTblPixel = null;
showModalDialog("includes/table.asp",window,"status:false;dialogWidth:30em;dialogHeight:30em");
}
function createTable()
{
editbox.focus();
//----- Creates User Defined Tables -----
var cursor = editbox.document.selection.createRange(); // This places the table where your
// cursor was last positioned
if (rtNumRows == "" || rtNumRows == "0")
{
rtNumRows = "1";
}
if (rtNumCols == "" || rtNumCols == "0")
{
rtNumCols = "1";
}
var rttrnum=1
var rttdnum=1
var rtNewTable = "<table"
if(rtBorder != ""){
rtNewTable += " border='"+ rtBorder +"'"
}

if(rtTblAlign != ""){
rtNewTable += " align='" + rtTblAlign + "'"
}
if(rtPadding != ""){
rtNewTable += " cellpadding=" + rtPadding
}

if(rtSpacing != ""){
rtNewTable += " cellspacing=" + rtSpacing
}

if(rtTblID != ""){
rtNewTable += " ID=" + rtTblID + " name=" + rtTblID
}

rtNewTable += " width='" + rtTblWidth + rtTblPixel + "'>"
while (rttrnum <= rtNumRows)
{
rttrnum=rttrnum+1
rtNewTable = rtNewTable + "<tr>"
while (rttdnum <= rtNumCols)
{
rtNewTable = rtNewTable + "<td> </td>"
rttdnum=rttdnum+1
}
rttdnum=1
rtNewTable = rtNewTable + "</tr>"
}
rtNewTable = rtNewTable + "</table>"
cursor.pasteHTML(rtNewTable);
editbox.focus();
}

code for includes/table.asp

<html>
<head>
<style type='text/css'>
body {background:threedface}
</style>
<script>
function getInfoAndUpdate(){
if (isNaN(formNumRows.value)){
alert ("The rows field can only contain numbers");return;}
else if (isNaN(formNumCols.value)){
alert ("The colums field can only contain numbers");return;}
var callerWindowObj = dialogArguments;
callerWindowObj.rtNumRows = formNumRows.value;
callerWindowObj.rtNumCols = formNumCols.value;
callerWindowObj.rtTblAlign = formTblAlign.value;
callerWindowObj.rtTblWidth = formTblWidth.value;
callerWindowObj.rtTblPixel = formTblPixel.value;
callerWindowObj.rtTblID = formTableID.value;
callerWindowObj.rtBorder = formBorder.value;
callerWindowObj.rtPadding = formCellPadding.value;
callerWindowObj.rtSpacing = formCellSpacing.value;
callerWindowObj.createTable();
window.close();}
</script>
<title>Table Properties</title>
</head>
<body>
<table align='center' border='0' cellpadding='0'cellspacing='0'width='100%'>
<tr>
<td width='50%'>Number of rows:</td>
<td width='50%'>
<input id='formNumRows' size='2' value='1'>
</td>
</tr>
<tr>
<td width='50%'>Number of colums:</td>
<td width='50%'>
<input id='formNumCols' size='2' value='1'>
</td>
</tr>
<tr>
<td>Table Border:</td>
<td><input name="formBorder" type="text" id="formBorder" value="1" size="2"></td>
</tr>
<tr>
<td width='50%'>Table Alignment:</td>
<td width='50%'>
<select id='formTblAlign' size='1'>
<option value='default' selected>default</option>
<option value='left'>left</option>
<option value='center'>center</option>
<option value='right'>right</option>
</select>
</td>
</tr>
<tr>
<td width='50%'>Table Width:</td>
<td width='50%'>
<input id='formTblWidth' size='5' value="100">
<select id='formTblPixel' size='1'>
<option value='%' selected>%</option>
<option value='px' >px</option>
</select>
</td>
</tr>
<tr>
<td align='right'><div align="left">Table ID/ Name </div></td>
<td align='left'><input name="formTableID" type="text" id="formTableID"></td>
</tr>
<tr>
<td>Cell Padding</td>
<td align='left'><input name="formCellPadding" type="text" id="formCellPadding" value="1" size="2"></td>
</tr>
<tr>
<td>Cell Spacing</td>
<td align='left'><input name="formCellSpacing" type="text" id="formCellSpacing" value="1" size="2"></td>
</tr>
<tr>
<td width='50%' align='right'> <input name="button" type=button onClick='getInfoAndUpdate();' value='Ok'>
  </td>
<td width='50%' align='left'>  
<input name="button" type=button onClick='window.close();' value='Cancel'>
</td>
</tr>
</table>
</body>
</html>

Hope this helps anyone wanting to make tables in MSIE

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: