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>

"Just wanted to drop a quick note to say what an excellent job you're doing with your web UI products. I just implemented the splitter control with out a single problem (or curse word)! I look forward to using your other components!"

Doug Arp

Random testimonial   All testimonials