WebHTMLEditor: How to add toolbar button which inserts object at caret

The WebHtmlEditor allows to add various custom items to toolbar. In case a toolbar button it is the ToolbarButtonType.Custom. That new item can be added at visual design time within Toolbar.Items property. Below example shows how to add item at run time.
aspx.cs codes:

protected void Page_Load (System.Object sender, System.EventArgs e)
{
 if(!this.IsPostBack)
 {
  Infragistics.WebUI.WebHtmlEditor.ToolbarButton tb = new Infragistics.WebUI.WebHtmlEditor.ToolbarButton(Infragistics.WebUI.WebHtmlEditor.ToolbarButtonType.Custom);
  tb.Key = "MyCustomTable";
  tb.ToolTip = "Insert Table";
  tb.ImageName = "./images/myTable.gif";
  this.WebHtmlEditor1.Toolbar.Items.Add(tb);
 }
}

These codes will add new item to toolbar, but it will do nothing. In order to implement action on client and insert something in editor, the ClientSideEvents.BeforeAction should be used. The handler of that event provides various information about action. The 2nd param "actID" is equal to the Key of action/toolbutton. So, application may check if actID is equal to the Key of custom item and do desired action.

In order to insert an object at caret, the method insertAtCaret(object) can be used. There are also global iged_insText(str) and iged_insNodeAtSel(obj) methods. Second method is not available for IE, because IE automatically converts str passed into iged_insText to html object.

Below example shows how to insert TABLE with custom attributes at location of caret. Application may insert any similar object or content.
Note: in case of IE a string can be used as parameter in insertAtCaret, but all other browsers require html object.

<script type="text/javascript">
// function fired before actions
function WebHtmlEditor1_BeforeAction(oEditor, actID, oEvent, p4, p5, p6, p7, p8, act)
{
 if(actID == 'MyCustomTable')
  insertMyTable(oEditor);
}
function insertMyTable(oEditor)
{
 var rows = 2, cols = 3, colWidth = '64px', rowHeight = '33px';
 // reference to the document used by editing area
 var doc = oEditor._doc();
 var tbl = doc.createElement('TABLE');
 var tbody = doc.createElement('TBODY');
 tbl.appendChild(tbody);
 for(var i = 0; i < rows; i++)
 {
  var tr = doc.createElement('TR');
  for(var j = 0; j < cols; j++)
  {
   var td = doc.createElement('TD');
   td.style.width = colWidth;
   td.style.height = rowHeight;
   td.style.background = '#F0F0F0';
   td.style.fontSize = '8pt';
   // build single line borders between cells
   if(i > 0)
    td.style.borderTop = '1px solid blue';
   if(j > 0)
    td.style.borderLeft = '1px solid blue';
   td.innerHTML = '&nbsp';
   tr.appendChild(td);
  }
  tbody.appendChild(tr);
 }
 tbl.setAttribute('cellpadding', 0);
 tbl.setAttribute('cellspacing', 0);
 tbl.style.tableLayout = 'fixed';
 tbl.style.width = '200px';
 tbl.style.border = '1px solid #606060';
 // Note: leading and trailing BR (or similar objects) may ensure
 // that user will be able to set caret in front of or after TABLE.
 // Because if TABLE is the only object in editor,
 // then browser may ignore mouse clicks outside of it.
 //oEditor.insertAtCaret(doc.createElement('BR'));
 oEditor.insertAtCaret(tbl);
 //oEditor.insertAtCaret(doc.createElement('BR'));
}
</script>

<ighedit:WebHtmlEditor ID="WebHtmlEditor1" runat="server">
   <ClientSideEvents BeforeAction="WebHtmlEditor1_BeforeAction" />
</ighedit:WebHtmlEditor>

ASP.NET Team