Using Multiple TinyMCE Rich TextBox Editor inside AJAX UpdatePanel across Partial PostBack in ASP.Net

Last Reply on Apr 07, 2015 02:47 AM By Mudassar

Posted on Apr 07, 2015 02:22 AM

hello sir 

i saw your article 

http://www.aspsnippets.com/Articles/Using-TinyMCE-Rich-TextBox-Editor-inside-AJAX-UpdatePanel-across-Partial-PostBack-in-ASPNet.aspx

that is working fine 

i have a page with multiple textbox multiline 

when i apply your code for three textbox then it show only one editor and remain same as simple textbox and if i click on button it flickering 

how to solve this 

 

 

 

<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:TextBox ID="TextBox2" runat="server" TextMode="MultiLine"></asp:TextBox>
            <asp:HiddenField ID="HiddenField2" runat="server" />
            <br />
               <asp:TextBox ID="TextBox3" runat="server" TextMode="MultiLine"></asp:TextBox>
            <asp:HiddenField ID="HiddenField3" 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>
        <script type="text/javascript">
            $(function () {
                LoadTinyMCE();
            });
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            prm.add_endRequest(function (sender, e) {
                LoadTinyMCE();
            });
            function LoadTinyMCE() {
                $('[id*=TextBox2]').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*=HiddenField2]').val(l.content);
                        });
                    }
                });
            }
    </script>
        <script type="text/javascript">
            $(function () {
                LoadTinyMCE();
            });
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            prm.add_endRequest(function (sender, e) {
                LoadTinyMCE();
            });
            function LoadTinyMCE() {
                $('[id*=TextBox3]').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*=HiddenField3]').val(l.content);
                        });
                    }
                });
            }
    </script>

 

protected void Page_Load(object sender, EventArgs e)
{
    if (ScriptManager1.IsInAsyncPostBack)
    {
        TextBox1.Text = Request.Form[HiddenField1.UniqueID];
        TextBox2.Text = Request.Form[HiddenField2.UniqueID];
        TextBox3.Text = Request.Form[HiddenField3.UniqueID];
    }
}

 

Posted on Apr 07, 2015 02:47 AM

Try

<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:TextBox ID="TextBox2" runat="server" TextMode="MultiLine"></asp:TextBox>
            <asp:HiddenField ID="HiddenField2" runat="server" />
            <br />
               <asp:TextBox ID="TextBox3" runat="server" TextMode="MultiLine"></asp:TextBox>
            <asp:HiddenField ID="HiddenField3" 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], [id*=TextBox2], [id*=TextBox3]').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>