TinyMCE and Bootstrap Modals -- Works only one time

Question

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 one time. Once the modal is closed and re-opened, it only looks like a regular text field.

Here's the form that's being rendered:

<%= form_for @paragraph_section, html: {class: "form-horizontal"} do |f| %>
<div class="form-group">
  <%= f.label :paragraph, nil, class: "col-sm-3 control-label" %>
  <div class="col-sm-6">
    <%= f.text_area :paragraph, placeholder: "(e.g. Hello World)", class: "form-control tinymce" %>
  </div>
</div>
<div class="modal-footer">
  <%= f.submit "Add paragraph", class: "btn btn-xs btn-primary" %>
</div>
<% end %>

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.

Here's what the new.js.erb file looks like:

$('#modalOne').modal({show: true});
$('#modal_content').html("<%= j render 'form' %>");
$('#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' } ]
});

Any idea how I can have the tinymce text editor working, despite me closing and re-opening the same modal?

Answer 1

I found that using the below when the modal is closed works perfectly fine:

    $('#modalOne').on('hide.bs.modal', function () {
    tinyMCE.editors=[];
    });

Answer 2

The solution didn't work for me with TinyMCE 5 and Bootstrap 4. In the end I followed Abdur's link and had to use the remove method.

 $('#modalOne').on('hide.bs.modal', function () {
    // scope the selector to the modal so you remove any editor on the page underneath.
    tinymce.remove('#modalOne textarea');
 });