TinyMCE 和 Bootstrap Modals -- 只工作一次 [英] TinyMCE and Bootstrap Modals -- Works only one time
问题描述
我正在使用 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 class="modal-footer"><%= f.submit "添加段落", class: "btn btn-xs btn-primary" %>
<%结束%>
现在,当我点击新段落"链接时,它会向 new.js.erb 发送一个远程调用,这里会弹出这个模式,tinymce 文本编辑器实际上可以工作.但是,一旦我关闭它并再次使用新段落"链接重新打开 mdoal,tinymce 文本编辑器就无法工作.
new.js.erb 文件如下所示:
$('#modalOne').modal({show: true});$('#modal_content').html("<%= j render 'form' %>");$('#modal_header').html("新段落");tinymce.init({选择器:文本区域",宽度: '100%',高度:270,插件:[锚链接"],状态栏:假,菜单栏:假,工具栏:链接锚点 | alignleft aligncenter alignright alignjustify",rel_list: [ { title: 'Lightbox', value: 'lightbox' } ]});
知道如何让 tinymce 文本编辑器工作,尽管我关闭并重新打开了相同的模式?
我发现在模态关闭时使用下面的方法效果很好:
$('#modalOne').on('hide.bs.modal', function () {tinyMCE.editors=[];});
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?
I found that using the below when the modal is closed works perfectly fine:
$('#modalOne').on('hide.bs.modal', function () {
tinyMCE.editors=[];
});
这篇关于TinyMCE 和 Bootstrap Modals -- 只工作一次的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!