Question

我正在使用Bootstrap和tinymce-rails，这样我就可以为我的一些文本区域提供一个很好的文本编辑器。但是，我有一个模态渲染包含textarea和“tinymce”类的表单，但是这个模式实际上只显示了TinyMCE文本编辑器一个时间。关闭并重新打开模态后，它只会看起来像常规文本字段。

这是正在呈现的表单：

<%= 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 %>

现在，当我点击“新段落”链接，它发送一个远程调用new.js.erb时，这个模式弹出，并且tinymce文本编辑器实际上工作。但是，再次，一旦我关闭它并再次用“新段落”链接重新打开mdoal，tinymce文本编辑器不起作用。

这是new.js.erb文件的样子：

$('#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' } ]
});

我知道如何让tinymce文本编辑器工作，尽管我关闭并重新打开相同的模态？

Answer 1

我发现当模态关闭时使用下面的方法完全正常：

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

Answer 2

你可以试试这个

// 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/

Answer 3

你真的应该使用模态事件+ ajax调用成功来初始化TinyMCE。请注意下面的ajax调用是小提琴，当然需要你的自定义设置。

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

Answer 4

遵循官方TinyMCE advice / Sarath Ak的上述回答似乎不适用于Bootstrap 4和TinyMCE 5的组合。要使此解决方案再次起作用，需要做一些小改动：您需要更改jQuery closest()查找来选择.tox而不是.mce-window。

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

Answer 5

对于TinyMCE 5和Bootstrap 4，该解决方案不适用于我。最后，我遵循Abdur's link，不得不使用remove方法。

 $('#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');
 });

Answer 6

TinyMCE 和 Bootstrap Modals 工作一次，然后当有多个 jquery 库时会发生错误，只需对此进行评论 src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"

那样

@* *@

Answer 7

您可以在关闭模态框时简单地销毁编辑器

$('#YOUR_MODAL_ID').on('hidden.bs.modal', function(e) {
   //EDITOR_ID will be without #
   tinyMCE.get("EDITOR_ID").remove();

});

再次打开模态框后初始化编辑器。

TinyMCE和Bootstrap模式 - 仅工作一次

7 个答案: