ASP.NET 3.5 and above only

Obout.Ajax.UI Controls - HTML Editor - Editor in collapsible panel


Edit content


Generates browser-independent

and standards-compliant HTML


Loads features on demand -- lightweight and fast


Fully customizable: external image galleries,

custom buttons, import/export content, templates


Integrates with grid, AJAXPage, flyout and other controls
ASP.NET 
<%@ Register Assembly="Obout.Ajax.UI" Namespace="Obout.Ajax.UI.HTMLEditor" TagPrefix="obout" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="act" %>
<asp:Panel ID="Panel2" runat="server" CssClass="collapsePanelHeader" Height="30px"> 
   <div style="padding:5px; cursor: pointer; vertical-align: middle;">
       <div style="float: left; margin-left: 20px;">
           <asp:Label ID="Label1" runat="server">Edit content</asp:Label>
       </div>
       <div style="float: right; vertical-align: middle;">
           <asp:Image ID="Image1" runat="server" ImageUrl="expand_blue.jpg"/>
       </div>
   </div>
</asp:Panel>
<asp:Panel ID="Panel1" runat="server" style="overflow: hidden;">
   <asp:Label ID="EditorPanel" runat="server" style="display:none;" >
      <obout:Editor runat="server" Id="editor" Height="400px" Width="100%" />
      <asp:LinkButton runat="server" Text="Cancel editing" OnClientClick="return cancelEditing();" />
   </asp:Label>
</asp:Panel>
<asp:Label ID="ContentPanel" runat="server" ></asp:Label>
<act:CollapsiblePanelExtender ID="cpeEditor" runat="Server"
      TargetControlID="Panel1" ExpandControlID="Panel2" CollapseControlID="Panel2" Collapsed="true"
      EnableViewState="false" ExpandDirection="Vertical" TextLabelID="Label1" ImageControlID="Image1"    
      ExpandedText="Save content" CollapsedText="Edit content" ExpandedImage="collapse_blue.jpg"
      CollapsedImage="expand_blue.jpg" SuppressPostBack="true" SkinID="CollapsiblePanelDemo" />
...
<script type="text/JavaScript">
  function pageLoad() {
    $get("<%= EditorPanel.ClientID %>").style.display = "";

    var extender = $find("<%= cpeEditor.ClientID %>");
    extender.__mySaved_Closer = extender._doClose;
    extender.__mySaved_Opener = extender._doOpen;

    extender._doClose = function(eventObj) {
      var contentPanel = $get("<%= ContentPanel.ClientID %>");
      if(eventObj != null) {
        var editor = $find("<%= editor.ClientID %>");
        contentPanel.innerHTML = editor.get_content();
      }

      if(this._animation) {
        function endAnimation(sender, args) {
          sender.remove_ended(endAnimation);
          contentPanel.style.display = "";
        }
        this._animation.add_ended(endAnimation);
      }
      var retval =  this.__mySaved_Closer(eventObj);
      if(!this._animation) {
        contentPanel.style.display = "";
      }
      return retval;
    }

    extender._doOpen = function(eventObj) {
      var contentPanel = $get("<%= ContentPanel.ClientID %>");
      var editor = $find("<%= editor.ClientID %>");
      contentPanel.style.display = "none";
      var retval = this.__mySaved_Opener(eventObj);
      editor.set_content(contentPanel.innerHTML);
      return retval;
    }
  }

  function cancelEditing() {
    var extender = $find("<%= cpeEditor.ClientID %>");
    extender._doClose(null);
    return false;
  } 
</script>

"I want to say your product is excellent – far more than we were expecting!"

Jorge Rojas Mata
UAI

Random testimonial   All testimonials

Products Downloads