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

Question

我正在使用 Bootstrap 和 tinymce-rails，这样我就可以为我的一些文本区域提供一个不错的文本编辑器。然而，我有一个模态呈现一个包含文本区域和“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=[];
    });