为什么我的控件在回发时消失了？

Question

我在更新面板中使用了 TinyMCE，但每次部分回帖后它都会消失，为什么？它应该在任何一种情况下都可以工作，甚至官方网站也没有关于它的消息。

我是这样使用的：

 <script type="text/javascript">
        tinymce.init({
            selector: '#<%=txtBoxBody.ClientID%>',
            height: 200,
            theme: 'modern',
            plugins: [
              'advlist autolink lists pagebreak',
              //'searchreplace wordcount visualblocks visualchars fullscreen',
              'insertdatetime save contextmenu directionality',
              ' paste textcolor textpattern print'
            ],
            toolbar1: 'insertfile undo redo | fontsizeselect | forecolor emoticons | fontselect emoticons | styleselect | bold italic | alignleft aligncenter alignright alignjustify',
            //toolbar2: 'print preview media | forecolor backcolor emoticons',
            //image_advtab: true,
            fontsize_formats: '8pt 9pt 10pt 11pt 12pt 14pt 18pt 20pt 22pt 24pt 26pt 28pt 36pt 48pt 72pt',
            //templates: [
            //  { title: 'Test template 1', content: 'Test 1' },
            //  { title: 'Test template 2', content: 'Test 2' }
            //],
            content_css: [
              '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
              '//www.tinymce.com/css/codepen.min.css'
            ]
        });


    </script>

on this txtbox 
<asp:TextBox runat="server" ID="txtBoxBody" Rows="20" Columns="25" TextMode="MultiLine" CssClass="form-control"></asp:TextBox>

它在第一页加载时出现，但在回发后不出现 更新：

它在页面加载事件中尝试过这个

 //ScriptManager.RegisterStartupScript(this, this.GetType(), txtBoxBody.UniqueID + "Add", "tinyMCE.execCommand('mceAddEditor', true,'" + txtBoxBody.ClientID + "');", true);
        //ScriptManager.RegisterOnSubmitStatement(this, this.GetType(), txtBoxBody.UniqueID + "Remove", "tinyMCE.execCommand('mceRemoveEditor', true,'" + txtBoxBody.ClientID + "');");

它使它可见，但使表单充满麻烦，即完整的回发和不同的问题。

更新：我使用了 javascript 的 pageLoad 并将此代码放入其中，但随后插件消失了。

更新：然后我尝试了 Piyush 的建议

<script type="text/javascript">
    function SetEditor() {
        tinymce.init({
            selector: '#<%=txtBoxBody.ClientID%>',
            height: 200,
            theme: 'modern',
            plugins: [
              'advlist autolink lists pagebreak',
              //'searchreplace wordcount visualblocks visualchars fullscreen',
              'insertdatetime save contextmenu directionality',
              ' paste textcolor textpattern print'
            ],
            toolbar1: 'insertfile undo redo | fontsizeselect | forecolor emoticons | fontselect emoticons | styleselect | bold italic | alignleft aligncenter alignright alignjustify',
            //toolbar2: 'print preview media | forecolor backcolor emoticons',
            //image_advtab: true,
            fontsize_formats: '8pt 9pt 10pt 11pt 12pt 14pt 18pt 20pt 22pt 24pt 26pt 28pt 36pt 48pt 72pt',
            //templates: [
            //  { title: 'Test template 1', content: 'Test 1' },
            //  { title: 'Test template 2', content: 'Test 2' }
            //],
            content_css: [
              '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
              '//www.tinymce.com/css/codepen.min.css'
            ]
        });


    }
</script>
<script type="text/javascript">
    // below will execute first time when page load
    SetEditor();

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

    function EndRequestHandler(sender, args) {
        // this will execute on partial postback
        SetEditor();
    }
</script>

同样的问题

Answer 1

@Piyush 的大力帮助和一点点修改就解决了问题。

  ScriptManager.RegisterStartupScript(this, this.GetType(), txtBoxBody.UniqueID + "Add", "tinyMCE.execCommand('mceAddEditor', true,'" + txtBoxBody.ClientID + "');", true);
  ScriptManager.RegisterOnSubmitStatement(this, this.GetType(), txtBoxBody.UniqueID + "Remove", "tinyMCE.execCommand('mceRemoveEditor', true,'" + txtBoxBody.ClientID + "');");

Answer 2

将你的 init 包装在一个函数中 然后确保向脚本管理器注册你的初始化函数 像例子 ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), mce.ClientID, "pageLoad();", true);

Answer 3

要解决此问题，请按照以下步骤操作，

1. 如下创建setEditor javascript函数，

   <script type="text/javascript">
   function SetEditor() {
       tinymce.init({
       ...
       });
   }
   </script>
   

2. 在正文标签结束前，添加下面的脚本，

   <script type="text/javascript">
       // below will execute first time when page load
       SetEditor();
   
       Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
   
       function EndRequestHandler(sender, args) {
           // this will execute on partial postback
           SetEditor();          
       }
   </script>