How add custom button which resets styles of selected text/objects in WebHtmlEditor

Alex Kartavov / Wednesday, August 25, 2010

The WebHtmlEditor allows to add custom items to toolbar and process their events on client. WebHtmlEditor on client has a shortcut method _format which wraps execCommand method of document. Application may obtain reference to document used by editing area and call that method, or it may use shortcut. The command "removeFormat" performs clearing currently selected text in browser. Below example implements that feature.

<script type="text/javascript">
function WebHtmlEditor1_BeforeAction(oEditor, actID, oEvent, p4, p5, p6, p7, p8, act)
{
 if(actID == 'MyResetButton')
  oEditor._format('removeFormat');
}
</script>

<ighedit:WebHtmlEditor ID="WebHtmlEditor1" runat="server" ...>
   <ClientSideEvents BeforeAction="WebHtmlEditor1_BeforeAction" />
   <Toolbar>
      ...
      <ighedit:ToolbarButton runat="server" Type="Custom" Key="MyResetButton" ImageName="./images/resetImage.gif" />
   ...

ASP.NET Team