TinyMCE 和 Bootstrap 模态——只工作一次

Posted

技术标签:

【中文标题】TinyMCE 和 Bootstrap 模态——只工作一次【英文标题】:TinyMCE and Bootstrap Modals -- Works only one time 【发布时间】:2015-01-13 16:39:25 【问题描述】:

我正在使用 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 文本编辑器正常工作,尽管我关闭并重新打开相同的模式?

【问题讨论】:

对于包含此内容的其他页面(在模式之外),它可以正常工作。 在模式关闭时销毁可能会有所帮助。你可以检查这个link 【参考方案1】:

我发现在模态关闭时使用以下内容非常好:

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

【讨论】:

TinyMCE 5 和 Bootstrap 4 的答案对我不起作用。最后我按照 Abdur 的链接,不得不使用 remove 方法。 tinymce.remove('#modalOne textarea');// 将选择器的范围限定为模态,因此您可以删除下面页面上的任何编辑器。【参考方案2】:

您确实应该使用模式事件 + 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'
                    ]
                );
            );
        
    );
);

【讨论】:

【参考方案3】:

你可以试试这个

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

【讨论】:

如何在javascript中进行上述操作?不使用 Jquery【参考方案4】:

按照官方TinyMCE advice/Sarath Ak 的上述回答似乎不适用于 Bootstrap 4 和 TinyMCE 5 的组合。需要进行一个小的更改才能使此解决方案再次起作用:您需要更改 jQuery @ 987654322@ 查找以选择 .tox 而不是 .mce-window

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

【讨论】:

【参考方案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');
 );

【讨论】:

【参考方案6】:

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

这样

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

【讨论】:

【参考方案7】:

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

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

);

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

【讨论】:

以上是关于TinyMCE 和 Bootstrap 模态——只工作一次的主要内容,如果未能解决你的问题,请参考以下文章

bootstrap种modal怎么关闭

text 在模态问题中修复了tinymce上传

javascript 在模态问题中修复了tinymce上传

bootstrap的模态框的使用

Bootstrap 显示多个模态框(modal)

Bootstrap 4 模态不透明度