1

Topic: TinyMCE Running in an ASP UpdatePanel Works in IE but not in Chrome

We created a simple, one page, test app to illustrate the problem. It consists of a MasterPage-based ASP Page that contains an UpdatePanel that houses a ContentControl with multiple TinyMCE controls. Everything works fine and dandy within IE - the data is persisted between post backs and the TinyMCE control renders itself again properly as the page renders. Unfortunately, TinyMCE does not re-render itself after the post back in Chrome and Firefox where Chrome is our next important target browser and Firefox would be a nice-to-have.

The setup seems amazingly simple and works fantastic. It seems almost too simple and I have to believe we're missing something important that we just don't understand. We'd certainly appreciate your help. Thank you in advance.

I have a zip file containing our simple sample project but in lieu of being able to upload it, I'll just share the snippets of code.

ASP:
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TinyMCETest.Default" ValidateRequest="false" %>
<%@ Register src="Default.ascx" tagname="Default" tagprefix="uc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <uc1:Default ID="Default1" runat="server" />
</asp:Content>

ASCX:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Default.ascx.cs" Inherits="TinyMCETest.Default1" %>
<p>
    Default Page
</p>

<!--
All OK on IE.

On Chrome, when the TinyMCE controls are *inside* the oPanelTextBoxContainer Panel, they stop working after a postback on Chrome.  'Stopping working' means they revert to being regualr TextBoxes, rather than TinyMCE controls.

On Firefox the TinyMCE controls stop working after a postback, irrespective of whether or not they are  within the Panel.
-->

<asp:Panel ID="oPanelTextBoxContainer" runat="server">

    <asp:TextBox ID="oTextBoxEditor1" runat="server" ClientIDMode="Static"
                    TextMode="MultiLine" Width="296px" Height="74px" CssClass="tinymce"></asp:TextBox>
    <br /><br />
    <asp:TextBox ID="oTextBoxEditor2" runat="server" ClientIDMode="Static"
                    TextMode="MultiLine" Width="296px" Height="74px" CssClass="tinymce"></asp:TextBox>
    <br /><br />

</asp:Panel>

<asp:Button ID="oButtonPostback" runat="server" Text="Cause Postback" OnClick="oButtonPostback_Click" />
<br /><br />
<asp:Label ID="oLabelText1" runat="server"></asp:Label>
<br />
<asp:Label ID="oLabelText2" runat="server"></asp:Label>

ASCX.CS:
    public partial class Default1 : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), oButtonPostback.ClientID, "initTinyMCE();", true);
        }
        protected void oButtonPostback_Click(object sender, EventArgs e)
        {
            oLabelText1.Text = "Text: " + oTextBoxEditor1.Text;
            oLabelText2.Text = "Text: " + oTextBoxEditor2.Text;
        }
    }

MasterPage:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="TinyMCETest.Site" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>

    <script type="text/javascript" src="JavaScripts\ImagePreloader.js">
    </script>

    <!-- TinyMCE Script -->
    <script type="text/javascript" src='<%=ResolveUrl("~/JavaScripts/tinymce/js/tinymce/tinymce.min.js") %>'>
    </script>

    <!-- The setup entry below is so that the underlying text of the control is updated every time the text area is changed -->
    <script type="text/javascript">
        function initTinyMCE()
        {
            tinymce.init(
            {
                selector: ".tinymce",
                setup: function (editor) {
                    editor.on('change', function () { tinymce.triggerSave(); });
                },
                theme: "modern",
                menubar: false,
                resize: "vertical",
                statusbar: true,
                elementpath: false,
                plugins: ["advlist autolink lists charmap preview hr anchor",
                    "pagebreak code nonbreaking table contextmenu directionality paste"],
                toolbar1: "styleselect | bold italic underline | code preview | undo redo | tablecontrols | bullist numlist outdent indent"
            });
        }
    </script>
</head>

<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"></asp:ScriptManager>

    <div>
        Master Page
    </div>
    <div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>

            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>

            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>