ASP.NET 3.5 and above only

Obout.Ajax.UI Controls - HTML Editor - Editor with a simple custom button

Custom button - insert the current date.

Aa
ASP.NET
<%@ Register Assembly="Obout.Ajax.UI" Namespace="Obout.Ajax.UI.HTMLEditor" TagPrefix="obout" %>
<%@ Register TagPrefix="custom" Namespace="CustomToolbarButton" %>
<obout:Editor runat="server" PopupHolderID="popupHolder" Id="editor" Height="350px" Width="100%" >
    <TopToolBar Appearance="Lite" >
        <AddButtons>
            <obout:HorizontalSeparator runat="server" />
            <custom:InsertDate runat="server" />
        </AddButtons>
    </TopToolBar>
</obout:Editor>
App_Code
public class InsertDate : MethodButton
{
  // what client-side type to initiate
  protected override string ClientControlType
  {
     get { return "CustomToolbarButton.InsertDate"; }
  }
  // what file in the client-side type is located
  protected override string ScriptPath
  {
     get { return "~/App_Obout/HTMLEditor/Scripts/InsertDate.js"; }
  }
  // custom buttons images folder
  protected override string ButtonImagesFolder
  {
     get { return "~/App_Obout/HTMLEditor/customButtons/"; }
  }
  // base name of this button image,
  //
  // The following images should be present in the folder above:
  // ed_date_n.gif - normal button's image
  // ed_date_a.gif - image when button pressed
  protected override string BaseImageName
  {
     get { return "ed_date"; }
  }
  // tooltip if not found in Localization
  public override string DefaultToolTip
  {
     get { return "Insert current date"; }
  }
}
JavaScript file ("~/App_Obout/HTMLEditor/Scripts/InsertDate.js")
Type.registerNamespace("CustomToolbarButton");

// Declare the custom button class
CustomToolbarButton.InsertDate = function(element) {
    CustomToolbarButton.InsertDate.initializeBase(this, [element]);
}
CustomToolbarButton.InsertDate.prototype = {
    // override this method
    callMethod: function() {
       // check the base method
       if (!CustomToolbarButton.InsertDate.callBaseMethod(this, "callMethod")) return false;
       var editor = this.get_designPanel(); // 'DesignPanel' component
       var editPanel = this.get_editPanel(); // 'EditPAnel' component

       try {
          // For 'Undo'
          editor._saveContent();
          // What to do - insert date at current selection
          editor.insertHTML((new Date()).toLocaleDateString());
          // Notify Editor about content changed and update toolbars linked to the edit panel
          setTimeout(function() { editor.onContentChanged(); editPanel.updateToolbar(); }, 0);
          // Ensure focus in design panel
          editor.focusEditor();
       } catch (e) { }
       return true;
   }
}
// Register this class
CustomToolbarButton.InsertDate.registerClass("CustomToolbarButton.InsertDate",
                                                              Obout.Ajax.UI.HTMLEditor.ToolbarButton.MethodButton);
Sys.Application.notifyScriptLoaded();

"We LOVE your controls -- I am always checking for new and/or enhanced controls. I'm telling everybody obout.com!"

Dennis Spurlin

Random testimonial   All testimonials