TinyMCE UpdatePanel重新启动问题

Question

Apologies for bringing this question up again, I have looked through the other questions on SO, Code Project, ASP Forums and TinyMCE forums and no cigar.

I have an update panel within sits two Templates with content text areas (asp:textbox) which are handled by Collapsible Panel Extenders. On Page_Load both the text areas are being controlled by the TinyMCE plugin, but when you close one and open it again, neither have the TMCE controller for the textbox.

I am trying to get the TinyMCE controller to populate the textareas regardless of partial postback.

I have tried removing all of the other jQuery plugins and scripts to no effect, so I have ruled out compatibility issues with the other scripts.

To clarify within my code the reinitialisation segment works with the other plugins I have so I would have expected/hoped it would have worked here.

I have slimmed down and simplified my code to only contain the relevant segments, if I have missed anything please let me know and I'll update the question.

Any help would be greatly appreciated, thanks.

Scripts

<script src="../Scripts/tinymce/tinymce.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        tinymce.init({
            menubar: false,
            width: 800,
            height: 250,
            selector: "textarea"
        });

          function confirm_delete() {
              return confirm('Are you sure that you wish to delete this announcement?');
          }

    // reinitialise everything after postback
       var prm = Sys.WebForms.PageRequestManager.getInstance();

              prm.add_endRequest(function () {

                      tinymce.init({
                          menubar: false,
                          width: 800,
                          height: 250,
                          selector: "textarea"
                      });
  </script>      

ASP Update Panel

    <asp:UpdatePanel ID="annupd" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional" >
                 <ContentTemplate>           
        <asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="Id" InsertItemPosition="FirstItem" ItemPlaceholderID="lay0" OnItemCommand="ListView1_ItemCommand" AllowPaging="True" EnableViewState="true">
            <EditItemTemplate>
                <tr style="background-color:#fffAfC;">
                    <td  style="width:90px;" rowspan="3">
                        <asp:Button ID="UpdateButton" runat="server" CommandName="Update" Text="Update" />
                        <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="Cancel" />
                    </td>
                    <td >
                        <asp:TextBox ID="TitleTextBox" runat="server" Text='<%# Bind("Title") %>' Width="300px" />
                    </td>
                    <td>
                        <asp:CheckBox ID="EnabledTextBox" runat="server" Checked="SomeBind" />Enabled
                    </td>
                </tr>
                <tr >
                    <td colspan="4">
                        <asp:TextBox ID="TextBox2" runat="server" Text="SomeBind" TextMode="MultiLine" Width="100%" Rows="16"/>
                    </td>
                </tr>
                <tr style="background-color:#fffAfC;color: #FFFFFF;">
                    <td colspan="2">
                        <asp:TextBox ID="URLLinkTextBox" runat="server" Text="SomeBind"  Width="100%"/>
                    </td>
                <td colspan="1">
                        <asp:DropDownList ID="Group" runat="server" Text="SomeBind"  Width="120px"  DataSourceID="SqlDataSource0" DataTextField="GroupName" DataValueField="ID">
                        </asp:DropDownList>
                    </td>
                    <td colspan="1">
                    <asp:DropDownList ID="DLL2" runat="server" Width="120px" OnSelectedIndexChanged="DLL2_SelectedIndexChanged" AutoPostBack="true" EnableViewState="true" CausesValidation="false">
                        <asp:ListItem Value="0">Select</asp:ListItem>
                        <asp:ListItem Value="1">Option 1</asp:ListItem>
                        <asp:ListItem Value="2">Option 2</asp:ListItem>
                    </asp:DropDownList>
                    <td>>
                    </td>
                </td>
                </tr>
            </EditItemTemplate> 
            <EmptyDataTemplate>
                <table runat="server" style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;">
                    <tr>
                        <td>No data was returned.</td>
                    </tr>
                </table>
            </EmptyDataTemplate>
             <ItemSeparatorTemplate>
               <tr>
                    <td colspan="5" class="hr"><hr /></td>
                </tr>
            </ItemSeparatorTemplate>
            <InsertItemTemplate>
                <tr>
                    <td colspan="5" >
                        <asp:panel runat="server" ID="Panel1"  >
                            <div style="vertical-align:middle;height:30px;">
                                <div style="float:left;vertical-align:top;height:20px;display:inline;padding:0px;"> 
                                <asp:ImageButton ID="cdimg" runat="server" AlternateText="+" ImageUrl="/images/expand3.jpg" BorderStyle="None" CssClass="bimg" />
                                </div>
                                <div style="float:left;vertical-align:middle;display:inline;padding:2px; cursor:pointer;"><h3>&nbsp;Add New Announcement</h3>
                                </div>
                            </div>
                        </asp:panel>
                    </td>
                </tr>
                <tr>
    <td colspan="5" >
        <asp:panel runat="server" ID="Panel2" CssClass="cpBody">
             <table id="innert" runat="server" style="width:100%;">
                <tr style="">
                    <td rowspan="3" style="width:90px;">
                        <asp:Button ID="InsertButton" runat="server" CommandName="Insert" Text="Insert" />
                        <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="Clear" />
                    </td>
                    <td>
                        <asp:TextBox ID="TitleTextBox" runat="server" Text="SomeBind" Width="300px" />
                    </td>
                    <td style="width:80px;">
                        <asp:CheckBox ID="EnabledTextBox" runat="server" Checked="true" />Enabled
                    </td>
                </tr>
                <tr >
                    <td colspan="4">
                        <asp:TextBox ID="TextBox" runat="server" Text="SomeBind" Width="100%" TextMode="MultiLine" Rows="16" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <asp:TextBox ID="URLLinkTextBox" runat="server" Text="SomeBind" Width="100%"  />
                    </td>
                    <td colspan="1">
                        <asp:DropDownList ID="Group" runat="server" Text="SomeBind" Width="100px" DataSourceID="SqlDataSource0" DataTextField="GroupName" DataValueField="ID" >
                        </asp:DropDownList>
                    </td>
                     <td colspan="1">
                         <asp:DropDownList ID="DDL" runat="server" Width="100px" OnSelectedIndexChanged="DDL_SelectedIndexChanged" AutoPostBack="true" CausesValidation="false" EnableViewState="true">
                            <asp:ListItem Value="0">Select</asp:ListItem>
                            <asp:ListItem Value="1">Option 1</asp:ListItem>
                            <asp:ListItem Value="2">Option 2</asp:ListItem>
                        </asp:DropDownList>
                    </td>
                </tr>
         </table>       
  </asp:panel>
        <act:CollapsiblePanelExtender runat="server" ID="ocpe" TargetControlID="Panel2" CollapseControlID="Panel1" ExpandControlID="Panel1" ImageControlID="odimg" CollapsedImage="/images/expand3.jpg" ExpandedImage="/images/contract3.jpg" Collapsed="True" ExpandedSize="450">
</act:CollapsiblePanelExtender>
</td>
</tr>
    </InsertItemTemplate>
            <ItemTemplate>

            </ItemTemplate>
            <SelectedItemTemplate>

            </SelectedItemTemplate>
            <LayoutTemplate>
                            <table id="imoo" border="1" style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;font-family: Verdana, Arial, Helvetica, sans-serif;width:100%;">
                                <thead>
                                    <th>&nbsp;</th>
                                    <th>Title</th>
                                    <th>&nbsp;</th>
                                </thead>
                                <asp:literal id="lay0" runat="server"> </asp:literal>
                            </table>
                <div id="centrepager" style="width:100%; text-align:center">
                <asp:DataPager PageSize="10" PagedControlID="ListView1" runat="server" ID="ListViewPageController" QueryStringField="Id">
                    <Fields>
                        <asp:NextPreviousPagerField ShowFirstPageButton="true" ShowNextPageButton="false"/>
                        <asp:NumericPagerField ButtonCount="5" />
                        <asp:NextPreviousPagerField ShowLastPageButton="true" ShowPreviousPageButton="false"/>
                    </Fields>
                </asp:DataPager>
                    </div>
            </LayoutTemplate>
        </asp:ListView>
              </ContentTemplate>
             </asp:UpdatePanel>

Update 1

I am thinking of using AJAX to solve this issue to call the tinymce plugin on partial reload - would this be possible, attempts so far have failed.

I have tried initialising the jquery tinymce function from the page_load if it hasn't already been called but still nothing.

VB.NET Code

    Public Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Page.IsPostBack Then
            If (Not ClientScript.IsStartupScriptRegistered("tinymce")) Then
                Page.ClientScript.RegisterStartupScript _
                        (Me.GetType(), "tinymce", "tinymce();", True)
        End If
    End If
End Sub

When I tried to do this through jQuery it broke the entire plugin.

              function pageLoad() {
              tinymce.init({
                  menubar: false,
                  width: 800,
                  height: 250,
                  selector: "textarea"
              });

Answer 1

Unfortunately, I couldn't find a way to get this working with the update panel functioning through ASP.

To sort out the tinymce issue I have disabled EnablePartialRendering within the ScriptManagerToolkit.

Whilst this isn't the solution I wanted, it's the one that worked for this particular issue - due to time constraints this needed to work ASAP.

If/when I/someone else finds a better solution I'll update this thread. The key to getting this to work does appear to rely on a form of postback so that tinymce reinitialises on partial page load.

Answer 2

Upvoted the below as it led me to a solution, scriptmanager was in my masterpage so affected everything.

In the end I disabled my updatePanel - again like yours, this is not a solution as such but sorted the texteditor issue out.

To fill the updatepanel's boots, I'll use JQuery to replace the update panel, these questions sort the issue out hope this helps.

This & this which are two informative Q&As on how to use JQuery as a replacement for then ASP updatepanel.