ASP.NET 3.5 and above only

Obout.Ajax.UI Controls - HTML Editor - Editor in MultiView

Edit content


Preview content

Font Size Header 
Aa
ASP.NET 
<%@ Register Assembly="Obout.Ajax.UI" Namespace="Obout.Ajax.UI.HTMLEditor" TagPrefix="obout" %>
<asp:MultiView ID="MultiView1" runat="server" >
  <asp:View ID="View1" runat="server"  >
       <table width="100%" height="500" cellpadding=0 cellspacing=0>
           <tr valign="top">
               <td style="width: 100%">
                   <center><h3>Edit content</h3></center><br />
                   <asp:LinkButton ID="preview_button" Text="Preview content" runat="server" onClick="previewClick" />
                   <br /><br />
                   <obout:Editor runat="server" Id="editor" Height="400px" Width="100%" >
                       <BottomToolbar ShowPreviewButton="false" ShowDesignButton="false"
                                              ShowHtmlTextButton="false" />
                   </obout:Editor>
               </td>
           </tr>
       </table>
    </asp:View>
   <asp:View ID="View2" runat="server">
       <table width="100%" height="500px" cellpadding=0 cellspacing=0>
           <tr valign="top">
               <td style="width: 100%">
                   <center><h3>Content</h3></center><br />
                   <asp:LinkButton ID="back_to_edit_button" Text="Back to edit" runat="server"
                                          onClick="backToEditClick" />
                   <asp:LinkButton ID="finish_button" Text="Finish" runat="server" onClick="finishClick" />
                   <br /><br /><hr style="width:100%" />
                   <asp:Label runat="server" ID="editor_content" Text="" />
                   <hr style="width:100%" />
               </td>
           </tr>
       </table>
   </asp:View>
   <asp:View ID="View3" runat="server">
       <table width="100%" height="500px" cellpadding=0 cellspacing=0>
           <tr valign="top">
               <td style="width: 100%">
                   <center><h3>Content description</h3></center><br />
                   <asp:LinkButton ID="back_to_preview_button" Text="Back to preview" runat="server"
                                          onClick="backToPreviewClick" />
                   <br /><br /><hr style="width:100%" />
                   <table cellpadding=0 cellspacing=4 border=0>
                     <tr>
                       <td align="left">Total HTML length:</td>
                       <td align="right"><asp:Label runat="server" style="color:blue;" ID="htmlLength" Text="" /></td></tr>
                     <tr>
                       <td align="left">Plain Text length:</td>
                       <td align="right"><asp:Label runat="server" style="color:blue;" ID="plainLength" Text="" /></td></tr>
                   </table>
                   <hr style="width:100%" />
               </td>
           </tr>
       </table>
   </asp:View>
</asp:MultiView>
...
<script runat="server" language="c#">
protected void previewClick(object sender, EventArgs e)
{
  MultiView1.ActiveViewIndex = 1;
  editor_content.Text = editor.Content;
}
protected void backToEditClick(object sender, EventArgs e)
{
  MultiView1.ActiveViewIndex = 0;
}
protected void finishClick(object sender, EventArgs e)
{
  MultiView1.ActiveViewIndex = 2;
  htmlLength.Text = editor.Content.Length.ToString();
  plainLength.Text = editor.PlainText.Length.ToString();
}
protected void backToPreviewClick(object sender, EventArgs e)
{
  MultiView1.ActiveViewIndex = 1;
  editor_content.Text = editor.Content;
} 
</script>

"I have to say, you guys are too cool. Not only do you put out these cool things, but you got back to me so fast it is unbelievable!!"

Christian Loepp

Random testimonial   All testimonials

Products Downloads