WebHTMLEditor: How to trigger actions for WebHtmlEditor from javascript

Alex Kartavov / Wednesday, August 25, 2010

Most actions of WebHtmlEditor are wrappers for document.execCommand(action, params). The wrapper function for that action has name  _format. It was intended for internal usage, though, application may use is it as a short-cut for execCommand. Those actions are applied to selected object where caret is located.
Internal implementation of actions which insert objects are rather complex and different for different browsers. For example insert-table action includes building TABLE according to properties entered in InsertTable dialog.

All actions on client are filtered through global function iged_act(). Editor does not have public options to trigger toolbar actions from javascript for several reasons. However, applications may trigger custom actions for simple actions like Bold, Italic and few others. That will have effect for current/focused editor.
Below is example, which shows how to use _format and iged_act. It also includes example to access objects (like TABLE) located in editor and modify its property.

<ighedit:WebHtmlEditor ID="WebHtmlEditor1" runat="server"></ighedit:WebHtmlEditor>
<script type="text/javascript">
function setColor(val)
{
 var editor = iged_getById('<%=WebHtmlEditor1.ClientID%>');
 if(editor)
  editor._format('forecolor', val);
}
function setBold()
{
 iged_act('bold');
}
function setTableProp(prop, val)
{
 var editor = iged_getById('<%=WebHtmlEditor1.ClientID%>');
 if(!editor)
  return;
 // get reference to editing area:
 // in case of IE the DIV is used, all other browsers: IFRAME
 var field = editor._ie ? editor._elem : editor._doc().body;
 var tables = field.getElementsByTagName('TABLE');
 if(!tables || tables.length < 1)
  return;
 var table = tables[0];
 table.style[prop] = val;
}
</script>
<input type="button" value="Bold" onclick="setBold()" />
<input type="button" value="Color" onclick="setColor('#c00000')" />
<input type="button" value="TableBackground" onclick="setTableProp('background', 'red')" />
<input type="button" value="TableColor" onclick="setTableProp('color', 'blue')" />
<input type="button" value="TableBorder" onclick="setTableProp('borderColor', 'green')" />

ASP.NET Team