TinyMCE and Bootstrap Modals — Works only one time

问题

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?

回答1:

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

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

回答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');
 });

回答3:

you can try this

// Prevent Bootstrap dialog from blocking focusin
$(document).on('focusin', function(e) {
  if ($(e.target).closest(".mce-window").length) {
    e.stopImmediatePropagation();
  }
});

https://www.tinymce.com/docs/integrations/bootstrap/

回答4:

You really should use the modal event + ajax call success to initialize the TinyMCE. Please note the ajax call below is for the fiddle and will of course need your custom settings.

FIDDLE

$(document).on('shown.bs.modal', function () {
    $.ajax({
        url: '/echo/html/',
        data: {
            html: ajaxHtml
        },
        type: 'POST',
        success: function (data) {
            $('.modal-body').html(data).promise().done(function () {
                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'
                    }]
                });
            });
        }
    });
});

回答5:

Following the official TinyMCE advice / Sarath Ak's answer above doesn't seem to work for the combination of Bootstrap 4 and TinyMCE 5. One minor change is required to make this solution work again: you will need to change the jQuery closest() lookup to select .tox instead of .mce-window.

$(document).on('focusin', function(e) {
    if ($(e.target).closest(".tox").length) {
        e.stopImmediatePropagation();
    }
});

回答6:

TinyMCE and Bootstrap Modals works once and then there is an error happens when there is more than one jquery libruary, just comment this src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"

like that

@* </script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script/>*@

来源：https://stackoverflow.com/questions/26961325/tinymce-and-bootstrap-modals-works-only-one-time