javascript - TinyMCE UpdatePanel 重新初始化问题

标签 javascript jquery asp.net ajax

很抱歉再次提出这个问题,我已经查看了 SO、代码项目、ASP 论坛和 TinyMCE 论坛上的其他问题,但没有抽雪茄。

我有一个更新面板,里面有两个模板,其中包含由可折叠面板扩展器处理的内容文本区域 (asp:textbox)。在 Page_Load 上,两个文本区域都由 TinyMCE 插件控制,但是当您关闭并再次打开它时,文本框都没有 TMCE Controller 。

我正在尝试让 TinyMCE Controller 填充文本区域,而不管部分回发。

我已经尝试删除所有其他 jQuery 插件和脚本但没有效果,所以我排除了与其他脚本的兼容性问题。

为了在我的代码中澄清重新初始化部分与我拥有的其他插件一起工作,所以我期望/希望它在这里工作。

我精简并简化了我的代码以仅包含相关部分,如果我遗漏了任何内容,请告诉我,我会更新问题。

非常感谢任何帮助,谢谢。

脚本

<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 更新面板

    <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>

更新 1

我正在考虑使用 AJAX 来解决这个问题,以在部分重新加载时调用 tinymce 插件 - 这是否可能,到目前为止的尝试都失败了。

我已经尝试从 page_load 初始化 jquery tinymce 函数,如果它还没有被调用但仍然没有。

VB.NET 代码

    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

当我尝试通过 jQuery 执行此操作时,它破坏了整个插件。

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

最佳答案

对下面的内容投了赞成票,因为它引导我找到了解决方案,scriptmanager 在我的母版页中,因此影响了一切。

最后我禁用了我的 updatePanel - 再次像你的一样,这不是一个解决方案,但解决了 texteditor 问题。

为了填补更新面板的空白,我将使用 JQuery 来替换更新面板,这些问题解决了问题,希望对您有所帮助。

This & this这是关于如何使用 JQuery 替代 ASP updatepanel 的两个信息性问答。

关于javascript - TinyMCE UpdatePanel 重新初始化问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25380964/

相关文章:

javascript - 从 MySQL 数据加载滚动 jQuery/PHP 数据

使用基于表单的 Asp.net MVC 身份验证与基于 Windows 的身份验证

单击按钮调用它时未找到 Javascript 函数

javascript - 允许使用 Html <img src ="&lt;script&gt;Some javascript&lt;/script&gt;"> 吗?

javascript - 如何在图像上垂直对齐文本

javascript - 每当 java 脚本过时时强制刷新客户端浏览器

Jquery 响应移动导航到常规导航

javascript - 如何在 NodeJS 中调用导出函数?哪些可以嵌套?

javascript - 单击弹出窗口中的图像更改选择选项

c# - ASP :RequiredFieldValidator causes validation on Server even if validator is disabled