title: TinyMCE and Bootstrap Modals -- Works only one time
body: <p>I'm using Bootstrap and tinymce-rails so that I can have a nice text editor for some of my text areas. However, I'm having a modal render a form that contains a textarea and the "tinymce" class, but this modal only actually shows the TinyMCE text editor <strong><em>one</em></strong> time. Once the modal is closed and re-opened, it only looks like a regular text field.</p>
  
  <p>Here's the form that's being rendered:</p>
  
  <pre><code>&lt;%= form_for @paragraph_section, html: {class: "form-horizontal"} do |f| %&gt;
  &lt;div class="form-group"&gt;
    &lt;%= f.label :paragraph, nil, class: "col-sm-3 control-label" %&gt;
    &lt;div class="col-sm-6"&gt;
      &lt;%= f.text_area :paragraph, placeholder: "(e.g. Hello World)", class: "form-control tinymce" %&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt;
    &lt;%= f.submit "Add paragraph", class: "btn btn-xs btn-primary" %&gt;
  &lt;/div&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p>Now when I click on the "New paragraph" link, which is sends a remote call to new.js.erb, here's this modal pops up and the tinymce text editor actually works. But again, once I close this and re-open the mdoal with the "new paragraph" link again, the tinymce text editor doesn't work. </p>
  
  <p>Here's what the new.js.erb file looks like:</p>
  
  <pre><code>$('#modalOne').modal({show: true});
  $('#modal_content').html("&lt;%= j render 'form' %&gt;");
  $('#modal_header').html("New Paragraph");
  
  tinymce.init({
      selector: "textarea",
      width:      '100%',
      height:     270,
      plugins:    [ "anchor link" ],
      statusbar:  false,
      menubar:    false,
      toolbar:    "link anchor | alignleft aligncenter alignright alignjustify",
      rel_list:   [ { title: 'Lightbox', value: 'lightbox' } ]
  });
  </code></pre>
  
  <p>Any idea how I can have the tinymce text editor working, despite me closing and re-opening the same modal?</p>