title: TinyMCE attaches then disappears when using jquery modal dialog and MVC.net
body: <p>I have an MVC.net page with a button that opens a jquery modal dialog. I open my dialog like this </p>
  
  <pre><code>$(dialogId).dialog(
              {
                  dialogClass: 'test', closeOnEscape: true,
                  title: title,
                  height: height,
                  width: width,
                  minHeight: minHeight, maxHeight: maxHeight,
                  minWidth: minWidth, maxWidth: maxWidth,
                  resizable: resizable,
                  modal: true,
                  show: 'blind',
                  hide: 'blind',
                  open: addTinyMCE
              });
  </code></pre>
  
  <p>addTinyMCE is a function that lives in my partial and the partial is the content for the modal. The add tiny MCE code looks like this</p>
  
  <pre><code>function addTinyMCE() {
          $('#emailMessage').tinymce({
              script_url: '/Scripts/tiny_mce/tiny_mce.js',
  
              theme: "advanced",
              plugins: "myButton,autolink,lists,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: "xedomenubutton,undo,redo,bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull",
              theme_advanced_buttons2: "formatselect,fontselect,fontsizeselect",
              theme_advanced_buttons3: "bullist,numlist,|,outdent,indent,|,link,unlink,anchor,image,|,insertdate,inserttime,|,forecolor,backcolor,|,fullscreen",
              theme_advanced_toolbar_location: "top",
              theme_advanced_toolbar_align: "left",
              theme_advanced_resizing: true,
  
              skin: "o2k7",
  
              template_external_list_url: "js/template_list.js",
              external_link_list_url: "js/link_list.js",
              external_image_list_url: "js/image_list.js",
              media_external_list_url: "js/media_list.js"            
          });
      }
  </code></pre>
  
  <p>myButton is a tinyMCE button which I have created for some custom actions.</p>
  
  <p>When I click the button on my main page to open the dialog, the dialog opens as expected but the  tinymce editor flashes against the textarea within the partial dialog popup and then returns to a normal textarea. The partial also has a drop down list that when changed, updates the content of the tinymce textarea (ajax) and again, the textarea appears with the tinymce editor attached and then returns to a normal textarea.</p>
  
  <p>Also, with this being a modal dialog, when should the following commands be called to create and add the custom button.</p>
  
  <pre><code>tinymce.create
  tinymce.PluginManager.add
  </code></pre>
  
  <p>When I try attaching the editor to a textarea in my main page, everything works as expected (editor attaches to text area, custom button is displayed and functions correctly).</p>
  
  <p>Any suggestions?</p>
  
  <p>I'm using the jquery version of the tinymce editor.</p>
  
  <p>EDIT:</p>
  
  <p>I eventually went back to using the jquery version of tinyMCE as it was functioning far better with the UI Dialog than the standard version.</p>
  
  <p>I've managed to get my custom button loading in correctly and the editor is available when i close and open the dialog.</p>
  
  <p>The only issue i'm left with is that on first open of the dialog, tinyMCE attaches to the textarea and then vanishes. I decided to put within my document ready function </p>
  
  <pre><code>setTimeout(function () { initTinyMCE(); }, 500);
  </code></pre>
  
  <p>and this works, interesting but not a solution.
  So it seems that there is a timing issue here.</p>
  
  <p>How can I ensure that the textarea is ready to take the tinymce editor or is the tinymce init firing too early?</p>