title: Reinitialize TinyMCE 4 in AJAX
body: <p>I'm using TinyMCE in an ajax enabled <a href="http://foundation.zurb.com/docs/components/reveal.html" rel="nofollow noreferrer">Foundation Reveal</a> box. Now the TinyMCE kicks in the first time it loads, but if I close the box and open it again it doesn't trigger :(</p>
  
  <p>I have other scripts like <a href="http://harvesthq.github.io/chosen/" rel="nofollow noreferrer">chosen</a> and <a href="http://digitalbush.com/projects/masked-input-plugin/" rel="nofollow noreferrer">masked input</a> triggered in the exact same fore query that work, but TinyMCE will not reinitialize when I reload it a second time</p>
  
  <p>This is my code currently that I'm trying as recommended at <a href="https://stackoverflow.com/questions/14971384/having-issues-with-multiple-ajax-refresh-and-tinymce/14978745">this question</a>:</p>
  
  <pre><code>$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
      $("#expenseUser, #expenseVendorID, #expenseCategoryID, #expenseAccidentID").chosen({disable_search_threshold: 5, width: '365px'});
      $("#expOdo").mask("999999",{placeholder:"0"});
      $('.datePicker').each(function() {
          $(this).datetimepicker({
              addSliderAccess: true,
              sliderAccessArgs: {touchonly: false},
              changeMonth: true,
              changeYear: true,
              altField: "#"+$(this).attr('id')+"Alt",
              altFieldTimeOnly: false,
              altFormat: "yy-mm-dd",
              altTimeFormat : "HH:mm:ss",
              dateFormat: "D, d MM yy",
              timeFormat: "hh:mmtt"
          });
      });
      tinymce.execCommand('mceRemoveEditor',true,"textarea#expenseComments");
      tinymce.execCommand('mceAddEditor',true,"textarea#expenseComments");
      tinyMCE.init({selector: "textarea#expenseComments",menubar : false,toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright"});
  });
  </code></pre>
  
  <p><strong>UPDATED</strong></p>
  
  <p>I've tried changing to the following with luck, but I think this is the right path to go down?</p>
  
  <pre><code>$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
      $("#expenseUser, #expenseVendorID, #expenseCategoryID, #expenseAccidentID").chosen({disable_search_threshold: 5, width: '365px'});
      $("#expOdo").mask("999999",{placeholder:"0"});
      $('.datePicker').each(function() {
          $(this).datetimepicker({
              addSliderAccess: true,
              sliderAccessArgs: {touchonly: false},
              changeMonth: true,
              changeYear: true,
              altField: "#"+$(this).attr('id')+"Alt",
              altFieldTimeOnly: false,
              altFormat: "yy-mm-dd",
              altTimeFormat : "HH:mm:ss",
              dateFormat: "D, d MM yy",
              timeFormat: "hh:mmtt"
          });
      });     
      tinyMCE.init({selector: "textarea#expenseComments",menubar : false,toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright"});
  }); 
  $(document).on('close.fndtn.reveal', '[data-reveal]', function () {
      tinymce.execCommand('mceRemoveEditor',true,"textarea#expenseComments");
  }); 
  </code></pre>