execCommand - insert table

I am working on a wysiwyg editor that needs to have some table editing functionality. The existing table insertion function simply pastes the appropriate html using loops to get the requested number of rows and columns. After the HTML has been pasted, the user cannot alter the number of rows or columns without editing the html itself (which pretty much defeats the purpose of the editor!) I did a little research and found that the execCommand Method has more command identifiers that what are listed at http://msdn.microsoft.com/workshop/author/dhtml/reference/commandids.asp More specifically one called DECMD_INSERTTABLE that is defined as 5022 in dhtmled.js.

I have been trying DESPERATELY to find some documentation on how to use DECMD_INSERTTABLE, but all I have found so far are some examples that don't entirely work. I've pieced together a function from the examples and the documentation on execCommand. No errors are caused when my function using execCommand('DECMD_INSERTTABLE', 0, document.mytableinfo) is called, but nothing seems to happen at all. No error, no results, no nothing.

My code is as follows (Irrelevant code imbetween has been omitted):


(Omitted lines of code ...)

<a href="javascript: tableMultiComTest(5022, document.mytableinfo);"><img src="images/table.gif" border="0" alt="Insert Table" /></a>

(More omitted lines ... )

<script languange="Javascript" src="scripts/DHtmled.js">
</script>
<script languange="Javascript">
function tableMultiComTest(aValue, aOption)
{
if (document.all["DivArea"].style.visibility == "visible")
{
document.all["DivArea"].focus();
if (aOption=="removeFormat")
{
aValue=aOption;
aOption=null;
}
if (aOption==null)
{
document.execCommand(aValue);
}
else
{
if (aValue == 5022)
{
tableProps = new tableattr(2, 2, 'width="80%" border=1');

<!--- document.mytableinfo.NumRows=1;
document.mytableinfo.NumCols=2;
document.mytableinfo.Border=1;
document.mytableinfo.TableAttrs = ' width="100%"';
document.mytableinfo.CellAttrs = ' bgColor="blue" noWrap';
document.mytableinfo.Caption = "New Table "; --->
}
var sel=document.selection.createRange();
sel.execCommand(aValue, true, tableProps);
}
document.all["DivArea"].focus();
}
else
{
alert("Please Select the Preview Mode before selecting this option.");
}
}
</script>
<object ID="mytableinfo" CLASS="mytableinfo" CLASSID="clsid:47B0DFC7-B7A3-11D1-ADC5-006008A5848C"></object>

If anyone knows anything about what the problem could be or knows of and good documentation or examples for DECMD_INSERTTABLE or any of the other functions defined in dhtmled.js, PLEASE let me know! Thanks.

-Avie

Nevermind my question. I've found a much simpler solution. Here is the example I found:
http://www.mozilla.org/docs/dom/technote/tn-dom-table/#getting

Much easier and there are tons of ways to edit the table also. You can find them here:

http://msdn.microsoft.com/workshop/author/dhtml/reference/methods.asp

Just incase anyone else is trying to do the same thing!

-Avie

Hi!

I'm currently battling with creating tables with my wysiwyg editor.

You wouldn't happen to have and be wiling to share a bit of your code? I'm a bit of a nood when it comes to javascript and DOM (more familiar with php) and I waould like to see a very simple table inserting function.

My setup works so that I have no popups, just div's which I hide or show depending on what the user is doing (i.e editing img props, editing table props [not rdy yet] etc.). So basically I would like to see an example where data from a form goes into a js function which then creates a table into the editor iframe.

I know that I should just go and code the example myself, but since time is money, I thought I'd ask if someone would have a stripped down example of this.

Thanks in advance!

Ok, atm I've created a script to create the table and I'm able to choose, how many rows and cols it has.

If someone would like to share on manipulating the table (deleting rows/cols/cells etc.) and communicating between the table and the form that retrieves the tables props, I would be a happy little camper.

Basically I need help in determining which, for example, row I'm trying to edit and in which table the row is in case there are multiple tables, and getting that information into the editing also?

Cheers.

Here's a guide about Traversing the HTML Table with JavaScript and DOM interfaces

It should help you dynamically create the table using Javascript & DOM; there are some good examples.