How to get reference to a TABLE create within WebHTMLEditor

Alex Kartavov / Tuesday, August 10, 2010

WebHtmlEditor allows to insert TABLE object from toolbar menu and customize its properties by dialog. However, that TABLE is not referenced by WebHtmlEditor. If application needs to access that new TABLE, then it may process 2 ClientSideEvents, which are raised before table was inserted and after. Within 1st event application may get reference to all tables in editor and save its copy. Within 2nd event, application may get all tables, compare them and find reference to new TABLE object. Example below uses following:
1. Process "TableProperties" as 1st event: it is raised when dialog with table-properties is displayed
2. Process "TableDialog" as 2nd event: it is raised after table was inserted and dialog is closed 
3. Change background of table to red to test if it worked and TABLE was found.

<script type="text/javascript">
// reference to copy of tables in editor which existed before new table was inserted
var oldTables = null;

// handler to ClientSideEvent raised by WebHtmlEditor
function WebHtmlEditor1_AfterAction(oEditor, actID)
{
 // raised when dialog with properties was displayed
 if(actID == 'TableProperties')
  // get copy of old tables
  oldTables = getTables(oEditor, true);
 // raised when dialog with properties was closed
 if(actID == 'TableDialog')
 {
  // get new tables in editor
  var newTables = getTables(oEditor);
  var newLen = newTables.length, oldLen = oldTables.length;
  // new table
  var newTbl = null;
  // find new table
  while(!newTbl && newLen-- > 0)
  {
   var tbl = newTables[newLen], i = oldLen;
   while(i-- > 0)
    if(oldTables[i] == tbl)
     break;
   // success, table was found
   if(i < 0)
    newTbl = tbl;
  }
  // visual test of found table
  if(newTbl)
   tbl.style.background = 'red';
 }
}

// returns all tables in content of editor
function getTables(oEditor, getCopy)
{
 // under IE editing area is represented by DIV: member variable _elem
 // under not-IE editing area is represented by document in IFRAME
 var elem = oEditor._ie ? oEditor._elem : oEditor._doc();
 // get all tables in editor
 var tables = elem.getElementsByTagName('TABLE');
 if(!getCopy)
  return tables;
 // create copy of tables
 var len = tables.length, copy = [];
 for(var i = 0; i < len; i++)
  copy[i] = tables[i];
 return copy;
}
</script>
<ighedit:WebHtmlEditor ID="WebHtmlEditor1" runat="server">
   <ClientSideEvents AfterAction="WebHtmlEditor1_AfterAction" />
</ighedit:WebHtmlEditor>

ASP.NET team