In this article I will address the problem faced when using TinyMCE Rich TextBox Editor inside ASP.Net UpdatePanel.
There are two problems faced, first is that the TinyMCE Rich TextBox Editor disappears after Partial PostBack inside UpdatePanel and second is that the value entered in the TinyMCE Rich TextBox Editor is lost after Partial PostBack in UpdatePanel.
Note: For details on how to use TinyMCE Editor in ASP.Net. Kindly refer
 
Below is the TinyMCE Rich TextBox Editor implementation for the ASP.Net TextBox inside UpdatePanel.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
    <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"></asp:TextBox>
    <asp:HiddenField ID="HiddenField1" runat="server" />
    <br />
    <asp:Button ID="Button1" runat="server" Text="Submit" />
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jscripts/tiny_mce/jquery.tinymce.js"></script>
<script type="text/javascript">
$(function () {
    LoadTinyMCE();
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function (sender, e) {
    LoadTinyMCE();
});
function LoadTinyMCE() {
    $('[id*=TextBox1]').tinymce({
        script_url: 'jscripts/tiny_mce/tiny_mce.js',
        theme: "advanced",
        plugins: "spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,
inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,
fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
        theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,
justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,
fontsizeselect,spellchecker",
        theme_advanced_buttons2: "",
        theme_advanced_buttons3: "",
        theme_advanced_buttons4: "",
        theme_advanced_toolbar_location: "top",
        theme_advanced_toolbar_align: "left",
        theme_advanced_statusbar_location: "bottom",
        theme_advanced_resizing: true,
        height: 200,
        skin: "o2k7",
        skin_variant: "silver",
        setup: function (ed) {
            ed.onChange.add(function (ed, l) {
                $('[id*=HiddenField1]').val(l.content);
            });
        }
    });
}
</script>
 
 
1. TinyMCE Rich TextBox Editor disappear after Partial PostBack inside UpdatePanel
To solve this problem I have made use of the JavaScript endRequest event handler of ASP.Net UpdatePanel. This event handler is raised when the UpdatePanel completes its Partial PostBack. And inside this event handler, the TinyMCE plugin is again applied to the TextBox.
In the below code snippet you will notice that TinyMCE is applied twice to the TextBox.
1. On the Page Load Complete event of the Page
2. When the UpdatePanel completes its Partial PostBack.
$(function () {
    LoadTinyMCE();
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function (sender, e) {
    LoadTinyMCE();
});
 
Note: The ASP.Net UpdatePanel’s JavaScript event handlers are explained in detail in the following article
 
2. The value entered in the TinyMCE Rich TextBox Editor is lost after Partial PostBack in UpdatePanel
To solve this problem I have made use of a HiddenField control. In the Change event handler of TinyMCE Rich TextBox Editor its value is stored in the HiddenField and then on Server Side the value of the HiddenField is again restored in the TextBox inside the ScriptManager’s IsInAsyncPostBack check.
setup: function (ed) {
      ed.onChange.add(function (ed, l) {
           $('[id*=HiddenField1]').val(l.content);
      });
}
 
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (ScriptManager1.IsInAsyncPostBack)
    {
        TextBox1.Text = Request.Form[HiddenField1.UniqueID];
    }
}
 
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs)
    If ScriptManager1.IsInAsyncPostBack Then
        TextBox1.Text = Request.Form(HiddenField1.UniqueID)
    End If
End Sub
 
Using TinyMCE Rich TextBox inside UpdatePanel across Partial PostBack in ASP.Net
Note: Since the TinyMCE Rich TextBox Editor sends HTML content to server side it is very important to set ValidateRequest="false" in the @Page of the ASP.Net Page as shown below.
 
<%@ Page Language="Default" AutoEventWireup="false" CodeFile=" Default.aspx.cs" Inherits="_Default " ValidateRequest="false" %>
 
 
Demo
View Demo
 
Downloads