WebHTMLEditor: How to build toolbar button with custom dialog

In order to add a toolbar button which shows custom dialog, the ToolbarDialogButton object with type Custom should be added to the Toolbar of WebHtmlEditor. It can be done at visual design time using Toobar.Items or at run time. Example below shows how to do that at run time. The dialog type should be set to Text and DialogContentID should have a value. That value will be used by WebHtmlEditor to set id of html-element DIV which represents content pane located inside of custom dialog. It means that on client application may get reference to that DIV container and fill it with any content.

Custom content for dialog can be built dynamically in javascript or it may already exist within aspx. To fill up dialog, any start-up event can be used. The best place to do that, is to use ClientSideEvents.Initialize.
In that particular sample, the content of dialog is built directly in aspx inside of DIV with id=MyDialogContentID. In order to prevent showing that MyDialogContentID on page load, its visibility is set to hidden.
Besides showing custom dialog this sample also processes events of dialog's child elements; and inserts text or object in editor at location of caret. All that processing and inserting is not related to custom dialog, but only an example, how editor can be updated by custom dialog.

aspx.cs codes:

protected void Page_Load (System.Object sender, System.EventArgs e)
{
 if(!this.IsPostBack)
 {
  Infragistics.WebUI.WebHtmlEditor.ToolbarDialogButton tb = new Infragistics.WebUI.WebHtmlEditor.ToolbarDialogButton();
  tb.Type = Infragistics.WebUI.WebHtmlEditor.ToolbarDialogButtonType.Custom;
  tb.Dialog.InternalDialogType = Infragistics.WebUI.WebHtmlEditor.InternalDialogType.Text;
  tb.Dialog.DialogContentID = "MyDialogID";
  tb.ToolTip = "My dialog";
  tb.ImageName = "./images/myDialog.gif";
  this.WebHtmlEditor1.Toolbar.Items.Add(tb);
 }
}

aspx codes:

 <script type="text/javascript">
// That function is called when WebHtmlEditor1 was initialized.
function WebHtmlEditor1_Initialize(oEditor)
{
 initializeMyDialog();
}
// That function is called by WebHtmlEditor1_Initialize in order to
// initialize content of custom dialog, which is defined explicitly within aspx
var myDialogWasCreated = false;
function initializeMyDialog()
{
 if(myDialogWasCreated)
  return;
 myDialogWasCreated = true;
 // Find reference to html-element container for MyDialogID.
 // That value was set to ToolbarDialogButton.Dialog.DialogContentID
 var dialog = document.getElementById("MyDialogID");
 if(!dialog)
  return;
 // Find reference to html-element content for MyDialog.
 // The html element with that id was created within aspx.
 var content = document.getElementById("MyDialogContentID");
 // Remove MyDialogContentID from its temporary container (body of asxp-page)
 // and insert it into MyDialogID container, which is used by WebHtmlEditor.
 content.parentNode.removeChild(content);
 dialog.appendChild(content);
 // Undo initial hidden state.
 content.style.display = "";
 content.style.visibility = "visible";
}

// That function is called by a button located in custom dialog MyDialogContentID.
// Build some object (here SPAN) and insert it into WebHtmlEditor at current selection.
function myDialogButtonClick2(message)
{
 var span = document.createElement("SPAN");
 var style = span.style;
 style.border = "2px solid red";
 style.background = "cyan";
 style.fontSize = "10pt";
 style.padding = "5px";
 var field = document.getElementById("myDialogEditField");
 var text = field ? field.value : "Can not find myDialogEditField.";
 span.innerHTML = "SPAN from MyDialog:'" + message + "'. Value:" + text;
 var oEditor = iged_getById("<%=WebHtmlEditor1.ClientID%>");
 if(oEditor)
  oEditor.insertAtCaret(span);
}

// That function is called by a button located in custom dialog MyDialogContentID.
// Build some text and insert it into WebHtmlEditor at current selection.
function myDialogButtonClick1(message)
{
 var field = document.getElementById("myDialogEditField");
 var text = field ? field.value : "Can not find myDialogEditField.";
 text = "Message from dialog '" + message + "' Value:'" + text + "'";
 var oEditor = iged_getById("<%=WebHtmlEditor1.ClientID%>");
 if(oEditor)
  oEditor.insertAtCaret(text);
}
</script>
<div id="MyDialogContentID" style="padding:10px;width:360px;height:120px;border:2px solid #80A0C0;background:#E0F0F0;display:none;visibility:hidden;">
  <span style="font-size:8pt;margin:20px;">Enter text:</span>
  <input id="myDialogEditField" style="margin-top:10px;" value="default text" />
  <br />
  <span style="font-size:8pt;">Note: if you set focus to field, then old selection in WebHtmlEditor can be lost (mostly under IE) and text can be inserted at the beginning, rather than at the last position of caret/selection</span>
  <br />
  <input type="button" style="width:150px;margin:10px;" value="Insert Text" onclick="myDialogButtonClick1('MyDialog')" />
  <input type="button" style="width:150px;margin:10px;" value="Insert SPAN" onclick="myDialogButtonClick2('MyDialog')" />
</div>
<ighedit:WebHtmlEditor ID="WebHtmlEditor1" runat="server">
 <ClientSideEvents Initialize="WebHtmlEditor1_Initialize" />
</ighedit:WebHtmlEditor>

ASP.NET Team